valknar/roux
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: replace all BEM CSS with Tailwind utility classes

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2026-05-18 18:06:55 +02:00
parent e3e9cf6742
commit 54a87dc4ed
15 changed files with 590 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/partials/header.html
+56 -22
View File
@@ -1,38 +1,72 @@
{{- $cats := slice "Gothic" "Cyberpunk" "Dark Fantasy" "Urban" "Noir" "Fantasy" "Cultural" "Sci-Fi" "Boudoir" "Steampunk" "Luxury" "Action" "Lifestyle" "Nature" "Romantic" "Nightlife" "Elegant" "Adventure" "Mythology" }}
<header class="masthead" id="masthead">
<div class="masthead__inner">
<div class="masthead__left">
<span class="masthead__date" id="mhDate">—</span>
<span class="mh-issue">№ {{ .Site.Params.issueNumber }}</span>
<span class="mh-sep" style="opacity:.5">·</span>
<span class="mh-pub">Roux Quarterly</span>
<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>
<a class="masthead__logo" href="/" aria-label="Roux — home">
{{/* logo (center) */}}
<a class="block leading-none text-ink justify-self-center" href="/" aria-label="Roux — home">
{{- partial "logo.html" . }}
</a>
<div class="masthead__right">
<a href="/issues/" class="mh-link">Issues</a>
<span class="mh-sep" style="opacity:.5">·</span>
<span class="mh-city">Paris</span>
{{/* 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>
<div class="subhead" style="position:relative">
<label class="subhead__search" for="searchInput">
<svg 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…" />
<span class="subhead__kbd">⌘ K</span>
{{/* ── 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 class="subhead__count" id="count"></div>
<div class="searchpop" id="searchpop"></div>
<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>
<div class="tabs" id="tabs">
<button data-cat="All" aria-pressed="true">All</button>
{{/* ── 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">{{ . }}</button>
<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>