diff options
| author | Paul Buetow <paul@buetow.org> | 2026-06-24 10:04:47 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-06-24 10:04:47 +0300 |
| commit | ba7ed37f671c92424a3058fb26465652fad3a131 (patch) | |
| tree | 3d403eae8cb044cd57547837c2582401488287ff /src | |
| parent | f85b0cd77b3b72a487ca4f35a2eac053100dc8e7 (diff) | |
Make the generated album mobile friendly
Pure CSS/HTML, no JavaScript:
- Add a <meta name="viewport"> tag to the two display heads (header.tmpl
and splash.tmpl) so phones stop rendering at a zoomed-out desktop
width.
- Make the overview grid responsive: minmax(min(THUMBHEIGHT, 100%), 1fr)
so a column never overflows a narrow screen, plus a max-width:700px
media query that shows exactly two square columns on phones (2x2
feature tiles become full-width heroes). aspect-ratio keeps cells
square at every width.
- Add overflow-x:hidden to body so the slam/glitch entry animations
(translateX +/-80vw) cannot make a phone scroll sideways.
- Make the menus touch friendly on phones: the navigator/footer/splash
links become large rounded buttons (~44px tap targets) and the "|"
separators (now wrapped in <span class="nav-sep">) are hidden on
mobile while still showing on desktop.
- Fix a pre-existing W3C error: the stats filter view-page image was
missing an alt attribute (and carried an obsolete border attribute).
Verified with headless screenshots at phone width and the W3C Nu HTML
checker + CSS validator (zero errors).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/stats-filter-album.source.sh | 7 |
1 files changed, 4 insertions, 3 deletions
diff --git a/src/lib/stats-filter-album.source.sh b/src/lib/stats-filter-album.source.sh index eedb474..c1c1e1c 100644 --- a/src/lib/stats-filter-album.source.sh +++ b/src/lib/stats-filter-album.source.sh @@ -154,7 +154,8 @@ _stats_build_filterview_body() { fi view_page=$(album_view_page_for_photo "$photo") if [ -n "$view_page" ]; then - details_link=$(printf ' <a href="%s/%s-details.html">Details</a> |' \ + details_link=$(printf \ + ' <a href="%s/%s-details.html">Details</a> <span class="nav-sep">|</span>' \ "$backhref_html" "$view_page") fi _stats_print_filterview_body "$backhref_html" "$photo_html" \ @@ -178,11 +179,11 @@ _stats_print_filterview_body() { cat <<END <div class='view'> <a href="$next.html"> - <img class='view $animation_class' border='0' src='$backhref_html/$STATS_PHOTOS_DIR/$photo_html'$tooltip_attr /> + <img class='view $animation_class' alt='$photo_html' src='$backhref_html/$STATS_PHOTOS_DIR/$photo_html'$tooltip_attr /> </a> <div class="navigator"> <a href="$prev.html" class="arrow">⇐</a> - <a href="index.html">Gallery</a> |$details_link + <a href="index.html">Gallery</a> <span class="nav-sep">|</span>$details_link <a href="$backhref_html/$STATS_PHOTOS_DIR/$photo_html">Direct link</a> <a href="$next.html" class="arrow">⇒</a> </div> |