diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index db7fd80..57b056a 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -202,13 +202,18 @@ body::after { color: var(--color-ink-muted); } +.journal-photo-wrap { + position: relative; + margin-bottom: var(--space-3); + border-radius: var(--radius-md); + overflow: hidden; +} + .journal-photo-strip { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; - border-radius: var(--radius-md); - margin-bottom: var(--space-3); } .journal-photo-strip::-webkit-scrollbar { display: none; } @@ -218,11 +223,8 @@ body::after { scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; - cursor: zoom-in; - background: none; - border: none; - padding: 0; display: block; + text-decoration: none; } .journal-photo-slide img { @@ -230,11 +232,8 @@ body::after { height: 100%; object-fit: cover; display: block; - transition: opacity 0.15s; } -.journal-photo-slide:hover img { opacity: 0.9; } - .journal-photo-dots { display: flex; justify-content: center; @@ -403,52 +402,9 @@ body::after { .gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } -/* ── Lightbox ────────────────────────────────────────────────────────────────── */ +/* ── PhotoSwipe overrides ─────────────────────────────────────────────────────── */ -.lightbox { - 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; } - -.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); } +.pswp__bg { background: rgba(0,0,0,0.96); } /* ── Map page ────────────────────────────────────────────────────────────────── */ diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig index a1fdaa2..3e547b1 100644 --- a/themes/intotheeast/templates/dailies.html.twig +++ b/themes/intotheeast/templates/dailies.html.twig @@ -121,12 +121,19 @@ feedMap.on('load', function () { {% set images = entry.media.images %} {% if images|length > 0 %} -
- {% for img in images %} - - {% endfor %} + {% do assets.addCss('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css') %} +
+
{% if images|length > 1 %} - + {% endblock %}