Refactor: replace all BEM CSS with Tailwind utility classes
Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*, masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with Tailwind v4 utility classes inline in HTML. Create card.html partial to avoid repeating verbose utility strings across grid templates. Rename lightbox CSS to flat lb-* and search popup to sp-*. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+18
-43
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user