fix(ios): use 100dvh for PhotoSwipe to fix dynamic viewport

iOS Safari freezes 100vh at the initial viewport height (address bar
visible). 100dvh tracks the live viewport as browser chrome shows/hides.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr

themes/intotheeast/css/style.css

@@ -1,5 +1,7 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+html { scroll-behavior: smooth; }
+
 body {
     font-family: var(--font-ui);
     font-size: var(--text-base);
@@ -87,7 +89,7 @@ body::after {
 
 /* ── Feed ────────────────────────────────────────────────────────────────────── */
 
-.feed { display: flex; flex-direction: column; gap: var(--space-12); }
+.feed { display: flex; flex-direction: column; gap: var(--space-8); }
 .feed-empty { color: var(--color-ink-muted); font-style: italic; }
 
 .entry-card {
@@ -95,8 +97,9 @@ body::after {
     text-decoration: none;
     color: inherit;
     border-bottom: 1px solid var(--color-border);
-    padding-bottom: var(--space-12);
+    padding-bottom: var(--space-8);
     transition: background 0.15s;
+    scroll-margin-top: calc(var(--site-header-height) + var(--space-4));
 }
 
 /* Card: photo variant */
@@ -162,8 +165,8 @@ body::after {
 
 .journal-post {
     border-bottom: 1px solid var(--color-border);
-    padding-bottom: var(--space-12);
+    padding-bottom: var(--space-8);
-    margin-bottom: var(--space-12);
+    scroll-margin-top: calc(var(--site-header-height) + var(--space-4));
 }
 
 .journal-post-header {
@@ -202,13 +205,20 @@ body::after {
     color: var(--color-ink-muted);
 }
 
+.journal-photo-wrap {
+    position: relative;
+    margin-bottom: var(--space-5);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    aspect-ratio: 4 / 3;
+}
+
 .journal-photo-strip {
     display: flex;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
-    border-radius: var(--radius-md);
+    height: 100%;
-    margin-bottom: var(--space-3);
 }
 
 .journal-photo-strip::-webkit-scrollbar { display: none; }
@@ -216,34 +226,76 @@ body::after {
 .journal-photo-slide {
     flex: 0 0 100%;
     scroll-snap-align: start;
-    aspect-ratio: 3 / 2;
     overflow: hidden;
+    display: block;
+    text-decoration: none;
+    position: relative;
+}
+
+.journal-photo-slide::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: var(--thumb);
+    background-size: cover;
+    background-position: center;
+    filter: blur(24px) brightness(0.75);
+    transform: scale(1.15);
+    z-index: 0;
 }
 
 .journal-photo-slide img {
+    position: relative;
+    z-index: 1;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
     display: block;
 }
 
-.journal-photo-dots {
+.journal-photo-expand {
+    position: absolute;
+    bottom: var(--space-3);
+    right: var(--space-3);
+    width: 32px;
+    height: 32px;
+    background: rgba(0,0,0,0.45);
+    border: none;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
     display: flex;
+    align-items: center;
     justify-content: center;
+    padding: 0;
+    z-index: 2;
+    -webkit-tap-highlight-color: transparent;
+    transform: translateZ(0);
+}
+
+.journal-photo-expand:active { background: rgba(0,0,0,0.7); }
+
+.journal-photo-dots {
+    position: absolute;
+    bottom: var(--space-3);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
     gap: var(--space-2);
-    margin-bottom: var(--space-4);
+    z-index: 2;
 }
 
 .journal-photo-dot {
     width: 6px;
     height: 6px;
     border-radius: 9999px;
-    background: var(--color-border);
+    background: rgba(255,255,255,0.5);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.4);
     transition: background 0.2s;
 }
 
 .journal-photo-dot.is-active {
-    background: var(--color-ink-muted);
+    background: #fff;
 }
 
 .strip-controls {
@@ -254,6 +306,10 @@ body::after {
     margin-bottom: var(--space-4);
 }
 
+@media (hover: none) {
+    .strip-controls { display: none; }
+}
+
 .strip-prev,
 .strip-next {
     background: transparent;
@@ -395,52 +451,12 @@ body::after {
 
 .gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
 
-/* ── Lightbox ────────────────────────────────────────────────────────────────── */
+/* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */
 
-.lightbox {
+.pswp__bg { background: #000; }
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.94);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
-.lightbox[hidden] { display: none; }
+/* iOS Safari: 100vh freezes when address bar hides; dvh tracks the live viewport */
-
+.pswp { height: 100dvh; }
-.lightbox-img {
-    max-width: 92vw;
-    max-height: 90vh;
-    object-fit: contain;
-    border-radius: var(--radius-sm);
-    display: block;
-}
-
-.lightbox-close,
-.lightbox-prev,
-.lightbox-next {
-    position: absolute;
-    background: rgba(255,255,255,0.12);
-    border: none;
-    color: #fff;
-    cursor: pointer;
-    border-radius: 50%;
-    width: 44px;
-    height: 44px;
-    font-size: 1.4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.15s;
-}
-
-.lightbox-close { top: 1rem; right: 1rem; }
-.lightbox-prev  { left: 0.75rem; top: 50%; transform: translateY(-50%); }
-.lightbox-next  { right: 0.75rem; top: 50%; transform: translateY(-50%); }
-.lightbox-close:hover,
-.lightbox-prev:hover,
-.lightbox-next:hover { background: rgba(255,255,255,0.26); }
 
 /* ── Map page ────────────────────────────────────────────────────────────────── */
 

themes/intotheeast/templates/dailies.html.twig

@@ -1,6 +1,7 @@
 {% extends 'default.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set journal_entries = page.collection() %}
 {% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %}
 {% set story_entries = stories_page ? stories_page.children.published() : [] %}
@@ -121,11 +122,19 @@ feedMap.on('load', function () {
 
                 {% set images = entry.media.images %}
                 {% if images|length > 0 %}
-                <div class="journal-photo-strip" data-slides="{{ images|length }}">
+                {% set firstImg = images|first %}
+                {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
+                <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
+                    <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
                         {% for img in images %}
-                    <div class="journal-photo-slide">
+                        <a class="journal-photo-slide"
-                        <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+                           href="{{ img.url }}"
-                    </div>
+                           data-pswp-width="{{ img.width }}"
+                           data-pswp-height="{{ img.height }}"
+                           style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
+                           target="_blank">
+                            <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
+                        </a>
                         {% endfor %}
                     </div>
                     {% if images|length > 1 %}
@@ -135,6 +144,10 @@ feedMap.on('load', function () {
                         {% endfor %}
                     </div>
                     {% endif %}
+                    <button class="journal-photo-expand" aria-label="View full size">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+                    </button>
+                </div>
                 {% endif %}
 
                 <div class="journal-post-body">{{ entry.content|raw }}</div>
@@ -163,4 +176,41 @@ feedMap.on('load', function () {
         <p class="feed-empty">No entries yet. The journey is about to begin.</p>
     {% endif %}
 </div>
+
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.init();
+
+/* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+    }
+});
+</script>
 {% endblock %}

themes/intotheeast/templates/trip.html.twig

@@ -1,6 +1,7 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
 {% set stories_page = grav.pages.find(page.route ~ '/stories') %}
 {% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
@@ -246,11 +247,19 @@
 
                         {% set images = entry.media.images %}
                         {% if images|length > 0 %}
-                        <div class="journal-photo-strip" data-slides="{{ images|length }}">
+                        {% set firstImg = images|first %}
+                        {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
+                        <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
+                            <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
                                 {% for img in images %}
-                            <div class="journal-photo-slide">
+                                <a class="journal-photo-slide"
-                                <img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
+                                   href="{{ img.url }}"
-                            </div>
+                                   data-pswp-width="{{ img.width }}"
+                                   data-pswp-height="{{ img.height }}"
+                                   style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
+                                   target="_blank">
+                                    <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
+                                </a>
                                 {% endfor %}
                             </div>
                             {% if images|length > 1 %}
@@ -260,6 +269,10 @@
                                 {% endfor %}
                             </div>
                             {% endif %}
+                            <button class="journal-photo-expand" aria-label="View full size">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+                            </button>
+                        </div>
                         {% endif %}
 
                         <div class="journal-post-body">{{ entry.content|raw }}</div>
@@ -333,7 +346,7 @@ tripMap.on('load', function () {
         el.addEventListener('click', function () {
             var card = document.getElementById('entry-' + entry.slug);
             if (!card) return;
-            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            window.location.hash = 'entry-' + entry.slug;
             setTimeout(function () {
                 card.classList.add('is-highlighted');
                 setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
@@ -546,5 +559,61 @@ function parseGpxFiles(urls, callback) {
         });
     }
 })();
+
+/* ── Back to top ─────────────────────────────────────────── */
+document.addEventListener('DOMContentLoaded', function () {
+    var btn = document.getElementById('trip-totop');
+    if (!btn) return;
+    var threshold = window.innerHeight * 0.8;
+    var shown = false;
+    btn.addEventListener('click', function () {
+        history.pushState(null, '', window.location.pathname + window.location.search);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    window.addEventListener('scroll', function () {
+        var shouldShow = window.scrollY > threshold;
+        if (shouldShow !== shown) {
+            shown = shouldShow;
+            btn.classList.toggle('is-visible', shown);
+        }
+    }, { passive: true });
+});
+</script>
+
+<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>
+
+<script type="module">
+import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+const lightbox = new PhotoSwipeLightbox({
+    gallery: '.pswp-gallery',
+    children: 'a.journal-photo-slide',
+    pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
+});
+lightbox.init();
+
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+    }
+});
 </script>
 {% endblock %}