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