valknarandClaude Sonnet 4.6
8513c1c021
Tabs now reflect only categories that actually have posts, so stale entries like Noir can't appear. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
76 lines
4.3 KiB
HTML
76 lines
4.3 KiB
HTML
{{- $cats := slice }}
|
|
{{- range $.Site.Taxonomies.categories }}
|
|
{{- $cats = $cats | append .Page.Title }}
|
|
{{- end }}
|
|
<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>
|