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>

1 files changed, 5 insertions, 0 deletions

diff --git a/src/lib/album-metadata.source.sh b/src/lib/album-metadata.source.sh
index 3d38cbf..b74bf8f 100644
--- a/src/lib/album-metadata.source.sh
+++ b/src/lib/album-metadata.source.sh
@@ -210,6 +210,7 @@ _collect_generation_metadata() {
     _GENERATION_METADATA["settings_thumbheight"]="$THUMBHEIGHT"
     _GENERATION_METADATA["settings_maxpreviews"]="$MAXPREVIEWS"
     _GENERATION_METADATA["settings_subdivide_percent"]="$THUMB_SUBDIVIDE_PERCENT"
+    _GENERATION_METADATA["settings_feature_percent"]="$THUMB_FEATURE_PERCENT"
     _GENERATION_METADATA["settings_image_jobs"]="$IMAGE_JOBS"
     _GENERATION_METADATA["settings_random_seed"]="$RANDOM_SEED"
     _GENERATION_METADATA["settings_shuffle"]="$SHUFFLE"
@@ -267,6 +268,8 @@ _generation_metadata_json() {
         "$(_json_string "${_GENERATION_METADATA["settings_maxpreviews"]}")"
     printf '    "subdivide_percent": %s,\n' \
         "$(_json_string "${_GENERATION_METADATA["settings_subdivide_percent"]}")"
+    printf '    "feature_percent": %s,\n' \
+        "$(_json_string "${_GENERATION_METADATA["settings_feature_percent"]}")"
     printf '    "image_jobs": %s,\n' \
         "$(_json_string "${_GENERATION_METADATA["settings_image_jobs"]}")"
     printf '    "random_seed": %s,\n' \
@@ -349,6 +352,7 @@ collect_dry_run_plan() {
     plan_ref["thumbheight"]="$THUMBHEIGHT"
     plan_ref["maxpreviews"]="$MAXPREVIEWS"
     plan_ref["subdivide_percent"]="$THUMB_SUBDIVIDE_PERCENT"
+    plan_ref["feature_percent"]="$THUMB_FEATURE_PERCENT"
     plan_ref["image_jobs"]="$IMAGE_JOBS"
     plan_ref["random_seed"]="$RANDOM_SEED"
     plan_ref["shuffle"]="$SHUFFLE"
@@ -380,6 +384,7 @@ print_dry_run_plan() {
     printf 'Thumb height: %s\n' "${plan_ref["thumbheight"]}"
     printf 'Max previews per page: %s\n' "${plan_ref["maxpreviews"]}"
     printf 'Subdivide percent: %s\n' "${plan_ref["subdivide_percent"]}"
+    printf 'Feature percent: %s\n' "${plan_ref["feature_percent"]}"
     printf 'Image jobs: %s\n' "${plan_ref["image_jobs"]}"
     printf 'Random seed: %s\n' "${plan_ref["random_seed"]}"
     printf 'Shuffle: %s\n' "${plan_ref["shuffle"]}"