roux/layouts/index.html

{{ define "main" }}
<section class="hero" id="hero">
  <div class="hero__eyebrow">
    № {{ .Site.Params.issueNumber }} · {{ .Site.Params.issueSeason }} ·
    <a href="/issues/" style="border-bottom:1px solid currentColor;margin-left:6px">View all issues</a>
  </div>
  <h1 class="hero__title">An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.</h1>
  <p class="hero__lede">
    Roux is a slow-publishing fashion journal — one hundred photographs at a time,
    gathered from <em>ateliers, streets, glasshouses and quiet hotel corridors</em>.
    You are reading <em>{{ .Site.Params.issueName }}</em>, our № {{ .Site.Params.issueNumber }} issue.
  </p>
</section>

<section class="grid" id="grid" data-density="default">
  {{- $posts := where .Site.RegularPages "Section" "posts" }}
  {{- range $i, $p := $posts }}
    {{- $img  := $p.Resources.GetMatch "*.png" }}
    {{- $card := "" }}
    {{- $full := "" }}
    {{- if $img }}
      {{- $c := $img.Resize "600x900 webp" }}
      {{- $card = $c.RelPermalink }}
    {{- end }}
    <a class="card"
       href="{{ $p.RelPermalink }}"
       style="--d:{{ mul (math.Min $i 18) 24 }}ms"
       data-id="{{ $p.Params.plate }}"
       data-slug="{{ $p.Params.slug }}">
      <div class="card__frame">
        <picture>
          {{- if $img }}
            {{- $w := $img.Resize "600x900 webp" }}
            <source srcset="{{ $w.RelPermalink }}" type="image/webp" />
            <img class="card__img"
                 loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
                 src="{{ $w.RelPermalink }}"
                 alt="{{ $p.Title }} — Roux Plate №{{ $p.Params.plate }}" />
          {{- end }}
        </picture>
        <span class="card__num">PLATE №{{ $p.Params.plate }}</span>
        <span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
        <span class="card__issue">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
      </div>
      <div class="card__meta">
        <h2 class="card__title">{{ $p.Title }}</h2>
        <div class="card__sub">
          <span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
        </div>
        <p class="card__desc">{{ $p.Params.description }}</p>
      </div>
    </a>
  {{- end }}
</section>
{{ end }}