Add dynamic subdivided thumbnail tiles

Make the album preview grid livelier: with a configurable probability
(THUMB_SUBDIVIDE_PERCENT, default 30%) a square thumbnail tile is
subdivided into several smaller thumbnails packed into the same square
footprint, chosen at random from:

- quad: 2x2 squares (4 photos)
- two-wide: two stacked full-width strips (2 photos)
- squares+wide: two squares plus one full-width strip, strip on the
  top or the bottom (3 photos)

Each sub-thumbnail stays its own clickable photo with its own view page;
subdivision only groups consecutive photos visually, so preview
numbering and the view/details/redirect pages are unchanged. No new
images are generated (CSS object-fit crops the existing aspect-correct
thumbs into squares or wide strips). Sub-thumbnails get the same random
entry animation and the same dramatic hover (flip/scale/rotate/filter)
as full thumbs. The layout choice reuses the seeded random_index, so
builds stay reproducible under RANDOM_SEED. THUMB_SUBDIVIDE_PERCENT=0
reproduces the previous output byte-for-byte.

The new option is wired through the config defaults, validation
(0..100), --print-config, the --subdivide CLI flag, the usage text, and
the shuriken.json / --dry-run metadata, with docs and tests updated.
Generated HTML and CSS pass the W3C Nu HTML checker and CSS validator.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

1 files changed, 52 insertions, 1 deletions

diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 4ba159e..50a33a7 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -186,6 +186,52 @@ cat <<END
             height: ${render_thumbheight_html}px;
             width: ${render_thumbheight_html}px;
             object-fit: cover;
+            vertical-align: top;
+        }
+
+        /* A subdivided thumbnail tile: same outer footprint as one square thumb
+           (including the 5px image padding), but a 2x2 grid packing several
+           smaller thumbnails. Anchor order + the "wide" class (a full-width
+           strip spanning both columns) produce the quad / two-wide / squares+
+           wide layouts via grid auto-placement. */
+        div.tile {
+            display: inline-grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 4px;
+            width: ${render_thumbheight_html}px;
+            height: ${render_thumbheight_html}px;
+            padding: 5px;
+            box-sizing: content-box;
+            vertical-align: top;
+        }
+
+        div.tile a {
+            display: block;
+            min-width: 0;
+            min-height: 0;
+        }
+
+        div.tile a.wide {
+            grid-column: span 2;
+        }
+
+        /* Raise the hovered sub-thumbnail above its neighbours so its
+           scaled/rotated "pop" effect (the shared img.thumb/img.subthumb:hover
+           rule below) is painted on top of the adjacent grid cells, not under
+           them. The sub-images fit their cells exactly, so there is no overflow
+           to clip until a hover scales one up. */
+        div.tile a:hover {
+            position: relative;
+            z-index: 2;
+        }
+
+        img.subthumb {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            padding: 0;
+            display: block;
         }
 
         /* Camera filter page grid: separate from the back link and let the
@@ -194,7 +240,12 @@ cat <<END
             margin-top: 12px;
         }
 
-        img.thumb:hover {
+        /* Sub-thumbnails get the same dramatic hover as the full square thumbs
+           (mirror flip, scale-up, rotate, contrast/saturate boost, and a switch
+           to object-fit:contain) so a subdivided tile feels as lively as a
+           normal one. */
+        img.thumb:hover,
+        img.subthumb:hover {
             outline: 4px solid #ffffff;
             -webkit-transform: scaleX(-1);
             transform: scaleX(-1) scale(1.08) rotate(2deg);