From 55ad9c2dde7d495fdefc5358b09994a82a342728 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 10 May 2026 18:40:49 +0200
Subject: [PATCH] feat: banner plays video, opens lightbox with image+video;
 remove gallery and works counter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/posts/single.html | 144 ++++++++------------------------------
 1 file changed, 31 insertions(+), 113 deletions(-)

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 69a4fd0..fd278fa 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -55,37 +55,46 @@
     {{- end -}}
 
 
-    <!-- Date + reading info -->
-    <div class="flex flex-wrap items-center gap-6">
-      <time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
-        {{- .Date.Format "January 2, 2006" -}}
-      </time>
-      {{- $imgCount  := len (.Resources.Match "[0-9]*.png") -}}
-      {{- $itemCount := $imgCount -}}
-      {{- if and (eq $imgCount 0) .Params.items -}}{{- $itemCount = len .Params.items -}}{{- end -}}
-      {{- if gt $itemCount 0 -}}
-        <span class="label text-fog">{{ $itemCount }} {{ if eq $itemCount 1 }}Work{{ else }}Works{{ end }}</span>
-      {{- end -}}
-    </div>
+    <!-- Date -->
+    <time class="label text-fog" datetime="{{ .Date.Format "2006-01-02" }}">
+      {{- .Date.Format "January 2, 2006" -}}
+    </time>
   </header>
 
   <!-- ── GRADIENT DIVIDER ──────────────────────────────────────── -->
   <div class="gradient-line mb-0"></div>
 
