From 1609de130a6d820ba9bc12e739d0c73992b39792 Mon Sep 17 00:00:00 2001
From: Liam <byteslice@airmail.cc>
Date: Sat, 27 Apr 2024 02:10:45 -0400
Subject: [PATCH] Use flexbox for centering image blocks
---
assets/css/views/_images.scss | 14 ++++----------
1 file changed, 4 insertions(+), 10 deletions(-)
diff --git a/assets/css/views/_images.scss b/assets/css/views/_images.scss
index 76e1f74c..c3a956bd 100644
--- a/assets/css/views/_images.scss
+++ b/assets/css/views/_images.scss
@@ -92,12 +92,6 @@ div.image-container {
overflow: hidden;
/* prevent .media-box__overlay from overflowing the container */
text-align: center;
- a::before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
img,
video {
vertical-align: middle;
@@ -105,12 +99,12 @@ div.image-container {
max-height: 100%;
}
/* Make the link cover the whole container if the image is oblong */
- a {
+ a, picture, video {
width: 100%;
height: 100%;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
}
}