a17t/docs/_includes/header.html

Atomic design toolkit. Build beautiful interfaces without reinventing the wheel. Tailwind CSS plugin.

<header class="flex flex-wrap items-center justify-between" style="z-index: 1;">
  <div class="mr-6">
    <h3 class="text-2xl text-urge-600"><a href="/" class="flex items-center">
        <div class="mr-2 icon">
          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32"
            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 32 32">
            <g>
              <g>
                <circle cx="7.377" cy="25.043" r="6.956" />
                <circle cx="24.646" cy="25.043" r="6.956" />
                <circle cx="16" cy="6.956" r="6.956" />
              </g>
            </g>
          </svg>
        </div>
        <div class="text-2xl text-neutral-800 label">a17t</div>
      </a></h3>
  </div>
  <div class="block md:hidden">
    <button class="flex items-center px-3 py-2 text-neutral-700 hover:text-neutral-900"
      onclick="document.querySelector('#navFullContent').classList.toggle('hidden')">
      <svg class="w-3 h-3 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <title>Menu</title>
        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
      </svg>
    </button>
  </div>
  <div
    class="flex-wrap flex-grow hidden block w-full max-w-full px-2 py-4 rounded-lg shadow-lg md:w-auto md:flex md:items-center md:justify-between bg-neutral-000 md:bg-transparent md:shadow-none md:p-0"
    id="navFullContent">
    <ul class="flex flex-wrap items-center">
      <li tabindex="0" class="dropdown outline-none">
        <span class="portal {% if page.tab == 'elements' %}~urge active{% endif %}">Elements</span>
        <div class="w-screen text-sm dropdown-display md:w-auto">
          <div
            class="card mt-1 flex flex-wrap md:flex-nowrap w-4/5 md:w-auto">
            {% include elements_list.html %}
          </div>
        </div>
      </li>
      <li class="portal dropdown outline-none {% if page.tab == 'guide' %}~urge active{% endif %}">
        <a href="/guide/">Guide</a>
      </li>
      <li class="portal"><a href="https://github.com/milesmcc/a17t/">Source</a></li>
      <li class="pt-2 pl-2 portal hidden dark:inline">
        <a class="github-button" href="https://github.com/milesmcc/a17t"
          data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-show-count="true"
          aria-label="Star milesmcc/a17t on GitHub">Star</a>
      </li>
      <li class="pt-2 pl-2 portal dark:hidden">
        <a class="github-button" href="https://github.com/milesmcc/a17t"
          data-color-scheme="no-preference: light; light: light; dark: light;" data-show-count="true"
          aria-label="Star milesmcc/a17t on GitHub">Star</a>
      </li>
    </ul>
    <div class="flex items-center p-2 md:w-5/12 md:text-right md:p-0 portal md:justify-end" style="z-index: 0;">
      <input class="input ~neutral @low bg-neutral-000" type="text" placeholder="Search (/)..." id="search">
    </div>
  </div>
</header>