Add large 2x2 feature tiles and a CSS-grid overview

Allow a single photo to be blown up into a large "feature" tile that
spans a 2x2 block of the album overview, controlled by a new
THUMB_FEATURE_PERCENT (0-100, default 10; 0 disables). Each tile rolls
for a feature first, then for a subdivision, otherwise stays a normal
square.

To pack mixed-size tiles (normal 1x1, subdivided 1x1, feature 2x2)
without gaps, the overview is now a real CSS grid with
grid-auto-flow: dense, so smaller tiles backfill the holes a 2x2 feature
would leave. Tile spacing moved from per-image padding to the grid gap.
Feature tiles reuse the img.thumb class and its dramatic hover.

THUMB_FEATURE_PERCENT is wired through the same layers as
THUMB_SUBDIVIDE_PERCENT: config defaults, 0..100 validation,
--print-config, the --feature 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.
Setting both percentages to 0 reproduces the previous all-1x1 grid.

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

2 files changed, 52 insertions, 21 deletions

diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 50a33a7..cf78513 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -189,21 +189,51 @@ cat <<END
             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. */
+        /* The album overview is a CSS grid of fixed THUMBHEIGHT cells. A normal
+           thumbnail fills one cell, a subdivided tile packs several smaller
+           thumbnails into one cell, and a "feature" tile spans a 2x2 block (a
+           large hero image). grid-auto-flow: dense lets the smaller tiles
+           backfill the holes a 2x2 feature would otherwise leave, keeping the
+           grid tightly packed. Spacing comes from the grid gap, so images carry
+           no padding inside the grid. */
+        div.thumbs-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, ${render_thumbheight_html}px);
+            grid-auto-rows: ${render_thumbheight_html}px;
+            grid-auto-flow: dense;
+            gap: 10px;
+            justify-content: center;
+            margin: 0 auto;
+        }
+
+        div.thumbs-grid img {
+            padding: 0;
+        }
+
+        /* A feature tile: one photo blown up to span a 2x2 block of the grid. It
+           reuses the normal img.thumb class (and its hover) but stretches the
+           image to fill the larger 2x2 area. */
+        div.thumbs-grid a.feature {
+            grid-column: span 2;
+            grid-row: span 2;
+        }
+
+        div.thumbs-grid a.feature img.thumb {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* A subdivided thumbnail tile fills one grid cell with its own 2x2 inner
+           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;
+            display: 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;
+            width: 100%;
+            height: 100%;
         }
 
         div.tile a {
@@ -216,12 +246,12 @@ cat <<END
             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 {
+        /* Raise whichever grid item is hovered (a normal/feature anchor, a whole
+           subdivided tile, or a single popping sub-thumbnail) above its
+           neighbours, so its scaled/rotated hover effect is painted on top of
+           the adjacent cells instead of under them. */
+        div.thumbs-grid a:hover,
+        div.thumbs-grid div.tile:hover {
             position: relative;
             z-index: 2;
         }
@@ -240,10 +270,9 @@ cat <<END
             margin-top: 12px;
         }
 
-        /* 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. */
+        /* Sub-thumbnails and feature tiles 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 every tile feels lively. */
         img.thumb:hover,
         img.subthumb:hover {
             outline: 4px solid #ffffff;
diff --git a/share/templates/default/previewpage.tmpl b/share/templates/default/previewpage.tmpl
index 9f42f84..7a3a72d 100644
--- a/share/templates/default/previewpage.tmpl
+++ b/share/templates/default/previewpage.tmpl
@@ -10,5 +10,7 @@
 # and seeded animation classes). The surrounding header/footer still come from
 # their own templates, which render_full_preview_page emits around this one.
 cat <<END
+<div class="thumbs-grid">
 ${render_preview_thumbs_html}
+</div>
 END