images: center lightbox on both axes when shown

Signed-off-by: Luca Zeuch <l-zeuch@email.de>
botlabs-gg · Jan 12, 2025 · a6e38ef · a6e38ef
1 parent d4f8e35
commit a6e38ef
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss
@@ -28,27 +28,29 @@ 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;
   left: 0;
   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 {