pivoine.art/layouts/partials/post-card.html

{{- /* Compact post card for grids.
       Expects a post page as context (.).
*/ -}}
{{- $post := . -}}
<article class="group card-comic flex flex-col bg-concrete">
  <a href="{{ $post.RelPermalink }}" class="block flex-1 flex flex-col">

    <!-- Thumbnail — bundle banner.png → 01.png → .Params.banner -->
    {{- $thumb := $post.Resources.GetMatch "banner.png" -}}
    {{- if not $thumb -}}{{- $thumb = $post.Resources.GetMatch "01.png" -}}{{- end -}}
    <div class="card-media aspect-editorial">
      {{- if $thumb -}}
        {{- partial "img.html" (dict "res" $thumb "widths" (slice 600 1000) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" "class" "w-full h-full object-cover" "alt" $post.Title) -}}
      {{- else -}}{{- with $post.Params.banner -}}
        {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover") -}}
      {{- else -}}
      <div class="w-full h-full flex items-center justify-center halftone">
        <span class="label text-smoke text-xs">PIVOINE</span>
      </div>
      {{- end -}}{{- end -}}
    </div>

    <!-- Category badge — parallelogram -->
    {{- with $post.Params.categories -}}
    <div class="flex flex-wrap gap-2 px-4 pt-4">
      {{- range first 1 . -}}
      <span class="badge">{{ . }}</span>
      {{- end -}}
    </div>
    {{- end -}}

    <!-- Title -->
    <h3 class="font-display text-base md:text-lg text-paper text-balance leading-none group-hover:text-heat transition-colors px-4 pt-3 pb-2 flex-1">
      {{- $post.Title -}}
    </h3>

    <!-- Author + date -->
    <div class="flex items-center gap-2 px-4 pb-4 mt-auto pt-3 border-t border-zinc">
      {{- with $post.Params.author -}}
        {{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
        {{- with $authorPage -}}
          {{- $avRes := .Resources.GetMatch "avatar.*" -}}
          {{- if $avRes -}}
            {{- $av := $avRes.Resize "64x webp" -}}
            <img src="{{ $av.RelPermalink }}" alt="{{ $authorPage.Params.name | default $authorPage.Title }}" class="w-5 h-5 object-cover border border-smoke flex-shrink-0" width="{{ $av.Width }}" height="{{ $av.Height }}" loading="lazy" decoding="async">
          {{- else -}}{{- with .Params.avatar -}}
            <img src="{{ . }}" alt="{{ $authorPage.Params.name | default $authorPage.Title }}" class="w-5 h-5 object-cover border border-smoke flex-shrink-0" loading="lazy" decoding="async">
          {{- end -}}{{- end -}}
          <span class="label text-fog">{{ .Params.name | default .Title }}</span>
          <span class="text-smoke" aria-hidden="true">/</span>
        {{- end -}}
      {{- end -}}
      <time class="label text-fog" datetime="{{ $post.Date.Format "2006-01-02" }}">
        {{- $post.Date.Format "Jan 2006" -}}
      </time>
    </div>

  </a>
</article>