From c91757e08de1cb865b8a46d4e9ad2db2a34e7fe8 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Fri, 6 Mar 2026 17:51:54 +0100
Subject: [PATCH] add a basic css-only lightbox to the figure shortcode

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_lightbox.scss              | 91 ++++++++++++++++++++++++++++++++
 sass/style.scss                  |  1 +
 templates/shortcodes/figure.html | 12 ++++-
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 sass/_lightbox.scss

diff --git a/sass/_lightbox.scss b/sass/_lightbox.scss
new file mode 100644
index 0000000000..5c15aa482f
--- /dev/null
+++ b/sass/_lightbox.scss
@@ -0,0 +1,91 @@
+// ── CSS-only lightbox via :target ─────────────────────────────────────────────
+//
+// Usage (in a Zola shortcode or template):
+//
+//   <!-- trigger -->
+//   <a href="#lightbox-my-image" class="lightbox-trigger" aria-label="Enlarge image">
+//     <img src="..." alt="...">
+//   </a>
+//
+//   <!-- lightbox overlay -->
+//   <div class="lightbox" id="lightbox-my-image" role="dialog" aria-label="...">
+//     <a href="#/" class="lightbox-backdrop" aria-label="Close"></a>
+//     <a href="#/" class="lightbox-close" aria-label="Close">&times;</a>
+//     <img src="..." alt="...">
+//   </div>
+
+.lightbox {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+
+    &:target {
+        display: flex;
+    }
+
+    img {
+        position: relative;
+        z-index: 2;
+        max-width: min(90vw, 1200px);
+        max-height: 90vh;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        border-radius: 10px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+        margin: 0;
+    }
+}
+
+.lightbox-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.85);
+    cursor: zoom-out;
+}
+
+.lightbox-close {
+    position: fixed;
+    top: 1rem;
+    right: 1.25rem;
+    z-index: 3;
+    font-size: 2rem;
+    line-height: 1;
+    color: #fff;
+    text-decoration: none;
+    opacity: 0.8;
+    cursor: pointer;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+// Trigger wrapper — gives the "zoom-in" cursor and renders the ⤢ expand badge
+.lightbox-trigger {
+    position: relative;
+    display: inline-block;
+    cursor: zoom-in;
+    line-height: 0;
+
+    // Expand badge visible in the bottom-right corner
+    &::after {
+        content: "⤢";
+        position: absolute;
+        bottom: 0.4rem;
+        right: 0.4rem;
+        font-size: 1.1rem;
+        line-height: 1;
+        background: rgba(0, 0, 0, 0.55);
+        color: #fff;
+        padding: 0.3rem 0.5rem;
+        border-radius: 4px;
+        pointer-events: none;
+        opacity: 0.85;
+        z-index: 1;
+    }
+}
diff --git a/sass/style.scss b/sass/style.scss
index 35913a744a..8d1fb95484 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,6 +1,7 @@
 @import '_normalize';
 @import '_fonts';
 @import '_base';
+@import '_lightbox';
 @import '_footer';
 @import '_header';
 @import '_index';
diff --git a/templates/shortcodes/figure.html b/templates/shortcodes/figure.html
index c0bc410a6b..4f0f874aae 100644
--- a/templates/shortcodes/figure.html
+++ b/templates/shortcodes/figure.html
@@ -1,4 +1,14 @@
+{%- set img_id = img | slugify -%}
 <figure style="height:100%;">
-    <img src="{{ img }}" {% if alt %}alt="{{ alt }}{% endif %}" />
+    <a href="#lightbox-{{ img_id }}" class="lightbox-trigger" aria-label="Enlarge image">
+        <img src="{{ img }}" {% if alt %}alt="{{ alt }}"{% else %}alt=""{% endif %} />
+    </a>
+    {%- if caption %}
     <figcaption>{{ caption | markdown | safe }}</figcaption>
+    {%- endif %}
 </figure>
+<div class="lightbox" id="lightbox-{{ img_id }}" role="dialog" {% if alt %}aria-label="{{ alt }}"{% endif %}>
+    <a href="#/" class="lightbox-backdrop" aria-label="Close"></a>
+    <a href="#/" class="lightbox-close" aria-label="Close">&times;</a>
+    <img src="{{ img }}" {% if alt %}alt="{{ alt }}"{% else %}alt=""{% endif %} />
+</div>