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
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",