Refactor: replace all BEM CSS with Tailwind utility classes
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:
@@ -0,0 +1,41 @@
|
||||
{{- $p := .Page }}
|
||||
{{- $i := .Index }}
|
||||
{{- $img := $p.Resources.GetMatch "*.png" }}
|
||||
<a class="card block cursor-pointer"
|
||||
href="{{ $p.RelPermalink }}"
|
||||
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
|
||||
data-id="{{ $p.Params.plate }}"
|
||||
data-slug="{{ $p.Params.slug }}">
|
||||
<div class="relative aspect-[2/3] overflow-hidden bg-paper-2 rounded-[1px]
|
||||
after:content-[''] after:absolute after:inset-0
|
||||
after:shadow-[inset_0_0_0_1px_rgba(22,17,13,.04)] after:pointer-events-none">
|
||||
{{- if $img }}
|
||||
{{- $w := $img.Resize "600x900 webp" }}
|
||||
<picture>
|
||||
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
|
||||
<img class="card-img w-full h-full object-cover
|
||||
transition-[transform,filter] [transition-duration:.9s,.6s]
|
||||
[transition-timing-function:cubic-bezier(.2,.7,.1,1),ease]
|
||||
[filter:saturate(.92)_contrast(1.02)]"
|
||||
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
|
||||
src="{{ $w.RelPermalink }}"
|
||||
alt="{{ $p.Title }}" />
|
||||
</picture>
|
||||
{{- end }}
|
||||
<span class="absolute top-[10px] left-[10px]
|
||||
font-sans font-medium text-[10px] leading-none tracking-[.18em]
|
||||
text-paper mix-blend-difference tabular-nums">PLATE №{{ $p.Params.plate }}</span>
|
||||
<span class="absolute top-[10px] right-[10px]
|
||||
font-sans font-medium text-[10px] leading-none tracking-[.18em]
|
||||
uppercase text-paper mix-blend-difference">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
|
||||
<span class="absolute bottom-[10px] left-[10px]
|
||||
font-sans font-medium text-[10px] leading-none tracking-[.18em]
|
||||
text-paper mix-blend-difference tabular-nums">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
|
||||
</div>
|
||||
<div class="mt-[14px] grid gap-1">
|
||||
<h2 class="font-display font-normal text-[clamp(20px,1.6vw,26px)] leading-[1.1] tracking-normal m-0">{{ $p.Title }}</h2>
|
||||
<p class="font-sans text-[12px] leading-[1.4] tracking-[.04em] text-ink-soft">{{ index ($p.Params.categories | default (slice "")) 0 }}</p>
|
||||
<p class="font-serif text-[13px] leading-[1.5] text-ink-2 italic mt-0.5
|
||||
overflow-hidden [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]">{{ $p.Params.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
@@ -1,28 +1,36 @@
|
||||
<footer class="foot">
|
||||
<footer class="border-t border-[var(--rule)] px-[var(--pad)] pt-9 pb-14
|
||||
grid gap-10 font-sans text-[12px] leading-[1.5] text-ink-soft
|
||||
[grid-template-columns:2fr_1fr_1fr_1fr]
|
||||
max-[820px]:[grid-template-columns:1fr_1fr]">
|
||||
<div>
|
||||
<h4>Roux</h4>
|
||||
<h2 class="foot__roux">R<em>o</em>ux<sup style="font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);vertical-align:top;margin-left:8px;">№{{ .Site.Params.issueNumber }}</sup></h2>
|
||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Roux</h4>
|
||||
<h2 class="font-display font-normal text-[clamp(60px,8vw,110px)] leading-[0.92] text-ink m-0 mb-[14px]">
|
||||
R<em class="font-serif italic text-roux font-light">o</em>ux<sup class="font-mono text-[11px] tracking-[.14em] text-ink-soft align-top ml-2">№{{ .Site.Params.issueNumber }}</sup>
|
||||
</h2>
|
||||
<p>A slow-publishing fashion journal, gathered in Paris. One hundred photographs at a time, printed and unprinted.<br/>roux.pivoine.art</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Categories</h4>
|
||||
<p><a href="/categories/gothic/">Gothic</a></p>
|
||||
<p><a href="/categories/cyberpunk/">Cyberpunk</a></p>
|
||||
<p><a href="/categories/dark-fantasy/">Dark Fantasy</a></p>
|
||||
<p><a href="/categories/sci-fi/">Sci-Fi</a></p>
|
||||
<p><a href="/categories/cultural/">Cultural</a></p>
|
||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Categories</h4>
|
||||
<p><a class="hover:text-ink" href="/categories/gothic/">Gothic</a></p>
|
||||
<p><a class="hover:text-ink" href="/categories/cyberpunk/">Cyberpunk</a></p>
|
||||
<p><a class="hover:text-ink" href="/categories/dark-fantasy/">Dark Fantasy</a></p>
|
||||
<p><a class="hover:text-ink" href="/categories/sci-fi/">Sci-Fi</a></p>
|
||||
<p><a class="hover:text-ink" href="/categories/cultural/">Cultural</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Index</h4>
|
||||
<p><a href="/tags/cape/">Cape</a></p>
|
||||
<p><a href="/tags/neon/">Neon</a></p>
|
||||
<p><a href="/tags/rain/">Rain</a></p>
|
||||
<p><a href="/tags/gothic/">Gothic</a></p>
|
||||
<p><a href="/tags/warrior/">Warrior</a></p>
|
||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Index</h4>
|
||||
<p><a class="hover:text-ink" href="/tags/cape/">Cape</a></p>
|
||||
<p><a class="hover:text-ink" href="/tags/neon/">Neon</a></p>
|
||||
<p><a class="hover:text-ink" href="/tags/rain/">Rain</a></p>
|
||||
<p><a class="hover:text-ink" href="/tags/gothic/">Gothic</a></p>
|
||||
<p><a class="hover:text-ink" href="/tags/warrior/">Warrior</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Colophon</h4>
|
||||
<h4 class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink m-0 mb-[14px]">Colophon</h4>
|
||||
<p>Set in Italiana & Cormorant Garamond, with Outfit for typographic furniture. © Roux MMXXVI.</p>
|
||||
<p style="margin-top:14px;color:var(--ink)">Press <span style="border:1px solid var(--rule);padding:3px 6px;border-radius:3px;font-family:var(--mono);font-size:10px">⌘K</span> from anywhere to search.</p>
|
||||
<p class="mt-[14px] text-ink">Press
|
||||
<span class="border border-[var(--rule)] px-[6px] py-[3px] rounded-[3px] font-mono text-[10px]">⌘K</span>
|
||||
from anywhere to search.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="lb" id="lb" data-open="false" role="dialog" aria-modal="true" aria-label="Roux plate viewer">
|
||||
<div class="lb__topbar">
|
||||
<div class="lb__brand">
|
||||
<div class="lb-topbar">
|
||||
<div class="lb-brand">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true" style="height:24px;width:24px;flex:0 0 auto">
|
||||
<defs><radialGradient id="lbBloom" cx="50%" cy="46%" r="58%"><stop offset="0" stop-color="#b34a30"/><stop offset=".6" stop-color="#8a3322"/><stop offset="1" stop-color="#5a1d15"/></radialGradient></defs>
|
||||
<g fill="#6e2519" transform="translate(32 32)"><ellipse cx="0" cy="-16" rx="10.5" ry="14"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(60)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(120)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(180)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(240)"/><ellipse cx="0" cy="-16" rx="10.5" ry="14" transform="rotate(300)"/></g>
|
||||
@@ -12,20 +12,20 @@
|
||||
<span style="font:400 22px/1 'Italiana',serif;letter-spacing:.04em;color:#f5f0e6">Roux</span>
|
||||
<span style="opacity:.55">№ {{ .Site.Params.issueNumber }} · The Plates</span>
|
||||
</div>
|
||||
<div class="lb__index" id="lbIndex">000 / 100</div>
|
||||
<button class="lb__close" data-act="close" aria-label="Close">
|
||||
<div class="lb-index" id="lbIndex">000 / 100</div>
|
||||
<button class="lb-close" data-act="close" aria-label="Close">
|
||||
<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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="lb__stage">
|
||||
<button class="lb__nav lb__nav--prev" data-act="prev" aria-label="Previous">
|
||||
<div class="lb-stage">
|
||||
<button class="lb-nav lb-nav-prev" data-act="prev" aria-label="Previous">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
|
||||
</button>
|
||||
<div class="lb__track" id="lbTrack"></div>
|
||||
<button class="lb__nav lb__nav--next" data-act="next" aria-label="Next">
|
||||
<div class="lb-track" id="lbTrack"></div>
|
||||
<button class="lb-nav lb-nav-next" data-act="next" aria-label="Next">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<aside class="lb__meta" id="lbMeta"></aside>
|
||||
<div class="lb__thumbs" id="lbThumbs"></div>
|
||||
<aside class="lb-meta" id="lbMeta"></aside>
|
||||
<div class="lb-thumbs" id="lbThumbs"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<span class="logo">
|
||||
<svg class="logo__mark" viewBox="0 0 64 64" aria-hidden="true">
|
||||
<span class="grid justify-items-center gap-1 text-center">
|
||||
<svg class="block w-[30px] h-[30px] max-[620px]:w-[22px] max-[620px]:h-[22px]" viewBox="0 0 64 64" aria-hidden="true">
|
||||
<defs>
|
||||
<radialGradient id="mhBloom" cx="50%" cy="46%" r="58%">
|
||||
<stop offset="0" stop-color="#b34a30"/>
|
||||
@@ -33,6 +33,6 @@
|
||||
<circle cx="32" cy="32" r="3.2" fill="#3a120c"/>
|
||||
<circle cx="32" cy="31.4" r="1.2" fill="#c0573c" opacity=".7"/>
|
||||
</svg>
|
||||
<span class="logo__word">Roux</span>
|
||||
<span class="logo__tag">Le Journal · Paris</span>
|
||||
<span class="font-display font-normal text-[30px] leading-none tracking-[.045em] text-ink max-[620px]:text-[22px]">Roux</span>
|
||||
<span class="font-sans font-medium text-[8.5px] leading-none tracking-[.32em] uppercase text-ink-soft max-[620px]:text-[7.5px] max-[620px]:tracking-[.28em]">Le Journal · Paris</span>
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user