diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss
index ab4b238..aa76b7d 100644
--- a/assets/scss/components/_images.scss
+++ b/assets/scss/components/_images.scss
@@ -25,3 +25,42 @@ 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 {
+ display: none;
+
+ position: fixed;
+ z-index: 99999;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ padding: 1em;
+
+ background: rgba(0, 0, 0, 0.85);
+
+ /* center that thang, ya get me? */
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ white-space: nowrap;
+}
+
+/* Unhide the lightbox when it's the target */
+.lightbox:target {
+ display: flex;
+}
+
+.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;
+}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 2f084ea..4f5d8d7 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -108,7 +108,17 @@
{{- end }}
{{- end }}
+{{- $lightbox := true }}
+{{- if $u.RawQuery }}
+ {{- if $u.Query.Has "lightbox" }}
+ {{- $lightbox = ne ($u.Query.Get "lightbox") "false" }}
+ {{- end }}
+{{- end }}
+
{{- /* Render image element. */ -}}
+{{- if $lightbox -}}
+
+{{- end }}
+{{- if $lightbox -}}
+
+
+
+
+{{- end }}