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

211 lines
5.4 KiB
HTML
Raw Normal View History

2021-07-29 17:02:18 +00:00
<header>
<div class="container max-w-screen-xl 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="{{site.url}}{{ site.baseurl }}"
><img src="{{ '/assets/img/logo.png' | relative_url }}"
/></a>
</div>
2017-11-09 02:34:49 +00:00
2021-07-29 17:02:18 +00:00
<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>
2021-07-28 16:42:59 +00:00
2021-07-29 17:02:18 +00:00
<nav class="nav container">
<ul
class="
nav__list
hidden
sm:flex
justify-between
container
text-xs
font-semibold
md:pr-8
l:p-0
"
>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#work"
>Work</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
>About</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#join"
>Join VAC</a
>
</li>
<li class="hover:opacity-50">
<a
class="nav__link"
href="{{site.url}}{{ site.baseurl }}/research-log/"
>Research log</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
>Media</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="https://specs.vac.dev" target="_blank"
>Specs</a
>
</li>
<li class="hover:opacity-50">
<a class="nav__link" href="https://forum.vac.dev/" target="_blank"
>Forum</a
>
</li>
</ul>
</nav>
2021-07-28 16:42:59 +00:00
2021-07-29 17:02:18 +00:00
<ul class="social items-center hidden md:flex">
{% include social.html %}
</ul>
2021-07-28 16:42:59 +00:00
2021-07-29 17:02:18 +00:00
<div
class="
overlay
container
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
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
"
>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
>Work</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
>About</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#who"
>Join VAC</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a
class="nav__link"
href="{{site.url}}{{ site.baseurl }}/research-log/"
>Research log</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
>Media</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="https://specs.vac.dev" target="_blank"
>Specs</a
>
</li>
<li class="leading-loose hover:opacity-50">
<a class="nav__link" href="https://forum.vac.dev/" target="_blank"
>Forum</a
>
</li>
</ul>
<ul class="social items-center flex mt-8">
{% include social.html %}
</ul>
</nav>
</div>
</div>
</div>
</header>