From b518a5c8228223dc1049d32203eed84e246a0f8b Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Thu, 10 Feb 2022 22:44:49 +0100
Subject: Allow 4×1 quartet grid on narrower screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hard to find a justifiable cutoff since I'm defining the image sizes
in terms of height…  Although they should all have the same aspect
ratio, so that should let me compute… stuff 🤔
---
 stylesheets/quatuor.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

(limited to 'stylesheets')

diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
index 7844992..9158b9a 100644
--- a/stylesheets/quatuor.css
+++ b/stylesheets/quatuor.css
@@ -62,8 +62,8 @@
 @media not all and (min-width: 50em) {
     #photos {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(20%, 50%));
-        justify-content: space-evenly;
+        grid-template-columns: repeat(4, auto);
+        justify-content: space-between;
         width: 100%;
     }
 
@@ -76,7 +76,7 @@
         display: block;
         margin-left: auto;
         margin-right: auto;
-        max-height: 60vh;
+        height: 60vh;
     }
 
     #photos p {
@@ -84,3 +84,9 @@
         text-align: center;
     }
 }
+
+@media (max-width: 20em) {
+    #photos {
+        grid-template-columns: repeat(auto-fit, 50%);
+    }
+}
-- 
cgit v1.2.3