vac.dev-experimental-old/_includes/header.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="{{site.url}}{{ site.baseurl }}"
          ><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
            "
          >
            <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-internal"
                href="{{site.url}}{{ site.baseurl }}/research-log"
                >Research log</a
              >
            </li>
            <li class="hover:opacity-50">
              <a
                class="nav__link-internal"
                href="{{site.url}}{{ site.baseurl }}/media"
                >Media</a
              >
            </li>
            <li class="hover:opacity-50">
              <a
                class="nav__link-external"
                href="https://specs.vac.dev"
                target="_blank"
                >Specs</a
              >
            </li>
            <li class="hover:opacity-50">
              <a
                class="nav__link-external"
                href="https://forum.vac.dev/"
                target="_blank"
                >Forum</a
              >
            </li>
          </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
            "
          >
            <li class="leading-loose hover:opacity-50">
              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#work"
                >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 }}/#join"
                >Join VAC</a
              >
            </li>
            <li class="leading-loose hover:opacity-50">
              <a
                class="nav__link-internal"
                href="{{site.url}}{{ site.baseurl }}/research-log/"
                >Research log</a
              >
            </li>
            <li class="leading-loose hover:opacity-50">
              <a
                class="nav__link-internal"
                href="{{site.url}}{{ site.baseurl }}/media"
                >Media</a
              >
            </li>
            <li class="leading-loose hover:opacity-50">
              <a
                class="nav__link-external"
                href="https://specs.vac.dev"
                target="_blank"
                >Specs</a
              >
            </li>
            <li class="leading-loose hover:opacity-50">
              <a
                class="nav__link-external"
                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>