images: wrap images in a lightbox

Wrap images in a lightbox, increasing them to full-screen size when
clicked. There are JavaScript solutions available (e.g. lightbox2)[^0],
though I opted for a purely CSS-based approach.[^1]

[^0]: https://lokeshdhakar.com/projects/lightbox2/
[^1]: https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25

Signed-off-by: Luca Zeuch <[email protected]>

Author: l-zeuch

assets/scss/components/_images.scss

@@ -25,3 +25,40 @@ figcaption {
   margin-top: 0.5rem;
   font-style: italic;
 }
+
+/* CSS-only lightbox. See https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25 */
+.lightbox {
+  /* Default to hidden */
+  display: none;
+
+  /* Overlay entire screen */
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  /* A bit of padding around image */
+  padding: 1em;
+
+  /* Translucent background */
+  background: rgba(0, 0, 0, 1);
+}
+
+/* Unhide the lightbox when it's the target */
+.lightbox:target {
+  display: block;
+}
+
+.lightbox span {
+  /* Full width and height */
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  /* Size and position background image */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}

layouts/_default/_markup/render-image.html

@@ -108,11 +108,28 @@
   {{- end }}
 {{- end }}
 
+{{- $lightbox := true }}
+
 {{- /* Render image element. */ -}}
+{{- if $lightbox -}}
+<a href="#{{ print $id "-lightbox" }}">
+{{- end }}
 <img
   {{- range $k, $v := $attrs }}
     {{- if or $v (eq $k "alt") }}
       {{- printf " %s=%q" $k $v | safeHTMLAttr }}
     {{- end }}
   {{- end -}}
 >
+{{- if $lightbox -}}
+</a>
+<a href="javascript:history.back();" class="lightbox" id="{{ print $id "-lightbox" }}">
+  <img
+  {{- range $k, $v := $attrs }}
+    {{- if or $v (eq $k "alt") }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end -}}
+>
+</a>
+{{- end }}