From a6e38efc2cb29716ba65a11b645c5ee3455da479 Mon Sep 17 00:00:00 2001
From: Luca Zeuch <l-zeuch@email.de>
Date: Sun, 12 Jan 2025 17:38:34 +0100
Subject: [PATCH] images: center lightbox on both axes when shown

Signed-off-by: Luca Zeuch <l-zeuch@email.de>
---
 assets/scss/components/_images.scss | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss
index c992ca5..aa76b7d 100644
--- a/assets/scss/components/_images.scss
+++ b/assets/scss/components/_images.scss
@@ -28,10 +28,8 @@ figcaption {
 
 /* 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;
@@ -39,16 +37,20 @@ figcaption {
   right: 0;
   bottom: 0;
 
-  /* A bit of padding around image */
   padding: 1em;
 
-  /* Translucent background */
-  background: rgba(0, 0, 0, 1);
+  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: block;
+  display: flex;
 }
 
 .lightbox span {