valknar
54a87dc4ed
Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*, masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with Tailwind v4 utility classes inline in HTML. Create card.html partial to avoid repeating verbose utility strings across grid templates. Rename lightbox CSS to flat lb-* and search popup to sp-*. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
73 lines
4.4 KiB
HTML
73 lines
4.4 KiB
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>
|