From 6ab04b401923220d5e8939890d2674abbdbeaf18 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 17 Jan 2021 21:34:48 +0100
Subject: Improve some pages on mobile

---
 gallerie.css | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

(limited to 'gallerie.css')

diff --git a/gallerie.css b/gallerie.css
index f8f6369..a75faf7 100644
--- a/gallerie.css
+++ b/gallerie.css
@@ -1,18 +1,9 @@
-main {
-    padding-top: 2%;
-    padding-bottom: 2%;
-    padding-right: 2%;
-}
-
 .mosaic {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr));
     grid-gap: 0.8em;
 }
 
-.mosaic.photos {
-    --mosaic-side: 14em;
-}
 .mosaic .photo {
     position: relative;
     width: 100%;
@@ -38,9 +29,6 @@ main {
     filter: none;
 }
 
-.mosaic.videos {
-    --mosaic-side: 25em;
-}
 .mosaic .video {
     position: relative;
     width: 100%;
@@ -54,3 +42,27 @@ main {
     width: 100%;
     height: 100%;
 }
+
+@media (min-width: 40em) {
+    main {
+        padding-top: 2%;
+        padding-bottom: 2%;
+        padding-right: 2%;
+    }
+
+    .mosaic.photos {
+        --mosaic-side: 14em;
+    }
+    .mosaic.videos {
+        --mosaic-side: 25em;
+    }
+}
+
+@media (max-width: 40em) {
+    .mosaic.photos {
+        --mosaic-side: 8em;
+    }
+    .mosaic.videos {
+        --mosaic-side: 10em;
+    }
+}
-- 
cgit v1.2.3