vac.dev-experimental-old/_includes/header.html

145 lines
3.3 KiB
HTML

<header>
<div class="container max-w-screen-xl sm:border-b">
<div
class="
nav-section
flex
justify-between
items-center
py-3
md:py-5
lg:py-10
"
>
<div class="logo md:pr-8 l:p-0">
<a href="/"
><img src="{{ '/assets/img/logo.png' | relative_url }}"
/></a>
</div>
<div class="flex justify-between items-center w-9/12">
<div class="burger block sm:hidden z-50">
<button
class="
burger__button burger__button--open
fixed
top-2
right-5
w-12
h-12
"
type="button"
aria-label="Mobile menu button"
>
<img
class="burger__icon"
src="{{ '/assets/img/burger.svg' | relative_url }}"
alt="Open menu button"
/>
</button>
<button
class="
burger__button burger__button--close
hidden
fixed
top-2
right-5
w-12
h-12
"
type="button"
aria-label="Close mobile menu button"
>
<img
class="burger__icon burger__icon--close"
src="{{ '/assets/img/close.svg' | relative_url }}"
alt="Close menu button"
/>
</button>
</div>
<nav class="nav max-w-screen-xm md:max-w-screen-sl container">
<ul
class="
nav__list
hidden
sm:flex
justify-between
container
text-xs
font-semibold
md:pr-8
l:p-0
"
>
{% for nav in site.data.navigation %} {% include nav-item.html %} {%
endfor %}
</ul>
</nav>
<ul class="social items-center hidden md:flex">
{% include social.html %}
</ul>
</div>
<div
class="
overlay
container
max-w-screen-sm
w-full
hidden
sm:hidden
fixed
top-0
right-0
h-screen
bg-black bg-opacity-40
z-30
"
>
<nav
class="
nav-mobile
hidden
fixed
top-0
right-0
flex flex-col
justify-between
items-center
pt-14
px-12
pb-5
bg-white
w-9/12
h-3/4
z-40
"
>
<ul
class="
nav__list
flex flex-col flex-1
justify-between
items-center
container
box-content
w-32
h-auto
max-h-nav
text-xs
font-normal
"
>
{% for nav in site.data.navigation %} {% include nav-item.html %} {%
endfor %}
</ul>
<ul class="social items-center flex mt-8">
{% include social.html %}
</ul>
</nav>
</div>
</div>
</div>
</header>