62 lines
2.4 KiB
HTML
62 lines
2.4 KiB
HTML
|
{{ define "main" }}
|
||
|
|
{{- $issues := .Site.Data.issues }}
|
||
|
|
<section class="hero" id="hero">
|
||
|
|
<div class="hero__eyebrow">Archive · Every issue</div>
|
||
|
|
<h1 class="hero__title">The <em>issues</em></h1>
|
||
|
|
<p class="hero__lede">Roux publishes one hundred photographs at a time, once a season. Each issue is a complete thing.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="issues-grid">
|
||
|
|
{{- range $i, $iss := $issues }}
|
||
|
|
{{- $delay := mul $i 80 }}
|
||
|
|
{{- $isCurrent := eq $iss.status "current" }}
|
||
|
|
{{- $isForth := eq $iss.status "forthcoming" }}
|
||
|
|
{{- $issueURL := printf "/issues/%s/" $iss.id }}
|
||
|
|
|
||
|
|
{{- if $isForth }}
|
||
|
|
<div class="issue-card issue-card--forthcoming" style="--d:{{ $delay }}ms">
|
||
|
|
{{- else }}
|
||
|
|
<a href="{{ $issueURL }}" class="issue-card" style="--d:{{ $delay }}ms">
|
||
|
|
{{- end }}
|
||
|
|
|
||
|
|
<div class="issue-card__cover">
|
||
|
|
{{- if $isForth }}
|
||
|
|
<div class="issue-card__forth">
|
||
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
|
|
Forthcoming
|
||
|
|
</div>
|
||
|
|
{{- else }}
|
||
|
|
{{- $termPage := $.Site.GetPage (printf "/issues/%s" $iss.id) }}
|
||
|
|
{{- $firstPost := cond (ne $termPage nil) (index $termPage.Pages 0) nil }}
|
||
|
|
{{- if $firstPost }}
|
||
|
|
{{- $img := $firstPost.Resources.GetMatch "*.png" }}
|
||
|
|
{{- if $img }}
|
||
|
|
{{- $cover := $img.Resize "480x720 webp" }}
|
||
|
|
<picture>
|
||
|
|
<source srcset="{{ $cover.RelPermalink }}" type="image/webp" />
|
||
|
|
<img src="{{ $cover.RelPermalink }}" alt="Issue {{ $iss.number }} cover" loading="lazy" />
|
||
|
|
</picture>
|
||
|
|
{{- end }}
|
||
|
|
{{- end }}
|
||
|
|
{{- end }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="issue-card__meta">
|
||
|
|
<div class="issue-card__num">{{ $iss.number }}</div>
|
||
|
|
<h2 class="issue-card__title">{{ $iss.title }}</h2>
|
||
|
|
<p class="issue-card__blurb">{{ $iss.blurb }}</p>
|
||
|
|
<div class="issue-card__foot">
|
||
|
|
<span>{{ $iss.season }}</span>
|
||
|
|
{{- if $isCurrent }}
|
||
|
|
<span class="issue-card__cta">Read the issue →</span>
|
||
|
|
{{- else if $isForth }}
|
||
|
|
<span class="issue-card__cta issue-card__cta--muted">Subscribe →</span>
|
||
|
|
{{- end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{- if $isForth }}</div>{{- else }}</a>{{- end }}
|
||
|
|
{{- end }}
|
||
|
|
</div>
|
||
|
|
{{ end }}
|