58 lines
2.6 KiB
HTML
58 lines
2.6 KiB
HTML
|
{{- /* Large overlay card for featured/secondary slots.
|
||
|
|
Expects a post page as context (.).
|
||
|
|
*/ -}}
|
||
|
|
{{- $post := . -}}
|
||
|
|
<article class="group relative overflow-hidden aspect-[3/4] md:aspect-[4/5] card-comic">
|
||
|
|
<a href="{{ $post.RelPermalink }}" class="block w-full h-full" aria-label="{{ $post.Title }}">
|
||
|
|
|
||
|
|
<!-- Background media — 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 w-full h-full absolute inset-0">
|
||
|
|
{{- if $thumb -}}
|
||
|
|
<img class="w-full h-full object-cover" src="{{ $thumb.RelPermalink }}" alt="{{ $post.Title }}" loading="lazy" decoding="async">
|
||
|
|
{{- else -}}{{- with $post.Params.banner -}}
|
||
|
|
{{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover") -}}
|
||
|
|
{{- else -}}
|
||
|
|
<div class="w-full h-full bg-concrete flex items-center justify-center halftone">
|
||
|
|
<span class="label text-smoke">PIVOINE</span>
|
||
|
|
</div>
|
||
|
|
{{- end -}}{{- end -}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Gradient overlay -->
|
||
|
|
<div class="absolute inset-0 overlay-gradient transition-opacity duration-500 group-hover:opacity-90"></div>
|
||
|
|
|
||
|
|
<!-- Diagonal heat accent -->
|
||
|
|
<div class="absolute bottom-16 left-0 w-28 h-[3px] opacity-0 group-hover:opacity-90 transition-opacity duration-300"
|
||
|
|
style="background: linear-gradient(90deg, var(--color-heat), var(--color-pulse)); transform: skewX(-20deg) translateX(-4px);"></div>
|
||
|
|
|
||
|
|
<!-- Content -->
|
||
|
|
<div class="absolute bottom-0 left-0 right-0 p-5 md:p-6">
|
||
|
|
{{- with $post.Params.categories -}}
|
||
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
||
|
|
{{- range first 1 . -}}
|
||
|
|
<span class="badge badge-outline">{{ . }}</span>
|
||
|
|
{{- end -}}
|
||
|
|
</div>
|
||
|
|
{{- end -}}
|
||
|
|
<h3 class="font-display text-xl md:text-2xl text-paper text-balance leading-none group-hover:text-heat transition-colors mb-3">
|
||
|
|
{{- $post.Title -}}
|
||
|
|
</h3>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
{{- with $post.Params.author -}}
|
||
|
|
{{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
|
||
|
|
{{- with $authorPage -}}
|
||
|
|
<span class="label text-chalk opacity-70">{{ .Params.name | default .Title }}</span>
|
||
|
|
<span class="text-smoke opacity-60" aria-hidden="true">/</span>
|
||
|
|
{{- end -}}
|
||
|
|
{{- end -}}
|
||
|
|
<time class="label text-chalk opacity-70" datetime="{{ $post.Date.Format "2006-01-02" }}">
|
||
|
|
{{- $post.Date.Format "Jan 2006" -}}
|
||
|
|
</time>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
</article>
|