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/_default/list.html
+18 -43
View File
@@ -1,60 +1,35 @@
{{ define "main" }}
{{/* Category / tag taxonomy list pages */}}
<section class="hero" id="hero">
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
{{- if eq .Kind "taxonomy" }}
<div class="hero__eyebrow">{{ .Type | humanize }}</div>
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
<p class="hero__lede">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">{{ .Type | humanize }}</div>
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
{{ len .Pages }} {{ if eq (len .Pages) 1 }}plate{{ else }}plates{{ end }} in this section.
<a href="/" style="border-bottom:1px solid currentColor">Return to archive →</a>
<a href="/" class="border-b border-current">Return to archive →</a>
</p>
{{- else if eq .Kind "term" }}
<div class="hero__eyebrow">{{ .Type | humanize | singularize }}</div>
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
<p class="hero__lede">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">{{ .Type | humanize | singularize }}</div>
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
{{ len .Pages }} {{ if eq (len .Pages) 1 }}plate{{ else }}plates{{ end }} tagged <em>{{ .Title }}</em>.
<a href="/" style="border-bottom:1px solid currentColor">Return to archive →</a>
<a href="/" class="border-b border-current">Return to archive →</a>
</p>
{{- else }}
<div class="hero__eyebrow">The Archive</div>
<h1 class="hero__title">All <em>plates</em></h1>
<p class="hero__lede"><a href="/" style="border-bottom:1px solid currentColor">Return to home →</a></p>
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">The Archive</div>
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4">All <em>plates</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
<a href="/" class="border-b border-current">Return to home →</a>
</p>
{{- end }}
</section>
<section class="grid" id="grid" data-density="default"
<section id="grid" data-density="default"
data-filter-type="{{ .Kind }}"
data-filter-value="{{ .Title }}">
data-filter-value="{{ .Title }}"
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
{{- range $i, $p := .Pages }}
{{- $img := $p.Resources.GetMatch "*.png" }}
<a class="card"
href="{{ $p.RelPermalink }}"
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
data-id="{{ $p.Params.plate }}"
data-slug="{{ $p.Params.slug }}">
<div class="card__frame">
{{- if $img }}
{{- $w := $img.Resize "600x900 webp" }}
<picture>
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
<img class="card__img"
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
src="{{ $w.RelPermalink }}"
alt="{{ $p.Title }}" />
</picture>
{{- end }}
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
<span class="card__issue">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
</div>
<div class="card__meta">
<h2 class="card__title">{{ $p.Title }}</h2>
<div class="card__sub">
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
</div>
<p class="card__desc">{{ $p.Params.description }}</p>
</div>
</a>
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
{{- end }}
</section>
{{ end }}
layouts/_default/single.html
+8 -35
View File
@@ -1,50 +1,23 @@
{{ define "main" }}
{{- $issue := index (.Params.issues | default (slice "01")) 0 }}
{{- $issueURL := printf "/issues/%s/" $issue }}
<section class="hero" id="hero">
<div class="hero__eyebrow">
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
№ {{ $issue }} · {{ index (.Params.categories | default (slice "Plate")) 0 }}
</div>
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
<p class="hero__lede">
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
{{ .Params.description }}
<a href="{{ $issueURL }}" style="border-bottom:1px solid currentColor">Return to issue →</a>
<a href="{{ $issueURL }}" class="border-b border-current ml-1">Return to issue →</a>
</p>
</section>
<section class="grid" id="grid" data-density="default">
<section id="grid" data-density="default"
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
{{- $termPage := $.Site.GetPage (printf "/issues/%s" $issue) }}
{{- $posts := cond (ne $termPage nil) $termPage.Pages .Site.RegularPages }}
{{- range $i, $p := $posts }}
{{- $img := $p.Resources.GetMatch "*.png" }}
<a class="card"
href="{{ $p.RelPermalink }}"
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
data-id="{{ $p.Params.plate }}"
data-slug="{{ $p.Params.slug }}">
<div class="card__frame">
{{- if $img }}
{{- $w := $img.Resize "600x900 webp" }}
<picture>
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
<img class="card__img"
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
src="{{ $w.RelPermalink }}"
alt="{{ $p.Title }}" />
</picture>
{{- end }}
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
<span class="card__issue">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
</div>
<div class="card__meta">
<h2 class="card__title">{{ $p.Title }}</h2>
<div class="card__sub">
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
</div>
<p class="card__desc">{{ $p.Params.description }}</p>
</div>
</a>
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
{{- end }}
</section>
layouts/baseof.html
+12 -4
View File
@@ -14,10 +14,18 @@
{{- partial "lightbox.html" . }}
<div class="ribbon" id="ribbon">
<span>Roux № {{ .Site.Params.issueNumber }} — out now. <a href="/issues/01/">See the plates →</a></span>
<button id="ribbonClose" aria-label="Dismiss">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
<div id="ribbon"
class="ribbon fixed bottom-0 inset-x-0 z-[100]
flex items-center justify-between gap-4
px-[var(--pad)] py-3
bg-ink text-paper
font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase
transition-transform duration-300">
<span>Roux № {{ .Site.Params.issueNumber }} — out now. <a href="/issues/01/" class="border-b border-current ml-1">See the plates →</a></span>
<button id="ribbonClose" aria-label="Dismiss"
class="w-6 h-6 shrink-0 grid place-items-center border border-current/30 rounded-full
opacity-60 hover:opacity-100 transition-opacity duration-200">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
layouts/index.html
+10 -41
View File
@@ -1,55 +1,24 @@
{{ define "main" }}
<section class="hero" id="hero">
<div class="hero__eyebrow">
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
№ {{ .Site.Params.issueNumber }} · {{ .Site.Params.issueSeason }} ·
<a href="/issues/" style="border-bottom:1px solid currentColor;margin-left:6px">View all issues</a>
<a href="/issues/" class="border-b border-current ml-1">View all issues</a>
</div>
<h1 class="hero__title">An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.</h1>
<p class="hero__lede">
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4">
An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.
</h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
Roux is a slow-publishing fashion journal — one hundred photographs at a time,
gathered from <em>ateliers, streets, glasshouses and quiet hotel corridors</em>.
You are reading <em>{{ .Site.Params.issueName }}</em>, our № {{ .Site.Params.issueNumber }} issue.
</p>
</section>
<section class="grid" id="grid" data-density="default">
<section id="grid" data-density="default"
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
{{- $posts := where .Site.RegularPages "Section" "posts" }}
{{- range $i, $p := $posts }}
{{- $img := $p.Resources.GetMatch "*.png" }}
{{- $card := "" }}
{{- $full := "" }}
{{- if $img }}
{{- $c := $img.Resize "600x900 webp" }}
{{- $card = $c.RelPermalink }}
{{- end }}
<a class="card"
href="{{ $p.RelPermalink }}"
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
data-id="{{ $p.Params.plate }}"
data-slug="{{ $p.Params.slug }}">
<div class="card__frame">
<picture>
{{- if $img }}
{{- $w := $img.Resize "600x900 webp" }}
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
<img class="card__img"
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
src="{{ $w.RelPermalink }}"
alt="{{ $p.Title }} — Roux Plate №{{ $p.Params.plate }}" />
{{- end }}
</picture>
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
<span class="card__issue">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
</div>
<div class="card__meta">
<h2 class="card__title">{{ $p.Title }}</h2>
<div class="card__sub">
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
</div>
<p class="card__desc">{{ $p.Params.description }}</p>
</div>
</a>
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
{{- end }}
</section>
{{ end }}
layouts/issues/list.html
+8 -35
View File
@@ -1,45 +1,18 @@
{{ define "main" }}
{{- $issueNum := .Params.issueNumber | default (printf "№ %s" .Title) }}
<section class="hero" id="hero">
<div class="hero__eyebrow">
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
{{ $issueNum }} · {{ .Params.season }}
· <a href="/issues/" style="border-bottom:1px solid currentColor;margin-left:6px">All issues</a>
· <a href="/issues/" class="border-b border-current ml-1">All issues</a>
</div>
<h1 class="hero__title"><em>{{ .Title }}</em></h1>
<p class="hero__lede">{{ .Params.description }}</p>
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4"><em>{{ .Title }}</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">{{ .Params.description }}</p>
</section>
<section class="grid" id="grid" data-density="default">
<section id="grid" data-density="default"
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
{{- range $i, $p := .Pages }}
{{- $img := $p.Resources.GetMatch "*.png" }}
<a class="card"
href="{{ $p.RelPermalink }}"
style="--d:{{ mul (math.Min $i 18) 24 }}ms"
data-id="{{ $p.Params.plate }}"
data-slug="{{ $p.Params.slug }}">
<div class="card__frame">
{{- if $img }}
{{- $w := $img.Resize "600x900 webp" }}
<picture>
<source srcset="{{ $w.RelPermalink }}" type="image/webp" />
<img class="card__img"
loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
src="{{ $w.RelPermalink }}"
alt="{{ $p.Title }}" />
</picture>
{{- end }}
<span class="card__num">PLATE №{{ $p.Params.plate }}</span>
<span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
<span class="card__issue">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
</div>
<div class="card__meta">
<h2 class="card__title">{{ $p.Title }}</h2>
<div class="card__sub">
<span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
</div>
<p class="card__desc">{{ $p.Params.description }}</p>
</div>
</a>
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
{{- end }}
</section>
{{ end }}
layouts/issues/terms.html
+33 -25
View File
@@ -1,32 +1,40 @@
{{ define "main" }}
{{- $issues := .Site.Data.issues }}
<section class="hero" id="hero">
<div class="hero__eyebrow">Archive · Every issue</div>
<h1 class="hero__title">The <em>issues</em></h1>
<p class="hero__lede">Roux publishes one hundred photographs at a time, once a season. Each issue is a complete thing.</p>
<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">Archive · Every issue</div>
<h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4">The <em>issues</em></h1>
<p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
Roux publishes one hundred photographs at a time, once a season. Each issue is a complete thing.
</p>
</section>
<div class="issues-grid">
<div class="grid [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
{{- range $i, $iss := $issues }}
{{- $delay := mul $i 80 }}
{{- $delay := mul $i 80 }}
{{- $isCurrent := eq $iss.status "current" }}
{{- $isForth := eq $iss.status "forthcoming" }}
{{- $issueURL := printf "/issues/%s/" $iss.id }}
{{- if $isForth }}
<div class="issue-card issue-card--forthcoming" style="--d:{{ $delay }}ms">
<div data-issue-card style="--d:{{ $delay }}ms"
class="flex flex-col opacity-60">
{{- else }}
<a href="{{ $issueURL }}" class="issue-card" style="--d:{{ $delay }}ms">
<a href="{{ $issueURL }}" data-issue-card style="--d:{{ $delay }}ms"
class="group flex flex-col">
{{- end }}
<div class="issue-card__cover">
{{/* Cover image */}}
<div class="relative aspect-[2/3] overflow-hidden bg-paper-2 rounded-[1px] mb-5
after:content-[''] after:absolute after:inset-0
after:shadow-[inset_0_0_0_1px_rgba(22,17,13,.04)] after:pointer-events-none">
{{- if $isForth }}
<div class="issue-card__forth">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div class="absolute inset-0 flex flex-col items-center justify-center gap-3
font-sans font-medium text-[10px] leading-none tracking-[.18em] uppercase text-ink-soft">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
Forthcoming
</div>
{{- else }}
{{- $termPage := $.Site.GetPage (printf "/issues/%s" $iss.id) }}
{{- $termPage := $.Site.GetPage (printf "/issues/%s" $iss.id) }}
{{- $firstPost := cond (ne $termPage nil) (index $termPage.Pages 0) nil }}
{{- if $firstPost }}
{{- $img := $firstPost.Resources.GetMatch "*.png" }}
@@ -34,25 +42,25 @@
{{- $cover := $img.Resize "480x720 webp" }}
<picture>
<source srcset="{{ $cover.RelPermalink }}" type="image/webp" />
<img src="{{ $cover.RelPermalink }}" alt="Issue {{ $iss.number }} cover" loading="lazy" />
<img src="{{ $cover.RelPermalink }}" alt="Issue {{ $iss.number }} cover" loading="lazy"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]" />
</picture>
{{- end }}
{{- end }}
{{- end }}
</div>
<div class="issue-card__meta">
<div class="issue-card__num">{{ $iss.number }}</div>
<h2 class="issue-card__title">{{ $iss.title }}</h2>
<p class="issue-card__blurb">{{ $iss.blurb }}</p>
<div class="issue-card__foot">
<span>{{ $iss.season }}</span>
{{- if $isCurrent }}
<span class="issue-card__cta">Read the issue →</span>
{{- else if $isForth }}
<span class="issue-card__cta issue-card__cta--muted">Subscribe →</span>
{{- end }}
</div>
{{/* Metadata */}}
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-roux mb-2">{{ $iss.number }}</div>
<h2 class="font-display font-normal text-[clamp(22px,2vw,30px)] leading-[1.05] m-0 mb-2">{{ $iss.title }}</h2>
<p class="font-serif italic text-[13px] leading-[1.5] text-ink-soft mb-4 flex-1">{{ $iss.blurb }}</p>
<div class="flex items-center justify-between font-sans text-[11px] leading-none tracking-[.1em] text-ink-soft mt-auto pt-4 border-t border-[var(--rule-2)]">
<span>{{ $iss.season }}</span>
{{- if $isCurrent }}
<span class="text-ink">Read the issue →</span>
{{- else if $isForth }}
<span class="opacity-50">Subscribe →</span>
{{- end }}
</div>
{{- if $isForth }}</div>{{- else }}</a>{{- end }}
layouts/partials/card.html
+41
View File
@@ -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>
layouts/partials/footer.html
+25 -17
View File
@@ -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 &amp; 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>
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>
layouts/partials/lightbox.html
+10 -10
View File
@@ -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>
layouts/partials/logo.html
+4 -4
View File
@@ -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>