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
assets/css/main.css
+82 -234
View File
@@ -62,197 +62,63 @@ a { color: inherit; text-decoration: none; }
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: .06;
mix-blend-mode: multiply;
pointer-events: none; z-index: 1; opacity: .06; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ── masthead ── */
.masthead {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px) saturate(1.05);
background: color-mix(in oklab, var(--paper) 86%, transparent);
border-bottom: 1px solid var(--rule);
}
.masthead__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(12px, 2vw, 24px);
padding: 14px var(--pad);
}
.masthead__left, .masthead__right {
display: flex; align-items: center; gap: 18px;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-soft);
min-width: 0;
}
.masthead__left > *, .masthead__right > * { white-space: nowrap; }
.mh-link { position: relative; padding-bottom: 2px; transition: color .2s; }
.mh-link::after {
/* ── nav link animated underline ── */
.nav-link { position: relative; padding-bottom: 2px; transition: color .2s; }
.nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor; transform: scaleX(.5); transform-origin: left;
height: 1px; background: currentColor;
transform: scaleX(.5); transform-origin: left;
transition: transform .25s, background .2s;
}
.mh-link:hover { color: var(--ink); }
.mh-link:hover::after { transform: scaleX(1); background: var(--roux); }
.masthead__right { justify-content: flex-end; }
.masthead__date { font-variant-numeric: tabular-nums; }
.masthead__logo { display: block; line-height: 1; color: var(--ink); justify-self: center; }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); background: var(--roux); }
.logo { display: grid; grid-template-columns: auto; justify-items: center; gap: 4px; text-align: center; }
.logo__mark { width: 30px; height: 30px; display: block; }
.logo__word { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .045em; color: var(--ink); }
.logo__tag { font: 500 8.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
/* ── card animation (uses --d CSS custom property for stagger) ── */
@keyframes rouxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { animation: rouxIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.card:hover .card-img { transform: scale(1.025); }
@media (max-width: 620px) {
.logo__mark { width: 22px; height: 22px; }
.logo__word { font-size: 22px; }
.logo__tag { font-size: 7.5px; letter-spacing: .28em; }
/* ── issue card animation ── */
[data-issue-card] {
opacity: 0; transform: translateY(8px);
animation: rouxIn .65s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: var(--d, 0ms);
}
@media (max-width: 1100px) { .masthead__left .mh-issue, .masthead__right .mh-city { display: none; } }
@media (max-width: 820px) { .masthead__left .mh-pub, .masthead__left .mh-sep, .masthead__right .mh-sep { display: none; } }
@media (max-width: 620px) { .masthead__inner { padding: 12px var(--pad); } .masthead__left { font-size: 10px; gap: 10px; } .masthead__right { font-size: 10px; gap: 10px; } }
@media (max-width: 460px) { .masthead__inner { grid-template-columns: 1fr; } .masthead__left, .masthead__right { display: none; } .masthead__logo { justify-self: center; } }
@supports (animation-timeline: view()) { [data-issue-card] { opacity: 1; transform: none; animation: none; } }
/* subhead: search bar */
.subhead {
display: flex; align-items: stretch;
border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule);
background: color-mix(in oklab, var(--paper) 95%, transparent);
position: relative;
}
.subhead__search {
flex: 1; display: flex; align-items: center; gap: 12px;
padding: 10px var(--pad); border-right: 1px solid var(--rule-2); min-width: 0;
}
.subhead__search input {
flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
font: 400 16px/1 var(--serif); font-style: italic; color: var(--ink); letter-spacing: .005em; padding: 6px 0;
}
.subhead__search input::placeholder { color: var(--ink-soft); opacity: .9; }
.subhead__kbd { flex: 0 0 auto; font: 500 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--rule); padding: 5px 7px; border-radius: 3px; color: var(--ink-soft); }
.subhead__count { display: flex; align-items: center; padding: 0 var(--pad); font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.subhead__count b { color: var(--ink); font-weight: 600; margin-right: 4px; }
@media (max-width: 720px) { .subhead__count { display: none; } .subhead__kbd { display: none; } .subhead__search input { font-size: 15px; } }
/* tabs */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--pad); border-bottom: 1px solid var(--rule-2); background: var(--paper); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.tabs button:hover { color: var(--ink); }
/* ── tabs: JS drives aria-pressed, CSS drives the active look ── */
.tabs button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
/* ── hero strip ── */
.hero {
padding: clamp(40px, 8vw, 96px) var(--pad) clamp(28px, 5vw, 64px);
display: grid; grid-template-columns: 1fr; gap: 18px;
border-bottom: 1px solid var(--rule);
}
.hero__eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.hero__eyebrow::before { content: ""; height: 1px; width: 36px; background: var(--ink-soft); }
.hero__title { margin: 0; font: 400 clamp(48px, 9vw, 132px)/0.92 var(--display); letter-spacing: -0.01em; }
.hero__title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--roux); }
.hero__lede { max-width: 56ch; font: 400 clamp(16px, 1.4vw, 19px)/1.5 var(--serif); color: var(--ink-2); margin-top: 6px; }
.hero__lede em { color: var(--roux); font-style: italic; }
/* ── photo grid ── */
.grid {
padding: clamp(20px, 3vw, 40px) var(--pad) 80px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gap);
row-gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
.grid[data-density="cozy"] { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 88px; }
.grid[data-density="compact"] { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 56px; }
@media (max-width: 1200px) { .grid[data-density="cozy"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid[data-density="compact"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .grid[data-density="cozy"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid[data-density="compact"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid[data-density="cozy"] { grid-template-columns: 1fr; } .grid[data-density="compact"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* card */
.card { display: block; cursor: pointer; }
.card__frame { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--paper-2); border-radius: 1px; }
.card__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(22,17,13,.04); pointer-events: none; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.1,1), filter .6s; filter: saturate(.92) contrast(1.02); }
.card:hover .card__img { transform: scale(1.025); }
.card__num { position: absolute; top: 10px; left: 10px; font: 500 10px/1 var(--sans); letter-spacing: .18em; color: var(--paper); mix-blend-mode: difference; font-variant-numeric: tabular-nums; }
.card__cat { position: absolute; top: 10px; right: 10px; font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); mix-blend-mode: difference; }
.card__issue { position: absolute; bottom: 10px; left: 10px; font: 500 10px/1 var(--sans); letter-spacing: .18em; color: var(--paper); mix-blend-mode: difference; font-variant-numeric: tabular-nums; }
.card__meta { margin-top: 14px; display: grid; gap: 4px; }
.card__title { font: 400 clamp(20px, 1.6vw, 26px)/1.1 var(--display); letter-spacing: 0; margin: 0; }
.card__title em { font-family: var(--serif); font-style: italic; color: var(--roux); }
.card__sub { font: 400 12px/1.4 var(--sans); letter-spacing: .04em; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.card__sub .dot { width: 3px; height: 3px; background: var(--ink-soft); border-radius: 50%; opacity: .5; }
.card__desc { font: 400 13px/1.5 var(--serif); color: var(--ink-2); font-style: italic; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* highlight matches */
/* ── search highlight ── */
mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color: inherit; padding: 0 1px; border-radius: 1px; }
/* ── issues archive ── */
.issues-grid {
padding: clamp(20px, 3vw, 40px) var(--pad) 80px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(24px, 3vw, 48px); row-gap: clamp(36px, 5vw, 64px);
/* ── search popup (position + display driven by JS) ── */
.searchpop {
position: absolute; top: calc(100% - 1px); left: 0; right: 0;
background: var(--paper); border: 1px solid var(--rule); border-top: 0;
max-height: min(70vh, 620px); overflow: auto; display: none; z-index: 60;
box-shadow: 0 24px 60px -30px rgba(22,17,13,.35);
}
@media (max-width: 820px) { .issues-grid { grid-template-columns: 1fr; } }
.issue-card {
display: grid; grid-template-columns: 240px 1fr;
gap: clamp(20px, 2.4vw, 36px); align-items: start;
color: inherit;
padding-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--rule-2);
}
@media (max-width: 560px) { .issue-card { grid-template-columns: 160px 1fr; } }
.issue-card--forthcoming { color: var(--ink-soft); cursor: default; }
.issue-card__cover { aspect-ratio: 2/3; overflow: hidden; background: var(--paper-2); position: relative; }
.issue-card__cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(22,17,13,.04); }
.issue-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.1,1); }
.issue-card:not(.issue-card--forthcoming):hover .issue-card__cover img { transform: scale(1.025); }
.issue-card__forth { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--ink-soft); font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; border: 1px dashed var(--rule); margin: 12px; }
.issue-card__forth svg { opacity: .5; }
.issue-card__meta { padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.issue-card__num { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.issue-card__title { margin: 0; font: 400 clamp(28px, 3vw, 44px)/1.0 var(--display); letter-spacing: -0.005em; }
.issue-card__title em { font-family: var(--serif); font-style: italic; color: var(--roux); font-weight: 300; }
.issue-card--forthcoming .issue-card__title { color: var(--ink-soft); }
.issue-card__blurb { font: 400 14.5px/1.55 var(--serif); font-style: italic; color: var(--ink-2); margin: 0; max-width: 52ch; }
.issue-card__foot { margin-top: 4px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); width: 100%; }
.issue-card__foot > span:first-child { flex: 1; min-width: 0; }
.issue-card__cta { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; letter-spacing: .14em; }
.issue-card__cta--muted { color: var(--ink-soft); border-bottom-color: var(--rule); }
/* ── empty state ── */
.empty { grid-column: 1/-1; padding: 80px 0; text-align: center; color: var(--ink-soft); }
.empty h3 { font: 400 28px/1.2 var(--display); color: var(--ink); margin: 0 0 8px; }
.empty button { margin-top: 16px; border: 1px solid var(--ink); padding: 9px 18px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.empty button:hover { background: var(--ink); color: var(--paper); }
/* ── search popup ── */
.searchpop { position: absolute; top: calc(100% - 1px); left: 0; right: 0; background: var(--paper); border: 1px solid var(--rule); border-top: 0; max-height: min(70vh, 620px); overflow: auto; display: none; z-index: 60; box-shadow: 0 24px 60px -30px rgba(22,17,13,.35); }
.searchpop[data-open="true"] { display: block; }
.searchpop__section { padding: 12px var(--pad); border-bottom: 1px solid var(--rule-2); }
.searchpop__section:last-child { border-bottom: 0; }
.searchpop__label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.searchpop__label small { font-family: var(--mono); letter-spacing: 0; font-size: 10px; }
.searchpop__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.searchpop__chip { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.searchpop__chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.searchpop__chip b { color: var(--roux); font-weight: 600; }
.searchpop__hits { display: grid; gap: 2px; }
.searchpop__hit { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 8px 6px; border-radius: 3px; text-align: left; width: 100%; }
.searchpop__hit:hover { background: var(--paper-2); }
.searchpop__hit img { width: 44px; height: 66px; object-fit: cover; background: var(--paper-2); }
.searchpop__hit .t { font: 400 18px/1.1 var(--display); }
.searchpop__hit .s { font: 400 12px/1.3 var(--sans); color: var(--ink-soft); margin-top: 3px; }
.searchpop__hit .n { font: 500 10px/1 var(--mono); color: var(--ink-soft); letter-spacing: .1em; }
.sp-section { padding: 12px var(--pad); border-bottom: 1px solid var(--rule-2); }
.sp-section:last-child { border-bottom: 0; }
.sp-label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.sp-label small { font-family: var(--mono); letter-spacing: 0; font-size: 10px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.sp-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-chip b { color: var(--roux); font-weight: 600; }
.sp-hits { display: grid; gap: 2px; }
.sp-hit { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 8px 6px; border-radius: 3px; text-align: left; width: 100%; }
.sp-hit:hover { background: var(--paper-2); }
.sp-hit img { width: 44px; height: 66px; object-fit: cover; background: var(--paper-2); }
.sp-hit .t { font: 400 18px/1.1 var(--display); }
.sp-hit .s { font: 400 12px/1.3 var(--sans); color: var(--ink-soft); margin-top: 3px; }
.sp-hit .n { font: 500 10px/1 var(--mono); color: var(--ink-soft); letter-spacing: .1em; }
/* ── lightbox ── */
.lb {
@@ -267,68 +133,50 @@ mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color:
@media (max-width: 920px) {
.lb { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "topbar" "stage" "meta" "thumbs"; }
}
.lb__topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(236,231,221,.08); }
.lb__brand { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #c8c0b1; }
.lb__brand svg { height: 18px; }
.lb__index { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #c8c0b1; font-variant-numeric: tabular-nums; }
.lb__index b { color: #ece7dd; }
.lb__close { width: 36px; height: 36px; border: 1px solid rgba(236,231,221,.18); border-radius: 50%; display: grid; place-items: center; color: #ece7dd; }
.lb__close:hover { background: rgba(236,231,221,.08); }
.lb__stage { grid-area: stage; position: relative; overflow: hidden; display: grid; place-items: center; padding: 24px; min-height: 0; }
.lb__track { position: absolute; inset: 0; display: flex; transition: transform .55s cubic-bezier(.4,.0,.2,1); will-change: transform; }
.lb__slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
.lb__frame { position: relative; aspect-ratio: 2/3; height: 100%; max-width: 100%; background: #1a1411; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(236,231,221,.04); }
.lb__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(236,231,221,.06); border: 1px solid rgba(236,231,221,.16); backdrop-filter: blur(8px); display: grid; place-items: center; color: #ece7dd; z-index: 5; transition: background .2s; }
.lb__nav:hover { background: rgba(236,231,221,.14); }
.lb__nav--prev { left: 18px; }
.lb__nav--next { right: 18px; }
.lb__meta { grid-area: meta; padding: 28px 28px 22px; border-left: 1px solid rgba(236,231,221,.08); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
@media (max-width: 920px) { .lb__meta { border-left: 0; border-top: 1px solid rgba(236,231,221,.08); padding: 18px 22px; max-height: 38vh; } }
.lb__cat { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--roux); }
.lb__cat::after { content: ""; display: block; height: 1px; width: 30px; background: var(--roux); margin-top: 8px; }
.lb__title { margin: 0; font: 400 clamp(32px, 3vw, 44px)/1 var(--display); letter-spacing: -0.005em; color: #f5f0e6; }
.lb__title em { font-family: var(--serif); font-style: italic; color: #d99e8e; font-weight: 300; }
.lb__desc { font: 400 16px/1.55 var(--serif); font-style: italic; color: #c8c0b1; }
.lb__factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; border-top: 1px solid rgba(236,231,221,.08); border-bottom: 1px solid rgba(236,231,221,.08); padding: 16px 0; }
.lb__fact dt { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9b9384; margin-bottom: 5px; }
.lb__fact dd { margin: 0; font: 400 14px/1.3 var(--serif); color: #ece7dd; }
.lb__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lb__tag { padding: 5px 10px; border: 1px solid rgba(236,231,221,.18); border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: lowercase; color: #ece7dd; }
.lb__tag:hover { background: rgba(236,231,221,.08); }
.lb__share { margin-top: auto; display: flex; gap: 8px; }
.lb__sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid rgba(236,231,221,.2); font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ece7dd; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lb__sh--primary { flex: 1; min-width: 0; }
.lb__sh:not(.lb__sh--primary) { width: 44px; padding: 11px 0; flex: 0 0 auto; }
.lb__sh:hover { background: #ece7dd; color: #0c0907; border-color: #ece7dd; }
.lb__sh.is-ok { background: rgba(236,231,221,.08); color: #ece7dd; border-color: rgba(236,231,221,.32); }
.lb__thumbs { grid-area: thumbs; display: flex; gap: 6px; padding: 12px 22px 16px; overflow-x: auto; border-top: 1px solid rgba(236,231,221,.08); scrollbar-width: thin; scrollbar-color: rgba(236,231,221,.16) transparent; }
.lb__thumb { flex: 0 0 auto; width: 42px; aspect-ratio: 2/3; background: #1a1411; border: 1px solid transparent; opacity: .45; transition: opacity .2s, border-color .2s; position: relative; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb[aria-current="true"] { opacity: 1; border-color: var(--roux); }
.lb__thumb[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--roux); }
/* ── footer ── */
.foot { border-top: 1px solid var(--rule); padding: 36px var(--pad) 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; font: 400 12px/1.5 var(--sans); color: var(--ink-soft); }
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot h4 { font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.foot a:hover { color: var(--ink); }
.foot__roux { font: 400 clamp(60px, 8vw, 110px)/0.92 var(--display); color: var(--ink); margin: 0 0 14px; }
.foot__roux em { font-family: var(--serif); font-style: italic; color: var(--roux); font-weight: 300; }
.lb-topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(236,231,221,.08); }
.lb-brand { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #c8c0b1; }
.lb-brand svg { height: 18px; }
.lb-index { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #c8c0b1; font-variant-numeric: tabular-nums; }
.lb-index b { color: #ece7dd; }
.lb-close { width: 36px; height: 36px; border: 1px solid rgba(236,231,221,.18); border-radius: 50%; display: grid; place-items: center; color: #ece7dd; }
.lb-close:hover { background: rgba(236,231,221,.08); }
.lb-stage { grid-area: stage; position: relative; overflow: hidden; display: grid; place-items: center; padding: 24px; min-height: 0; }
.lb-track { position: absolute; inset: 0; display: flex; transition: transform .55s cubic-bezier(.4,.0,.2,1); will-change: transform; }
.lb-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
.lb-frame { position: relative; aspect-ratio: 2/3; height: 100%; max-width: 100%; background: #1a1411; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(236,231,221,.04); }
.lb-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(236,231,221,.06); border: 1px solid rgba(236,231,221,.16); backdrop-filter: blur(8px); display: grid; place-items: center; color: #ece7dd; z-index: 5; transition: background .2s; }
.lb-nav:hover { background: rgba(236,231,221,.14); }
.lb-nav-prev { left: 18px; }
.lb-nav-next { right: 18px; }
.lb-meta { grid-area: meta; padding: 28px 28px 22px; border-left: 1px solid rgba(236,231,221,.08); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
@media (max-width: 920px) { .lb-meta { border-left: 0; border-top: 1px solid rgba(236,231,221,.08); padding: 18px 22px; max-height: 38vh; } }
.lb-cat { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--roux); }
.lb-cat::after { content: ""; display: block; height: 1px; width: 30px; background: var(--roux); margin-top: 8px; }
.lb-title { margin: 0; font: 400 clamp(32px,3vw,44px)/1 var(--display); letter-spacing: -0.005em; color: #f5f0e6; }
.lb-title em { font-family: var(--serif); font-style: italic; color: #d99e8e; font-weight: 300; }
.lb-desc { font: 400 16px/1.55 var(--serif); font-style: italic; color: #c8c0b1; }
.lb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; border-top: 1px solid rgba(236,231,221,.08); border-bottom: 1px solid rgba(236,231,221,.08); padding: 16px 0; }
.lb-fact dt { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9b9384; margin-bottom: 5px; }
.lb-fact dd { margin: 0; font: 400 14px/1.3 var(--serif); color: #ece7dd; }
.lb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-tag { padding: 5px 10px; border: 1px solid rgba(236,231,221,.18); border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: lowercase; color: #ece7dd; }
.lb-tag:hover { background: rgba(236,231,221,.08); }
.lb-share { margin-top: auto; display: flex; gap: 8px; }
.lb-sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid rgba(236,231,221,.2); font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ece7dd; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lb-sh-primary { flex: 1; min-width: 0; }
.lb-sh:not(.lb-sh-primary) { width: 44px; padding: 11px 0; flex: 0 0 auto; }
.lb-sh:hover { background: #ece7dd; color: #0c0907; border-color: #ece7dd; }
.lb-sh.is-ok { background: rgba(236,231,221,.08); color: #ece7dd; border-color: rgba(236,231,221,.32); }
.lb-thumbs { grid-area: thumbs; display: flex; gap: 6px; padding: 12px 22px 16px; overflow-x: auto; border-top: 1px solid rgba(236,231,221,.08); scrollbar-width: thin; scrollbar-color: rgba(236,231,221,.16) transparent; }
.lb-thumb { flex: 0 0 auto; width: 42px; aspect-ratio: 2/3; background: #1a1411; border: 1px solid transparent; opacity: .45; transition: opacity .2s, border-color .2s; position: relative; }
.lb-thumb:hover { opacity: .8; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb[aria-current="true"] { opacity: 1; border-color: var(--roux); }
.lb-thumb[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--roux); }
/* ── ribbon ── */
.ribbon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ink); color: var(--paper); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; transform: translateY(0); transition: transform .4s; }
.ribbon.hidden { transform: translateY(100%); }
.ribbon a { color: var(--roux); font-weight: 600; }
.ribbon button { color: var(--paper); opacity: .7; }
.ribbon button:hover { opacity: 1; }
/* ── animations ── */
@keyframes rouxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { animation: rouxIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.issue-card { opacity: 0; transform: translateY(8px); animation: rouxIn .65s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0ms); }
@supports (animation-timeline: view()) { .issue-card { opacity: 1; transform: none; animation: none; } }
/* ── view transitions ── */
::view-transition-old(root) { animation: 150ms ease-out roux-fade-out; }
assets/js/app.js
+35 -37
View File
@@ -129,16 +129,16 @@
const cats = allCats();
const tags = allTags();
searchPop.innerHTML = `
<div class="searchpop__section">
<div class="searchpop__label">Categories <small>${cats.length}</small></div>
<div class="searchpop__chips">
${cats.map(c => `<button class="searchpop__chip" data-jump="/categories/${encodeURIComponent(c.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> ${esc(c)}</button>`).join('')}
<div class="sp-section">
<div class="sp-label">Categories <small>${cats.length}</small></div>
<div class="sp-chips">
${cats.map(c => `<button class="sp-chip" data-jump="/categories/${encodeURIComponent(c.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> ${esc(c)}</button>`).join('')}
</div>
</div>
<div class="searchpop__section">
<div class="searchpop__label">Popular tags <small>${tags.length}</small></div>
<div class="searchpop__chips">
${tags.map(t => `<button class="searchpop__chip" data-jump="/tags/${encodeURIComponent(t.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> # ${esc(t)}</button>`).join('')}
<div class="sp-section">
<div class="sp-label">Popular tags <small>${tags.length}</small></div>
<div class="sp-chips">
${tags.map(t => `<button class="sp-chip" data-jump="/tags/${encodeURIComponent(t.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> # ${esc(t)}</button>`).join('')}
</div>
</div>`;
searchPop.dataset.open = 'true';
@@ -147,17 +147,17 @@
const hits = INDEX(q) || [];
const terms = q.toLowerCase().split(/\s+/).filter(t => t.length > 1);
if (!hits.length) {
searchPop.innerHTML = `<div class="searchpop__section"><p style="color:var(--ink-soft);font-size:13px;font-style:italic">No plates match — try <em>gothic</em>, <em>warrior</em>, or <em>neon</em>.</p></div>`;
searchPop.innerHTML = `<div class="sp-section"><p style="color:var(--ink-soft);font-size:13px;font-style:italic">No plates match — try <em>gothic</em>, <em>warrior</em>, or <em>neon</em>.</p></div>`;
searchPop.dataset.open = 'true';
return;
}
const shown = hits.slice(0, 6);
searchPop.innerHTML = `
<div class="searchpop__section">
<div class="searchpop__label">Plates <small>${hits.length}</small></div>
<div class="searchpop__hits">
<div class="sp-section">
<div class="sp-label">Plates <small>${hits.length}</small></div>
<div class="sp-hits">
${shown.map(p => `
<button class="searchpop__hit" data-jump="${esc(p.url)}">
<button class="sp-hit" data-jump="${esc(p.url)}">
${p.thumb ? `<img src="${esc(p.thumb)}" alt="" loading="lazy" />` : '<div style="width:44px;height:66px;background:var(--paper-2)"></div>'}
<div>
<div class="t">${highlight(p.title, terms)}</div>
@@ -241,14 +241,13 @@
if (!lbTrack) return;
lbTrack.innerHTML = lbList.map((p, i) => {
const imgSrc = p.card || p.thumb || '';
return `<div class="lb__slide" data-i="${i}">
<div class="lb__frame">
<img class="lb__img" src="${esc(imgSrc)}" alt="${esc(p.title)}" loading="lazy" />
return `<div class="lb-slide" data-i="${i}">
<div class="lb-frame">
<img class="lb-img" src="${esc(imgSrc)}" alt="${esc(p.title)}" loading="lazy" />
</div>
</div>`;
}).join('');
lbBuilt = true;
// Preload neighbors
preloadNeighbors(lbIdx);
}
@@ -271,7 +270,7 @@
[-1, 0, 1, 2].forEach(d => {
const ni = idx + d;
if (ni < 0 || ni >= lbList.length) return;
const slide = lbTrack.querySelector(`.lb__slide[data-i="${ni}"]`);
const slide = lbTrack.querySelector(`.lb-slide[data-i="${ni}"]`);
if (!slide) return;
const img = slide.querySelector('img');
if (img && !img.src) img.src = lbList[ni].card || lbList[ni].thumb || '';
@@ -283,22 +282,22 @@
const cats = (p.categories || []).join(', ');
const tags = (p.tags || []).slice(0, 8);
lbMeta.innerHTML = `
<div class="lb__cat">${esc(cats)}</div>
<h2 class="lb__title">${esc(p.title)}</h2>
<p class="lb__desc">${esc(p.description)}</p>
<dl class="lb__factgrid">
<div class="lb__fact"><dt>Plate</dt><dd>№ ${esc(p.id)}</dd></div>
<div class="lb__fact"><dt>Issue</dt><dd><a href="/issues/${esc(p.issue || '01')}/" style="color:inherit;border-bottom:1px solid currentColor">№ ${esc(p.issue || '01')}</a></dd></div>
<div class="lb__fact"><dt>Category</dt><dd>${esc((p.categories||['—'])[0])}</dd></div>
<div class="lb-cat">${esc(cats)}</div>
<h2 class="lb-title">${esc(p.title)}</h2>
<p class="lb-desc">${esc(p.description)}</p>
<dl class="lb-facts">
<div class="lb-fact"><dt>Plate</dt><dd>№ ${esc(p.id)}</dd></div>
<div class="lb-fact"><dt>Issue</dt><dd><a href="/issues/${esc(p.issue || '01')}/" style="color:inherit;border-bottom:1px solid currentColor">№ ${esc(p.issue || '01')}</a></dd></div>
<div class="lb-fact"><dt>Category</dt><dd>${esc((p.categories||['—'])[0])}</dd></div>
</dl>
<div class="lb__tags">${tags.map(t => {
<div class="lb-tags">${tags.map(t => {
const slug = t.toLowerCase().replace(/[\s,]+/g, '-').replace(/[^a-z0-9-]/g, '');
return `<a class="lb__tag" href="/tags/${slug}/"># ${esc(t)}</a>`;
return `<a class="lb-tag" href="/tags/${slug}/"># ${esc(t)}</a>`;
}).join('')}</div>
<div class="lb__share">
<button class="lb__sh lb__sh--primary" id="lbCopy" data-url="${esc(p.url)}">
<div class="lb-share">
<button class="lb-sh lb-sh-primary" id="lbCopy" data-url="${esc(p.url)}">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 1 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 1 0 7.07 7.07l1-1"/></svg>
<span class="lb__sh-l">Copy link</span>
<span class="lb-sh-l">Copy link</span>
</button>
</div>`;
@@ -306,8 +305,8 @@
const url = new URL(this.dataset.url, location.origin).href;
navigator.clipboard.writeText(url).then(() => {
this.classList.add('is-ok');
this.querySelector('.lb__sh-l').textContent = 'Copied!';
setTimeout(() => { this.classList.remove('is-ok'); this.querySelector('.lb__sh-l').textContent = 'Copy link'; }, 2000);
this.querySelector('.lb-sh-l').textContent = 'Copied!';
setTimeout(() => { this.classList.remove('is-ok'); this.querySelector('.lb-sh-l').textContent = 'Copy link'; }, 2000);
});
});
}
@@ -315,22 +314,22 @@
function lbBuildThumbs() {
if (!lbThumbs) return;
lbThumbs.innerHTML = lbList.map((p, i) =>
`<button class="lb__thumb" data-i="${i}" aria-current="${i === lbIdx}" aria-label="${esc(p.title)}">
`<button class="lb-thumb" data-i="${i}" aria-current="${i === lbIdx}" aria-label="${esc(p.title)}">
<img src="${esc(p.thumb || p.card || '')}" alt="" loading="lazy" />
</button>`
).join('');
lbThumbs.addEventListener('click', e => {
const btn = e.target.closest('.lb__thumb');
const btn = e.target.closest('.lb-thumb');
if (btn) goToSlide(parseInt(btn.dataset.i));
});
}
function syncThumbs() {
if (!lbThumbs) return;
lbThumbs.querySelectorAll('.lb__thumb').forEach((b, i) => {
lbThumbs.querySelectorAll('.lb-thumb').forEach((b, i) => {
b.setAttribute('aria-current', i === lbIdx ? 'true' : 'false');
});
const active = lbThumbs.querySelector('.lb__thumb[aria-current="true"]');
const active = lbThumbs.querySelector('.lb-thumb[aria-current="true"]');
if (active) active.scrollIntoView({ inline: 'center', behavior: 'smooth' });
}
@@ -432,7 +431,6 @@
syncTabs();
// If new page has a slug to open
const script = doc.querySelector('script[data-open-slug]');
const openSlug = window.__ROUX_OPEN_SLUG = doc.querySelector('[data-open-slug]')?.dataset.openSlug || null;
if (openSlug) {
const opened = POSTS.find(p => p.slug === openSlug);
hugo_stats.json
+211 -58
View File
@@ -40,69 +40,222 @@
"title"
],
"classes": [
"[&::-webkit-scrollbar]:hidden",
"[&_b]:font-semibold",
"[&_b]:mr-1",
"[&_b]:text-ink",
"[-webkit-box-orient:vertical]",
"[-webkit-line-clamp:2]",
"[background:color-mix(in_oklab,var(--paper)_86%,transparent)]",
"[background:color-mix(in_oklab,var(--paper)_95%,transparent)]",
"[display:-webkit-box]",
"[filter:saturate(.92)_contrast(1.02)]",
"[grid-template-columns:1fr_auto_1fr]",
"[grid-template-columns:2fr_1fr_1fr_1fr]",
"[grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]",
"[grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]",
"[scrollbar-width:none]",
"[transition-duration:.9s,.6s]",
"[transition-timing-function:cubic-bezier(.2,.7,.1,1),ease]",
"absolute",
"after:absolute",
"after:content-['']",
"after:inset-0",
"after:pointer-events-none",
"after:shadow-[inset_0_0_0_1px_rgba(22,17,13,.04)]",
"align-top",
"aspect-[2/3]",
"backdrop-blur-[14px]",
"bg-[var(--paper)]",
"bg-ink",
"bg-paper-2",
"bg-transparent",
"block",
"border",
"border-0",
"border-[var(--rule)]",
"border-[var(--rule-2)]",
"border-b",
"border-current",
"border-current/30",
"border-r",
"border-t",
"border-transparent",
"bottom-0",
"bottom-[10px]",
"card",
"card__cat",
"card__desc",
"card__frame",
"card__img",
"card__meta",
"card__num",
"card__sub",
"card__title",
"dot",
"foot",
"foot__roux",
"card-img",
"cursor-pointer",
"cursor-text",
"duration-200",
"duration-300",
"duration-700",
"fixed",
"flex",
"flex-1",
"flex-col",
"font-display",
"font-light",
"font-medium",
"font-mono",
"font-normal",
"font-sans",
"font-serif",
"gap-1",
"gap-10",
"gap-3",
"gap-4",
"gap-[18px]",
"gap-[clamp(12px,2vw,24px)]",
"gap-[var(--gap)]",
"grid",
"hero",
"hero__eyebrow",
"hero__lede",
"hero__title",
"issue-card",
"issue-card--forthcoming",
"issue-card__blurb",
"issue-card__cover",
"issue-card__cta",
"issue-card__cta--muted",
"issue-card__foot",
"issue-card__forth",
"issue-card__meta",
"issue-card__num",
"issue-card__title",
"issues-grid",
"group",
"group-hover:scale-[1.02]",
"h-6",
"h-[30px]",
"h-full",
"hover:opacity-100",
"hover:text-ink",
"inset-0",
"inset-x-0",
"italic",
"items-center",
"items-stretch",
"justify-between",
"justify-center",
"justify-end",
"justify-items-center",
"justify-self-center",
"lb",
"lb__brand",
"lb__close",
"lb__index",
"lb__meta",
"lb__nav",
"lb__nav--next",
"lb__nav--prev",
"lb__stage",
"lb__thumbs",
"lb__topbar",
"lb__track",
"logo",
"logo__mark",
"logo__tag",
"logo__word",
"masthead",
"masthead__date",
"masthead__inner",
"masthead__left",
"masthead__logo",
"masthead__right",
"mh-city",
"mh-issue",
"mh-link",
"mh-pub",
"mh-sep",
"lb-brand",
"lb-close",
"lb-index",
"lb-meta",
"lb-nav",
"lb-nav-next",
"lb-nav-prev",
"lb-stage",
"lb-thumbs",
"lb-topbar",
"lb-track",
"leading-[0.92]",
"leading-[0.94]",
"leading-[1.05]",
"leading-[1.1]",
"leading-[1.4]",
"leading-[1.5]",
"leading-[1.65]",
"leading-none",
"left-[10px]",
"m-0",
"max-[1100px]:hidden",
"max-[460px]:[grid-template-columns:1fr]",
"max-[460px]:hidden",
"max-[620px]:gap-[10px]",
"max-[620px]:h-[22px]",
"max-[620px]:py-3",
"max-[620px]:text-[10px]",
"max-[620px]:text-[22px]",
"max-[620px]:text-[7.5px]",
"max-[620px]:tracking-[.28em]",
"max-[620px]:w-[22px]",
"max-[720px]:hidden",
"max-[720px]:text-[15px]",
"max-[820px]:[grid-template-columns:1fr_1fr]",
"max-[820px]:hidden",
"max-w-[55ch]",
"mb-2",
"mb-4",
"mb-5",
"mb-[14px]",
"min-w-0",
"mix-blend-difference",
"ml-1",
"ml-2",
"mt-0.5",
"mt-[14px]",
"mt-auto",
"nav-link",
"object-cover",
"opacity-50",
"opacity-60",
"outline-none",
"overflow-hidden",
"overflow-x-auto",
"pb-14",
"pb-[clamp(28px,3.5vw,48px)]",
"place-items-center",
"placeholder:opacity-90",
"placeholder:text-ink-soft",
"pt-4",
"pt-9",
"pt-[clamp(36px,5vw,64px)]",
"px-[14px]",
"px-[6px]",
"px-[7px]",
"px-[var(--pad)]",
"py-1.5",
"py-2",
"py-3",
"py-[10px]",
"py-[14px]",
"py-[3px]",
"py-[5px]",
"py-[var(--gap)]",
"relative",
"ribbon",
"right-[10px]",
"rounded-[1px]",
"rounded-[3px]",
"rounded-full",
"saturate-[1.05]",
"searchpop",
"subhead",
"subhead__count",
"subhead__kbd",
"subhead__search",
"tabs"
"shrink-0",
"sticky",
"tabs",
"tabular-nums",
"text-[10px]",
"text-[11px]",
"text-[12px]",
"text-[13px]",
"text-[16px]",
"text-[30px]",
"text-[8.5px]",
"text-[clamp(13px,1vw,16px)]",
"text-[clamp(20px,1.6vw,26px)]",
"text-[clamp(22px,2vw,30px)]",
"text-[clamp(48px,7vw,96px)]",
"text-[clamp(60px,8vw,110px)]",
"text-center",
"text-ink",
"text-ink-2",
"text-ink-soft",
"text-paper",
"text-roux",
"top-0",
"top-[10px]",
"tracking-[.005em]",
"tracking-[.045em]",
"tracking-[.04em]",
"tracking-[.12em]",
"tracking-[.14em]",
"tracking-[.16em]",
"tracking-[.18em]",
"tracking-[.1em]",
"tracking-[.22em]",
"tracking-[.32em]",
"tracking-normal",
"transition-[color,border-color,background]",
"transition-[transform,filter]",
"transition-opacity",
"transition-transform",
"uppercase",
"w-6",
"w-[30px]",
"w-full",
"whitespace-nowrap",
"z-50",
"z-[100]"
],
"ids": [
"content",
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
+27 -19
View File
@@ -1,12 +1,14 @@
{{ 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 }}
{{- $isCurrent := eq $iss.status "current" }}
@@ -14,15 +16,21 @@
{{- $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 }}
@@ -34,26 +42,26 @@
{{- $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">
{{/* 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="issue-card__cta">Read the issue →</span>
<span class="text-ink">Read the issue →</span>
{{- else if $isForth }}
<span class="issue-card__cta issue-card__cta--muted">Subscribe →</span>
<span class="opacity-50">Subscribe →</span>
{{- end }}
</div>
</div>
{{- if $isForth }}</div>{{- else }}</a>{{- end }}
{{- 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>
static/js/app.js
+35 -37
View File
@@ -129,16 +129,16 @@
const cats = allCats();
const tags = allTags();
searchPop.innerHTML = `
<div class="searchpop__section">
<div class="searchpop__label">Categories <small>${cats.length}</small></div>
<div class="searchpop__chips">
${cats.map(c => `<button class="searchpop__chip" data-jump="/categories/${encodeURIComponent(c.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> ${esc(c)}</button>`).join('')}
<div class="sp-section">
<div class="sp-label">Categories <small>${cats.length}</small></div>
<div class="sp-chips">
${cats.map(c => `<button class="sp-chip" data-jump="/categories/${encodeURIComponent(c.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> ${esc(c)}</button>`).join('')}
</div>
</div>
<div class="searchpop__section">
<div class="searchpop__label">Popular tags <small>${tags.length}</small></div>
<div class="searchpop__chips">
${tags.map(t => `<button class="searchpop__chip" data-jump="/tags/${encodeURIComponent(t.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> # ${esc(t)}</button>`).join('')}
<div class="sp-section">
<div class="sp-label">Popular tags <small>${tags.length}</small></div>
<div class="sp-chips">
${tags.map(t => `<button class="sp-chip" data-jump="/tags/${encodeURIComponent(t.toLowerCase().replace(/[\s,]+/g,'-').replace(/[^a-z0-9-]/g,''))}/"> # ${esc(t)}</button>`).join('')}
</div>
</div>`;
searchPop.dataset.open = 'true';
@@ -147,17 +147,17 @@
const hits = INDEX(q) || [];
const terms = q.toLowerCase().split(/\s+/).filter(t => t.length > 1);
if (!hits.length) {
searchPop.innerHTML = `<div class="searchpop__section"><p style="color:var(--ink-soft);font-size:13px;font-style:italic">No plates match — try <em>gothic</em>, <em>warrior</em>, or <em>neon</em>.</p></div>`;
searchPop.innerHTML = `<div class="sp-section"><p style="color:var(--ink-soft);font-size:13px;font-style:italic">No plates match — try <em>gothic</em>, <em>warrior</em>, or <em>neon</em>.</p></div>`;
searchPop.dataset.open = 'true';
return;
}
const shown = hits.slice(0, 6);
searchPop.innerHTML = `
<div class="searchpop__section">
<div class="searchpop__label">Plates <small>${hits.length}</small></div>
<div class="searchpop__hits">
<div class="sp-section">
<div class="sp-label">Plates <small>${hits.length}</small></div>
<div class="sp-hits">
${shown.map(p => `
<button class="searchpop__hit" data-jump="${esc(p.url)}">
<button class="sp-hit" data-jump="${esc(p.url)}">
${p.thumb ? `<img src="${esc(p.thumb)}" alt="" loading="lazy" />` : '<div style="width:44px;height:66px;background:var(--paper-2)"></div>'}
<div>
<div class="t">${highlight(p.title, terms)}</div>
@@ -241,14 +241,13 @@
if (!lbTrack) return;
lbTrack.innerHTML = lbList.map((p, i) => {
const imgSrc = p.card || p.thumb || '';
return `<div class="lb__slide" data-i="${i}">
<div class="lb__frame">
<img class="lb__img" src="${esc(imgSrc)}" alt="${esc(p.title)}" loading="lazy" />
return `<div class="lb-slide" data-i="${i}">
<div class="lb-frame">
<img class="lb-img" src="${esc(imgSrc)}" alt="${esc(p.title)}" loading="lazy" />
</div>
</div>`;
}).join('');
lbBuilt = true;
// Preload neighbors
preloadNeighbors(lbIdx);
}
@@ -271,7 +270,7 @@
[-1, 0, 1, 2].forEach(d => {
const ni = idx + d;
if (ni < 0 || ni >= lbList.length) return;
const slide = lbTrack.querySelector(`.lb__slide[data-i="${ni}"]`);
const slide = lbTrack.querySelector(`.lb-slide[data-i="${ni}"]`);
if (!slide) return;
const img = slide.querySelector('img');
if (img && !img.src) img.src = lbList[ni].card || lbList[ni].thumb || '';
@@ -283,22 +282,22 @@
const cats = (p.categories || []).join(', ');
const tags = (p.tags || []).slice(0, 8);
lbMeta.innerHTML = `
<div class="lb__cat">${esc(cats)}</div>
<h2 class="lb__title">${esc(p.title)}</h2>
<p class="lb__desc">${esc(p.description)}</p>
<dl class="lb__factgrid">
<div class="lb__fact"><dt>Plate</dt><dd>№ ${esc(p.id)}</dd></div>
<div class="lb__fact"><dt>Issue</dt><dd><a href="/issues/${esc(p.issue || '01')}/" style="color:inherit;border-bottom:1px solid currentColor">№ ${esc(p.issue || '01')}</a></dd></div>
<div class="lb__fact"><dt>Category</dt><dd>${esc((p.categories||['—'])[0])}</dd></div>
<div class="lb-cat">${esc(cats)}</div>
<h2 class="lb-title">${esc(p.title)}</h2>
<p class="lb-desc">${esc(p.description)}</p>
<dl class="lb-facts">
<div class="lb-fact"><dt>Plate</dt><dd>№ ${esc(p.id)}</dd></div>
<div class="lb-fact"><dt>Issue</dt><dd><a href="/issues/${esc(p.issue || '01')}/" style="color:inherit;border-bottom:1px solid currentColor">№ ${esc(p.issue || '01')}</a></dd></div>
<div class="lb-fact"><dt>Category</dt><dd>${esc((p.categories||['—'])[0])}</dd></div>
</dl>
<div class="lb__tags">${tags.map(t => {
<div class="lb-tags">${tags.map(t => {
const slug = t.toLowerCase().replace(/[\s,]+/g, '-').replace(/[^a-z0-9-]/g, '');
return `<a class="lb__tag" href="/tags/${slug}/"># ${esc(t)}</a>`;
return `<a class="lb-tag" href="/tags/${slug}/"># ${esc(t)}</a>`;
}).join('')}</div>
<div class="lb__share">
<button class="lb__sh lb__sh--primary" id="lbCopy" data-url="${esc(p.url)}">
<div class="lb-share">
<button class="lb-sh lb-sh-primary" id="lbCopy" data-url="${esc(p.url)}">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 1 0-7.07-7.07l-1 1"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 1 0 7.07 7.07l1-1"/></svg>
<span class="lb__sh-l">Copy link</span>
<span class="lb-sh-l">Copy link</span>
</button>
</div>`;
@@ -306,8 +305,8 @@
const url = new URL(this.dataset.url, location.origin).href;
navigator.clipboard.writeText(url).then(() => {
this.classList.add('is-ok');
this.querySelector('.lb__sh-l').textContent = 'Copied!';
setTimeout(() => { this.classList.remove('is-ok'); this.querySelector('.lb__sh-l').textContent = 'Copy link'; }, 2000);
this.querySelector('.lb-sh-l').textContent = 'Copied!';
setTimeout(() => { this.classList.remove('is-ok'); this.querySelector('.lb-sh-l').textContent = 'Copy link'; }, 2000);
});
});
}
@@ -315,22 +314,22 @@
function lbBuildThumbs() {
if (!lbThumbs) return;
lbThumbs.innerHTML = lbList.map((p, i) =>
`<button class="lb__thumb" data-i="${i}" aria-current="${i === lbIdx}" aria-label="${esc(p.title)}">
`<button class="lb-thumb" data-i="${i}" aria-current="${i === lbIdx}" aria-label="${esc(p.title)}">
<img src="${esc(p.thumb || p.card || '')}" alt="" loading="lazy" />
</button>`
).join('');
lbThumbs.addEventListener('click', e => {
const btn = e.target.closest('.lb__thumb');
const btn = e.target.closest('.lb-thumb');
if (btn) goToSlide(parseInt(btn.dataset.i));
});
}
function syncThumbs() {
if (!lbThumbs) return;
lbThumbs.querySelectorAll('.lb__thumb').forEach((b, i) => {
lbThumbs.querySelectorAll('.lb-thumb').forEach((b, i) => {
b.setAttribute('aria-current', i === lbIdx ? 'true' : 'false');
});
const active = lbThumbs.querySelector('.lb__thumb[aria-current="true"]');
const active = lbThumbs.querySelector('.lb-thumb[aria-current="true"]');
if (active) active.scrollIntoView({ inline: 'center', behavior: 'smooth' });
}
@@ -432,7 +431,6 @@
syncTabs();
// If new page has a slug to open
const script = doc.querySelector('script[data-open-slug]');
const openSlug = window.__ROUX_OPEN_SLUG = doc.querySelector('[data-open-slug]')?.dataset.openSlug || null;
if (openSlug) {
const opened = POSTS.find(p => p.slug === openSlug);