Add full-image zoom overlay to single post pages

A "View full image" button appears in the single-post hero alongside
the return link. Clicking the lightbox main image also opens the same
overlay from any page. The overlay is pure image on a near-black
backdrop; click backdrop, close button, or Escape to dismiss.

Escape is layered: closes zoom first, then lightbox if zoom is not open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-07 14:46:24 +02:00
parent 81e7417a1d
commit 3b359d2b37
4 changed files with 95 additions and 3 deletions
+10
View File
@@ -198,6 +198,16 @@ input[type="search"]::-webkit-search-cancel-button {
opacity: 1;
}
/* ── full-image zoom overlay ── */
.img-zoom {
position: fixed; inset: 0; z-index: 400;
background: rgba(8,6,4,.97);
display: none; place-items: center;
cursor: zoom-out;
}
.img-zoom[data-open="true"] { display: grid; }
.lb-img { cursor: zoom-in; }
/* ── scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }