diff options
Diffstat (limited to 'share')
| -rw-r--r-- | share/templates/default/details.tmpl | 2 | ||||
| -rw-r--r-- | share/templates/default/header.tmpl | 53 | ||||
| -rw-r--r-- | share/templates/default/splash.tmpl | 1 | ||||
| -rw-r--r-- | share/templates/default/view.tmpl | 4 |
4 files changed, 56 insertions, 4 deletions
diff --git a/share/templates/default/details.tmpl b/share/templates/default/details.tmpl index cd70328..c61aafd 100644 --- a/share/templates/default/details.tmpl +++ b/share/templates/default/details.tmpl @@ -13,7 +13,7 @@ cat <<END </a> <div class="navigator details-navigator"> <a href="${render_page_num_html}-${render_view_prev_html}-details.html" class="arrow">⇐</a> - <a href="${render_page_num_html}-${render_preview_num_html}.html">Image view</a> | + <a href="${render_page_num_html}-${render_preview_num_html}.html">Image view</a> <span class="nav-sep">|</span> <a href='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'>Direct link</a> <a href="${render_page_num_html}-${render_view_next_html}-details.html" class="arrow">⇒</a> </div> diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl index 2d01e21..d5d1648 100644 --- a/share/templates/default/header.tmpl +++ b/share/templates/default/header.tmpl @@ -3,6 +3,7 @@ cat <<END <html lang="en"> <head> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <title>${render_title_html}</title> <link rel="icon" href="${render_backhref_html}/favicon.ico" type="image/x-icon"> <style> @@ -18,6 +19,9 @@ cat <<END width, and makes the gap above the header / below the footer the same 2px as the gaps between the header, grid and footer. */ margin: 0; + /* The slam/glitch entry animations translate elements by +/-80vw; + clip the horizontal overflow so a phone never scrolls sideways. */ + overflow-x: hidden; } a { @@ -204,8 +208,11 @@ cat <<END leave. Spacing comes from the grid gap, so images carry no padding. */ div.thumbs-grid { display: grid; + /* min(THUMBHEIGHT, 100%) keeps a column from ever exceeding the + viewport width, so narrow phones never scroll sideways; on wide + screens the columns are >= THUMBHEIGHT and grow (1fr) to fill. */ grid-template-columns: - repeat(auto-fill, minmax(${render_thumbheight_html}px, 1fr)); + repeat(auto-fill, minmax(min(${render_thumbheight_html}px, 100%), 1fr)); grid-auto-flow: dense; gap: 10px; margin: 0 4px; @@ -377,6 +384,50 @@ cat <<END width: 95%; } } + + /* Phone layout: a 2-column square grid, and the navigator/footer/splash + links become large, well-spaced tap targets (~44px). Pure CSS. */ + @media (max-width: 700px) { + div.thumbs-grid { + grid-template-columns: 1fr 1fr; + gap: 6px; + margin: 0 2px; + } + + div.navigator { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + align-items: center; + } + + div.navigator a, + div.footer a { + display: inline-block; + padding: 12px 16px; + border: 2px solid #ffffff; + border-radius: 8px; + font-size: 1.1em; + text-decoration: none; + } + + div.navigator a.arrow { + padding: 10px 18px; + font-size: 1.4em; + } + + /* Hide the "|" separators (wrapped in spans) so the links read as + discrete buttons on a phone; they stay visible on desktop. */ + div.navigator span.nav-sep { + display: none; + } + + p.enter a { + padding: 14px 24px; + font-size: 1.3em; + } + } </style> </head> diff --git a/share/templates/default/splash.tmpl b/share/templates/default/splash.tmpl index de5837a..8937fc2 100644 --- a/share/templates/default/splash.tmpl +++ b/share/templates/default/splash.tmpl @@ -3,6 +3,7 @@ cat <<END <html lang="en"> <head> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <title>${render_title_html}</title> <link rel="icon" href="${render_backhref_html}/favicon.ico" type="image/x-icon"> <style> diff --git a/share/templates/default/view.tmpl b/share/templates/default/view.tmpl index b1e6c79..c28859b 100644 --- a/share/templates/default/view.tmpl +++ b/share/templates/default/view.tmpl @@ -13,8 +13,8 @@ cat <<END </a> <div class="navigator"> <a href="${render_page_num_html}-${render_view_prev_html}.html" class="arrow">⇐</a> - <a href="page-${render_page_num_html}.html#${render_photo_html}">Thumbnails</a> | - <a href="${render_page_num_html}-${render_preview_num_html}-details.html">Details</a> | + <a href="page-${render_page_num_html}.html#${render_photo_html}">Thumbnails</a> <span class="nav-sep">|</span> + <a href="${render_page_num_html}-${render_preview_num_html}-details.html">Details</a> <span class="nav-sep">|</span> <a href='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'>Direct link</a> <a href="${render_page_num_html}-${render_view_next_html}.html" class="arrow">⇒</a> </div> |