quatuorbellefeuille.com

commit 6ab04b401923220d5e8939890d2674abbdbeaf18
parent 693b796eb4933c37d979875558d20ba6eea282eb
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun, 17 Jan 2021 21:34:48 +0100

Improve some pages on mobile

Diffstat:
M
contact.css
 | 
30
++++++++++++++++--------------
M
gallerie.css
 | 
36
++++++++++++++++++++++++------------

2 files changed, 40 insertions(+), 26 deletions(-)
diff --git a/contact.css b/contact.css
@@ -1,18 +1,20 @@
-main {
-    display: grid;
-    grid-template-columns: 60% 40%;
-    padding-right: 4%;
-}
+@media (min-width: 40em) {
+    main {
+        display: grid;
+        grid-template-columns: 60% 40%;
+        padding-right: 4%;
+    }
 
-main > div {
-    padding: 2%;
-}
+    main > div {
+        padding: 2%;
+    }
 
-#contact-us dl {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-}
+    #contact-us dl {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+    }
 
-#contact-us dd {
-    margin-left: inherit;
+    #contact-us dd {
+        margin-left: inherit;
+    }
 }
diff --git 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;
+    }
+}