Make sure menu only ever has an even number of tabs

1 files changed, 15 insertions, 4 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index c0cbd63..6fe4dfb 100644
--- 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 {