-  <!-- ── BANNER MEDIA — bundle banner.png → 01.png → .Params.banner ── -->
+  <!-- ── BANNER MEDIA — video if available, lightbox on click ──── -->
   {{- $bannerImg := .Resources.GetMatch "banner.png" -}}
   {{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
   {{- if $bannerImg -}}
-    <div class="w-full overflow-hidden mb-16 md:mb-24" style="height: clamp(320px, 60vh, 75vh)">
-      {{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center" "alt" .Title "loading" "eager") -}}
-    </div>
-  {{- else -}}
-    {{- with .Params.banner -}}
-      <div class="w-full overflow-hidden mb-16 md:mb-24" style="height: clamp(320px, 60vh, 75vh)">
-        {{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover object-center" "lazy" false) -}}
-      </div>
+    {{- $stem       := $bannerImg.Name | strings.TrimSuffix ".png" -}}
+    {{- $bannerVid  := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
+    {{- $webp       := $bannerImg.Resize "1200x webp" -}}
+    {{- $lbItems    := slice (dict "img" $webp.RelPermalink "video" "") -}}
+    {{- if $bannerVid -}}
+      {{- $lbItems = $lbItems | append (dict "img" $webp.RelPermalink "video" $bannerVid.RelPermalink) -}}
     {{- end -}}
-
+    <div
+      class="w-full overflow-hidden mb-16 md:mb-24 cursor-zoom-in"
+      style="height: clamp(320px, 60vh, 75vh)"
+      x-data="{ items: {{ $lbItems | jsonify }} }"
+      @click="$dispatch('lightbox:open', { items, idx: 0 })"
+    >
+      {{- if $bannerVid -}}
+        <video
+          class="w-full h-full object-cover object-center pointer-events-none"
+          src="{{ $bannerVid.RelPermalink }}"
+          poster="{{ $bannerImg.RelPermalink }}"
+          autoplay
+          loop
+          muted
+          playsinline
+        ></video>
+      {{- else -}}
+        {{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full h-full object-cover object-center pointer-events-none" "alt" .Title "loading" "eager") -}}
+      {{- end -}}
+    </div>
   {{- end -}}
 
 
@@ -134,97 +143,6 @@
   {{- end -}}
 -->
 
-  <!-- ── GALLERY ───────────────────────────────────────────────── -->
-  {{- $bundleImages := .Resources.Match "[0-9]*.png" -}}
-  {{- $legacyItems  := slice -}}
-  {{- with .Params.items -}}{{- $legacyItems = . -}}{{- end -}}
-  {{- if or $bundleImages $legacyItems -}}
-    <section class="gutter-x pb-24 md:pb-32" aria-label="Gallery">
-      <div class="max-w-5xl mx-auto">
-        {{- if $bundleImages -}}
-          {{- /* Pre-compute lightbox items so Alpine gets a static JSON array */ -}}
-          {{- $lbItems := slice -}}
-          {{- range $bundleImages -}}
-            {{- $stem  := .Name | strings.TrimSuffix ".png" -}}
-            {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
-            {{- $webp  := .Resize "1200x webp" -}}
-            {{- $entry := dict "img" $webp.RelPermalink "video" "" -}}
-            {{- if $video -}}{{- $entry = dict "img" $webp.RelPermalink "video" $video.RelPermalink -}}{{- end -}}
-            {{- $lbItems = $lbItems | append $entry -}}
-          {{- end -}}
-
-
-          <div x-data="{ items: {{ $lbItems | jsonify }} }">
-            <div class="flex items-center gap-5 mb-10">
-              <span class="badge badge-gradient">Gallery</span>
-              <span class="label text-fog"
-                >{{ len $bundleImages }} {{ if eq (len $bundleImages) 1 }}work{{ else }}works{{ end }}</span
-              >
-              <div class="flex-1 gradient-line ml-2"></div>
-            </div>
-
-            <div class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
-              {{- range $i, $img := $bundleImages -}}
-                {{- $stem  := $img.Name | strings.TrimSuffix ".png" -}}
-                {{- $video := $.Resources.GetMatch (printf "%s.mp4" $stem) -}}
-                <figure
-                  class="break-inside-avoid group card-comic cursor-zoom-in"
-                  @click="$dispatch('lightbox:open', { items, idx: {{ $i }} })"
-                >
-                  <div class="card-media min-h-48">
-                    {{- if $video -}}
-                      <video
-                        class="w-full pointer-events-none"
-                        src="{{ $video.RelPermalink }}"
-                        poster="{{ $img.RelPermalink }}"
-                        autoplay
-                        loop
-                        muted
-                        playsinline
-                      ></video>
-                    {{- else -}}
-                      {{- partial "img.html" (dict "res" $img "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full pointer-events-none") -}}
-                    {{- end -}}
-                  </div>
-                </figure>
-              {{- end -}}
-            </div>
-          </div>
-        {{- else -}}
-          <!-- Legacy front-matter items -->
-          <div class="flex items-center gap-5 mb-10">
-            <span class="badge badge-gradient">Gallery</span>
-            <span class="label text-fog"
-              >{{ len $legacyItems }} {{ if eq (len $legacyItems) 1 }}work{{ else }}works{{ end }}</span
-            >
-            <div class="flex-1 gradient-line ml-2"></div>
-          </div>
-          <div x-data="{ selected: null }" class="columns-1 sm:columns-2 lg:columns-3 gap-5 space-y-5">
-            {{- range $i, $item := $legacyItems -}}
-              <figure
-                class="break-inside-avoid group cursor-pointer card-comic"
-                @click="selected = selected === {{ $i }} ? null : {{ $i }}"
-              >
-                <div class="card-media">
-                  {{- partial "media.html" (dict "media" $item "class" "w-full") -}}
-                </div>
-                {{- with $item.description -}}
-                  <figcaption
-                    class="px-4 py-3 text-fog text-sm leading-relaxed font-body transition-colors group-hover:text-chalk"
-                  >
-                    {{ . }}
-                  </figcaption>
-                {{- end -}}
-              </figure>
-            {{- end -}}
-          </div>
-        {{- end -}}
-
-      </div>
-    </section>
-  {{- end -}}
-
-
   <!-- ── TAGS ─────────────────────────────────────────────────── -->
   {{- with .Params.tags -}}
     <footer class="gutter-x border-t border-zinc pt-10 pb-20">