valknar
36767c3d4d
Add layouts/partials/img.html helper that resizes and converts any Hugo page-resource image to WebP, emitting a responsive srcset at multiple widths. Wire it up to every image rendering site: - post-card.html: thumbnail (600w/1000w) + avatar (64px WebP) - post-card-large.html: featured card background (800w/1200w) - posts/single.html: banner (1200w/1800w, eager) + gallery (800w/1200w) - author-card.html: avatar (96px WebP, 2× retina) Result: banner.png 7.9 MB → 496 KB WebP at 1800w (−94 %). Hugo caches processed images in resources/_gen/ across builds. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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 -}}
|
|
{{- partial "img.html" (dict "res" $thumb "widths" (slice 800 1200) "sizes" "(max-width: 768px) 100vw, 50vw" "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 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>
|