80 lines
3.0 KiB
HTML
80 lines
3.0 KiB
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 . -}}
|
|
<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>
|