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

<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>

      <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 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>

      <ul class="social items-center hidden md:flex">
        {% include social.html %}
      </ul>

      <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>