roux/layouts/partials/header.html

{{- $cats := slice "Gothic" "Cyberpunk" "Dark Fantasy" "Urban" "Noir" "Fantasy" "Cultural" "Sci-Fi" "Boudoir" "Steampunk" "Luxury" "Action" "Lifestyle" "Nature" "Romantic" "Nightlife" "Elegant" "Adventure" "Mythology" }}
<header id="masthead"
  class="sticky top-0 z-50 border-b border-[var(--rule)]
         backdrop-blur-[14px] saturate-[1.05]
         [background:color-mix(in_oklab,var(--paper)_86%,transparent)]">

  {{/* ── three-column top row ── */}}
  <div class="grid items-center gap-[clamp(12px,2vw,24px)] px-[var(--pad)] py-[14px]
              [grid-template-columns:1fr_auto_1fr]
              max-[620px]:py-3 max-[460px]:[grid-template-columns:1fr]">

    {{/* left meta */}}
    <div class="flex items-center gap-[18px] text-[11px] tracking-[.14em] uppercase text-ink-soft min-w-0
                max-[620px]:gap-[10px] max-[620px]:text-[10px] max-[460px]:hidden">
      <span id="mhDate" class="tabular-nums whitespace-nowrap">—</span>
      <span class="whitespace-nowrap max-[1100px]:hidden">№ {{ .Site.Params.issueNumber }}</span>
      <span class="opacity-50 whitespace-nowrap max-[820px]:hidden">·</span>
      <span class="whitespace-nowrap max-[820px]:hidden">Roux Quarterly</span>
    </div>

    {{/* logo (center) */}}
    <a class="block leading-none text-ink justify-self-center" href="/" aria-label="Roux — home">
      {{- partial "logo.html" . }}
    </a>

    {{/* right nav */}}
    <div class="flex items-center justify-end gap-[18px] text-[11px] tracking-[.14em] uppercase text-ink-soft min-w-0
                max-[620px]:gap-[10px] max-[620px]:text-[10px] max-[460px]:hidden">
      <a href="/issues/" class="nav-link">Issues</a>
      <span class="opacity-50 max-[820px]:hidden">·</span>
      <span class="whitespace-nowrap max-[1100px]:hidden">Paris</span>
    </div>
  </div>

  {{/* ── search bar ── */}}
  <div class="relative flex items-stretch border-t border-[var(--rule-2)] border-b border-[var(--rule)]
              [background:color-mix(in_oklab,var(--paper)_95%,transparent)]">
    <label class="flex-1 flex items-center gap-3 px-[var(--pad)] py-[10px] border-r border-[var(--rule-2)] min-w-0 cursor-text"
           for="searchInput">
      <svg class="shrink-0 text-ink-soft" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      <input id="searchInput" type="search" autocomplete="off"
             placeholder="Search the archive — silk, nocturne, atelier…"
             class="flex-1 min-w-0 border-0 bg-transparent outline-none
                    font-serif font-normal italic text-[16px] leading-none text-ink tracking-[.005em] py-1.5
                    placeholder:text-ink-soft placeholder:opacity-90
                    max-[720px]:text-[15px]" />
      <span class="shrink-0 font-sans font-medium text-[10px] leading-none tracking-[.12em] uppercase
                   border border-[var(--rule)] px-[7px] py-[5px] rounded-[3px] text-ink-soft
                   max-[720px]:hidden">⌘ K</span>
    </label>
    <div id="count"
         class="flex items-center px-[var(--pad)]
                font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase
                text-ink-soft tabular-nums whitespace-nowrap
                max-[720px]:hidden [&_b]:text-ink [&_b]:font-semibold [&_b]:mr-1"></div>
    <div id="searchpop" class="searchpop"></div>
  </div>

  {{/* ── category tabs ── */}}
  <div id="tabs" class="tabs flex gap-1 overflow-x-auto px-[var(--pad)] py-[10px] border-b border-[var(--rule-2)] bg-[var(--paper)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
    <button data-cat="All" aria-pressed="true"
            class="shrink-0 px-[14px] py-2 rounded-full border border-transparent
                   font-sans font-medium text-[11px] leading-none tracking-[.14em] uppercase
                   text-ink-soft transition-[color,border-color,background] duration-200 hover:text-ink">All</button>
    {{- range $cats }}
    <button data-cat="{{ . }}" aria-pressed="false"
            class="shrink-0 px-[14px] py-2 rounded-full border border-transparent
                   font-sans font-medium text-[11px] leading-none tracking-[.14em] uppercase
                   text-ink-soft transition-[color,border-color,background] duration-200 hover:text-ink">{{ . }}</button>
    {{- end }}
  </div>
</header>