roux/layouts/issues/terms.html

{{ define "main" }}
<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">Archive · Every issue</div>
  <h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4">The <em>issues</em></h1>
  <p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
    Roux publishes one hundred photographs at a time, once a season. Each issue is a complete thing.
  </p>
</section>

<div class="grid [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
  {{- range $i, $id := $.Site.Params.issueIds }}
  {{- $iss      := $.Site.GetPage (printf "/issues/%s" $id) }}
  {{- if not $iss }}{{- continue }}{{- end }}
  {{- $isCurrent := eq $iss.Params.status "current" }}
  {{- $isForth   := eq $iss.Params.status "forthcoming" }}
  {{- $issueURL  := printf "/issues/%s/" $id }}
  {{- $delay     := mul $i 80 }}

  {{- if $isForth }}
  <div data-issue-card style="--d:{{ $delay }}ms"
       class="flex flex-col opacity-60">
  {{- else }}
  <a href="{{ $issueURL }}" data-issue-card style="--d:{{ $delay }}ms"
     class="group flex flex-col">
  {{- end }}

    {{/* Cover image */}}
    <div class="relative aspect-[2/3] overflow-hidden bg-paper-2 rounded-[1px] mb-5
                after:content-[''] after:absolute after:inset-0
                after:shadow-[inset_0_0_0_1px_rgba(22,17,13,.04)] after:pointer-events-none">
      {{- if $isForth }}
        <div class="absolute inset-0 flex flex-col items-center justify-center gap-3
                    font-sans font-medium text-[10px] leading-none tracking-[.18em] uppercase text-ink-soft">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          Forthcoming
        </div>
      {{- else }}
        {{- $firstPost := index $iss.Pages 0 }}
        {{- 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.Params.issueNumber }} cover" loading="lazy"
                   class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.02]" />
            </picture>
          {{- end }}
        {{- end }}
      {{- end }}
    </div>

    {{/* Metadata */}}
    <div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-roux mb-2">{{ $iss.Params.issueNumber }}</div>
    <h2 class="font-display font-normal text-[clamp(22px,2vw,30px)] leading-[1.05] m-0 mb-2">{{ $iss.Title }}</h2>
    <p class="font-serif italic text-[13px] leading-[1.5] text-ink-soft mb-4 flex-1">{{ $iss.Params.description }}</p>
    <div class="flex items-center justify-between font-sans text-[11px] leading-none tracking-[.1em] text-ink-soft mt-auto pt-4 border-t border-[var(--rule-2)]">
      <span>{{ $iss.Params.season }}</span>
      {{- if $isCurrent }}
        <span class="text-ink">Read the issue →</span>
      {{- else if $isForth }}
        <span class="opacity-50">Subscribe →</span>
      {{- end }}
    </div>

  {{- if $isForth }}</div>{{- else }}</a>{{- end }}
  {{- end }}
</div>
{{ end }}