quatuorbellefeuille.com

commit 8793ea58d8b3586f2444f8f7bf325347fca7caeb
parent 4febf4b269e00660ee1354a1b5080f9981c4a1f8
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sat, 13 Feb 2021 21:25:45 +0100

Make sure menu only ever has an even number of tabs

Diffstat:
M
stylesheets/commun.css
 | 
19
+++++++++++++++----

1 file changed, 15 insertions(+), 4 deletions(-)
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
@@ -140,16 +140,27 @@ footer.legal {
     }
 
     nav > ol {
-        display: flex;
+        display: grid;
         align-items: center;
         align-content: stretch;
-        flex-wrap: wrap;
         text-align: center;
         margin: 0;
     }
 
-    nav > ol > li {
-        flex: 1;
+    /* 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…
+     * 🤖 Go Go Gadget Mediaquery 🤖 */
+
+    @media (min-width: 50em) {
+        nav > ol {
+            grid-template-columns: repeat(2, minmax(8em, 1fr));
+        }
+    }
+
+    @media (min-width: 90em) {
+        nav > ol {
+            grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
+        }
     }
 
     nav li.dropdown {