valknar
54a87dc4ed
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>
42 lines
2.3 KiB
HTML
42 lines
2.3 KiB
HTML
{{- $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>
|