<header class="flex justify-between py-6 font-semibold sm:py-10 text-neutral-800 dark:text-neutral">
  <div>
    <a
      class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
      rel="me"
      href="{{ .Site.BaseURL }}"
      >{{ .Site.Title }}</a
    >
  </div>
  <nav>
    <ul class="flex flex-col list-none sm:flex-row">
      {{ range .Site.Menus.main }}
        <li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
          <a
            class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small"
            href="{{ .URL | absURL }}"
            title="{{ .Title }}"
            >{{ .Name }}</a
          >
        </li>
      {{ end }}
    </ul>
  </nav>
</header>