valknar
c766bba028
Mark five posts (Gothic, Cyberpunk, Dark Fantasy, Urban, Sci-Fi) as featured: true. Homepage grid now filters by that flag instead of showing first 8. CTA button changed from plain black to brand russet. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
83 lines
3.8 KiB
HTML
83 lines
3.8 KiB
HTML
{{ define "main" }}
|
|
{{- $issueNum := .Site.Params.issueNumber }}
|
|
{{- $issuePage := $.Site.GetPage (printf "/issues/%s" $issueNum) }}
|
|
{{- $plates := cond (ne $issuePage nil) $issuePage.Pages .Site.RegularPages }}
|
|
{{- $total := len $plates }}
|
|
{{- $featured := where .Site.RegularPages ".Params.featured" true }}
|
|
|
|
{{/* ── Hero ── */}}
|
|
<section id="hero"
|
|
class="grid max-[820px]:block
|
|
[grid-template-columns:1fr_1px_auto]
|
|
border-b border-[var(--rule)]">
|
|
|
|
{{/* Left: brand statement */}}
|
|
<div class="px-[var(--pad)] pt-[clamp(40px,6vw,80px)] pb-[clamp(32px,4vw,60px)]">
|
|
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-6">
|
|
№ {{ $issueNum }} · {{ .Site.Params.issueSeason }}
|
|
</div>
|
|
<h1 class="font-display font-normal text-[clamp(42px,6vw,88px)] leading-[0.94] m-0 mb-5">
|
|
{{- if $issuePage }}{{ $issuePage.Title }}{{ else }}{{ .Site.Params.issueName }}{{ end }}
|
|
</h1>
|
|
<p class="font-serif italic text-[clamp(14px,1.1vw,17px)] leading-[1.65] text-ink-2 max-w-[44ch] m-0 mb-8">
|
|
{{- if $issuePage }}{{ $issuePage.Params.description }}{{ else }}{{ .Site.Params.issueBlurb }}{{ end }}
|
|
</p>
|
|
<div class="flex items-center gap-4 flex-wrap">
|
|
<a href="/issues/{{ $issueNum }}/"
|
|
class="inline-flex items-center gap-2 px-6 py-3
|
|
bg-roux text-paper
|
|
font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase
|
|
transition-colors duration-200 hover:bg-roux-deep">
|
|
Enter the issue
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
<a href="/issues/"
|
|
class="font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink-soft
|
|
border-b border-[var(--rule)] pb-px transition-colors duration-200 hover:text-ink hover:border-ink">
|
|
All issues
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{/* Divider */}}
|
|
<div class="bg-[var(--rule)] max-[820px]:hidden"></div>
|
|
|
|
{{/* Right: issue identity */}}
|
|
<div class="flex flex-col items-center justify-center gap-3
|
|
px-[clamp(24px,4vw,60px)] py-[clamp(32px,4vw,60px)]
|
|
border-l-0 max-[820px]:border-t max-[820px]:border-[var(--rule)]
|
|
text-center">
|
|
{{- partial "logo.html" . }}
|
|
<div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mt-2">
|
|
{{- if $issuePage }}{{ $issuePage.Params.season }}{{ else }}{{ .Site.Params.issueSeason }}{{ end }}
|
|
</div>
|
|
<div class="font-mono text-[11px] tracking-[.14em] text-ink-soft tabular-nums">
|
|
{{ $total }} plates
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{/* ── Plate preview ── */}}
|
|
<section id="grid"
|
|
class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] pt-[var(--gap)] pb-0">
|
|
{{- range $i, $p := $featured }}
|
|
{{- partial "card.html" (dict "Page" $p "Index" $i) }}
|
|
{{- end }}
|
|
</section>
|
|
|
|
{{/* ── CTA strip ── */}}
|
|
<div class="flex items-center justify-between gap-6 flex-wrap
|
|
px-[var(--pad)] py-[clamp(24px,3vw,40px)]
|
|
border-t border-[var(--rule)] mt-[var(--gap)]">
|
|
<p class="font-serif italic text-[clamp(15px,1.2vw,18px)] text-ink-2 m-0">
|
|
One hundred plates — <em>fabric, light, and the human form in motion.</em>
|
|
</p>
|
|
<a href="/issues/{{ $issueNum }}/"
|
|
class="shrink-0 inline-flex items-center gap-2
|
|
font-sans font-medium text-[11px] leading-none tracking-[.16em] uppercase text-ink
|
|
border-b border-[var(--rule)] pb-px transition-colors duration-200 hover:border-ink">
|
|
View all {{ $total }} plates →
|
|
</a>
|
|
</div>
|
|
{{ end }}
|