Add slideshow: root-level, shuffle, fullscreen, click-to-album

- Root slideshow: all_media_entries walks the full media tree so
  /slideshow/ shows every photo across all albums; Slideshow button
  always appears on the root album page
- Shuffle and Full screen checkboxes sit next to the Slideshow button
  on the album page; options pass as ?shuffle=1&fullscreen=1 URL params
- Fullscreen uses a tap-to-activate overlay (browsers block auto-entry
  on page load); webkit-prefixed for Safari; ⛶ button and F key for
  mid-session toggle
- Fullscreen mode hides controls, counter, caption bar, and site header
- Exiting fullscreen auto-pauses so the current photo stays visible
- Click/tap anywhere in the stage navigates to the photo's album
  lightbox; reads the live src attribute instead of ssIdx to avoid a
  race where ssIdx advances during the cross-fade while the old photo
  is still on screen
- layout.erb excluded from slideshow (layout: false) so the site header
  never appears there
- CSS cache-busted with ?v=2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 9 insertions, 0 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 3dd2450..a142f8a 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -288,11 +288,20 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
   background: rgba(0,0,0,.7);
   flex-shrink: 0;
 }
+.ss-opt-label { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; color: var(--text-dim); cursor: pointer; }
+.ss-opt-label input { cursor: pointer; }
 .ss-interval-label { color: var(--text-dim); font-size: .85rem; display: flex; align-items: center; gap: 4px; margin-left: auto; }
 .ss-interval-label input { width: 48px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 2px 6px; }
 
 #ss-counter { position: absolute; top: 12px; right: 16px; color: rgba(255,255,255,.5); font-size: .8rem; pointer-events: none; }
 
+/* Fullscreen: nothing but the photo */
+.ss-fullscreen .site-header,
+.ss-fullscreen #ss-controls,
+.ss-fullscreen #ss-counter,
+.ss-fullscreen #ss-caption-bar { display: none !important; }
+.ss-fullscreen #ss-stage { cursor: pointer; }
+
 /* ── Admin ─────────────────────────────────────────────────────────────── */
 .admin-login {
   max-width: 360px; margin: 80px auto;