diff options
| -rw-r--r-- | assets/css/input.css | 56 | ||||
| -rw-r--r-- | assets/css/tailwind.css | 77 | ||||
| -rw-r--r-- | layouts/partials/header.html | 53 |
3 files changed, 159 insertions, 27 deletions
diff --git a/assets/css/input.css b/assets/css/input.css index 6243110..229247d 100644 --- a/assets/css/input.css +++ b/assets/css/input.css @@ -45,6 +45,62 @@ blockquote::before { } @layer components { + .menu { + transition: max-height 0.2s ease-out; + overflow: hidden; + display: flex; + /* this parts must be overridden on non small */ + flex-direction: column; + width: 100%; + position: fixed; + max-height: 0px; + } + .menu-btn:checked ~ .menu { + max-height: 240px; + z-index: 2; + } + /* What comes next is only to style the ham menu to an X when clicking */ + .menu-icon { + .navicon { + display: block; + height: 2px; + position: relative; + transition: background 0.2s ease-out; + width: 18px; + } + .navicon:before, + .navicon:after { + background: #ebdbb2; + content: ""; + display: block; + height: 100%; + position: absolute; + transition: all 0.2s ease-out; + width: 100%; + } + .navicon:before { + top: 6px; + } + .navicon:after { + top: -6px; + } + } + .menu-btn:checked { + ~ .menu-icon .navicon { + background: 0 0; + } + ~ .menu-icon .navicon:before { + transform: rotate(-45deg); + } + ~ .menu-icon .navicon:after { + transform: rotate(45deg); + } + ~ .menu-icon:not(.steps) .navicon:before, + ~ .menu-icon:not(.steps) .navicon:after { + top: 0; + } + } + #hero { text-shadow: 2px 2px 3px black; } diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index ea36784..3b17675 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -655,6 +655,66 @@ h6 { } } +.menu { + transition: max-height 0.2s ease-out; + overflow: hidden; + display: flex; + /* this parts must be overridden on non small */ + flex-direction: column; + width: 100%; + position: fixed; + max-height: 0px; +} + +.menu-btn:checked ~ .menu { + max-height: 240px; + z-index: 2; +} + +/* What comes next is only to style the ham menu to an X when clicking */ + +.menu-icon { + .navicon { + display: block; + height: 2px; + position: relative; + transition: background 0.2s ease-out; + width: 18px; + } + .navicon:before, + .navicon:after { + background: #ebdbb2; + content: ""; + display: block; + height: 100%; + position: absolute; + transition: all 0.2s ease-out; + width: 100%; + } + .navicon:before { + top: 6px; + } + .navicon:after { + top: -6px; + } +} + +.menu-btn:checked { + ~ .menu-icon .navicon { + background: 0 0; + } + ~ .menu-icon .navicon:before { + transform: rotate(-45deg); + } + ~ .menu-icon .navicon:after { + transform: rotate(45deg); + } + ~ .menu-icon:not(.steps) .navicon:before, + ~ .menu-icon:not(.steps) .navicon:after { + top: 0; + } +} + #hero { text-shadow: 2px 2px 3px black; } @@ -925,6 +985,10 @@ h6 { top: 0px; } +.top-12 { + top: 3rem; +} + .float-right { float: right; } @@ -1546,6 +1610,10 @@ blockquote::before { } @media (min-width: 768px) { + .md\:static { + position: static; + } + .md\:float-left { float: left; } @@ -1562,6 +1630,15 @@ blockquote::before { display: none; } + .md\:max-h-none { + max-height: none; + } + + .md\:w-fit { + width: -moz-fit-content; + width: fit-content; + } + .md\:shrink-0 { flex-shrink: 0; } diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 394f274..8394764 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,6 +1,6 @@ -<nav class="header w-full bg-lime-700 cf "> - <div class="max-w-screen-md mx-auto pl-2 text-white"> - <a href="{{ site.BaseURL | relLangURL }}" class="block float-left"> +<nav class="bg-lime-700"> + <div class="max-w-screen-md mx-auto text-white flex justify-between"> + <a href="{{ site.BaseURL | relLangURL }}" class=""> {{ with resources.Get .Site.Params.logo }} <img height="{{ site.Params.logo_height }}" @@ -9,42 +9,41 @@ alt="{{ site.Title }}" /> {{ end }} - - <span class="pl-2 text-4xl leading-normal berkshire-swash"> {{ .Site.Title }} </span> </a> <input class="menu-btn hidden" type="checkbox" id="menu-btn" /> - <label class="float-right md:hidden m-2 p-4 menu-icon" for="menu-btn"> + <label class="menu-icon m-2 p-4 md:hidden" for="menu-btn"> <span class="navicon bg-white"></span> </label> - <ul class="m-0 p-0 overflow-hidden font-sans leading-none"> + <div + class="menu bg-lime-700 md:w-fit md:flex-row md:max-h-none md:static top-12" + > {{ range .Site.Menus.main }} - <li class="md:float-left hover:bg-lime-500"> - <a class="block p-4" href="{{ .PageRef | relLangURL }}"> - {{ .Pre }} - {{- T .Name | title -}} - </a> - </li> + <a class="hover:bg-lime-500 p-4" href="{{ .PageRef | relLangURL }}"> + {{ .Pre }} + {{- T .Name | title -}} + </a> {{ end }} + </div> - {{ if .IsTranslated }} - <select - name="lang" - class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 " - onchange="self.location=options[selectedIndex].value" - > + {{ if .IsTranslated }} + <select + name="lang" + class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 " + onchange="self.location=options[selectedIndex].value" + > + <option value="{{ .Permalink }}"> + {{ .Language.Lang }} + </option> + {{ range .Translations }} <option value="{{ .Permalink }}"> {{ .Language.Lang }} </option> - {{ range .Translations }} - <option value="{{ .Permalink }}"> - {{ .Language.Lang }} - </option> - {{ end }} - </select> - {{ end }} - </ul> + {{ end }} + </select> + {{ end }} + </div> </nav> |