quatuorbellefeuille.com

commit 7127c6d1234cc865f8f190d6d7005544808b5ba6
parent 8ec6dc5daf766084b367304d977b370cb3704023
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue, 16 Mar 2021 22:10:20 +0100

Switch to button-menu sooner

Diffstat:
M
stylesheets/commun.css
 | 
17
+++++++++--------
M
stylesheets/concerts.css
 | 
4
++--
M
stylesheets/contact.css
 | 
4
++--
M
stylesheets/galerie.css
 | 
4
++--
M
stylesheets/index.css
 | 
2
+-
M
stylesheets/légal.css
 | 
2
+-
M
stylesheets/membre.css
 | 
2
+-
M
stylesheets/programmes.css
 | 
2
+-
M
stylesheets/quatuor.css
 | 
4
++--

9 files changed, 21 insertions(+), 20 deletions(-)
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
@@ -1,3 +1,6 @@
+/* TODO: use a preprocessor, if only to be able to say
+   "wide-layout-threshold" instead of "50em", and
+   "xwide-layout-threshold" instead of "80em". */
 body {
     --gold: #BE8B00;
 
@@ -107,7 +110,7 @@ footer.legal {
     font-size: 75%;
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     body {
         --banner-logo-height: 8.5rem;
         --banner-name-height: 2rem;
@@ -148,14 +151,12 @@ footer.legal {
         padding-left: 0;
     }
 
-    /* I'd like to make sure the grid only ever has 1/2/4 columns.
-     * No idea how to do that with one single neat rule, so…
+    /* I'd like to make sure the grid only ever has an even number of
+     * columns.  No idea how to do that with one single neat rule, so…
      * 🤖 Go Go Gadget Mediaquery 🤖 */
 
-    @media (min-width: 50em) {
-        nav > ol {
-            grid-template-columns: repeat(2, minmax(8em, 1fr));
-        }
+    nav > ol {
+        grid-template-columns: repeat(2, minmax(8em, 1fr));
     }
 
     @media (min-width: 80em) {
@@ -238,7 +239,7 @@ footer.legal {
     }
 }
 
-@media (max-width: 40em) {
+@media (max-width: 50em) {
     body {
         --banner-logo-height: 6rem;
         --banner-name-height: 1.8rem;
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
@@ -111,7 +111,7 @@ a.thumbnail {
     opacity: 50%;
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     main {
         /* Define thumbnail dimension here so that we can align stuff in
          * #event-details. */
@@ -174,7 +174,7 @@ a.thumbnail {
     }
 }
 
-@media (max-width: 40em) {
+@media (max-width: 50em) {
     .events {
         --cell-width: 10em;
         --cell-height: 8em;
diff --git a/stylesheets/contact.css b/stylesheets/contact.css
@@ -18,7 +18,7 @@ main h1 {
     padding: 0 2em;
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     main {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -62,7 +62,7 @@ main h1 {
     }
 }
 
-@media (max-width: 40em) {
+@media (max-width: 50em) {
     main dl, main ul {
         text-align: center;
     }
diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css
@@ -52,7 +52,7 @@ main h1 {
     height: 100%;
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     .mosaic.photos {
         --mosaic-side: 14em;
     }
@@ -68,7 +68,7 @@ main h1 {
     }
 }
 
-@media (max-width: 40em) {
+@media (max-width: 50em) {
     .mosaic.photos {
         --mosaic-side: 8em;
     }
diff --git a/stylesheets/index.css b/stylesheets/index.css
@@ -75,7 +75,7 @@ a#next-concert:hover {
      }
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     header.menu > nav {
         background: #0004;
     }
diff --git a/stylesheets/légal.css b/stylesheets/légal.css
@@ -12,7 +12,7 @@ main h2 {
     filter: brightness(0);
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     main {
         max-width: 55em;
         justify-self: center;
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
@@ -103,7 +103,7 @@ main > img {
     }
 }
 
-@media (max-width: 40em)
+@media (max-width: 50em)
 {
     main > .bio-title > h1 {
         font-size: 1.2em;
diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
@@ -1,4 +1,4 @@
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     main {
         margin: 2em 4em 0 4em;
     }
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
@@ -21,7 +21,7 @@
     color: #483200;
 }
 
-@media (min-width: 40em) {
+@media (min-width: 50em) {
     main {
         max-width: 55em;
         justify-self: center;
@@ -59,7 +59,7 @@
     }
 }
 
-@media (max-width: 40em) {
+@media (max-width: 50em) {
     #photos {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(20%, 50%));