Make menu readable on mobile

1 files changed, 36 insertions, 16 deletions

diff --git a/commun.css b/commun.css
index 04757b3..b33f19b 100644
--- a/commun.css
+++ b/commun.css
@@ -34,6 +34,25 @@ header.banner:hover h1 {
     color: #d82;
 }
 
+nav > ol, nav li.dropdown > ul {
+    list-style-type: none;
+}
+nav > ol > li > a {
+    display: block;
+    padding: 0.5em 0.1em;
+}
+nav li.dropdown > ul > li a img {
+    width: 1em;
+    height: 1em;
+}
+
+.lang {
+    background-color: black;
+    border-radius: 50% 50% 50% 0;
+    color: white;
+    padding: 0.5em;
+}
+
 footer.legal {
     grid-column: 1 / -1;
     width: 100%;
@@ -89,18 +108,12 @@ footer.legal {
         flex-wrap: wrap;
         padding-left: 0;
         text-align: center;
-        list-style-type: none;
     }
 
     nav > ol > li {
         flex: 1;
     }
 
-    nav > ol > li > a {
-        display: block;
-        padding: 0.5em 0.1em;
-    }
-
     nav li.dropdown {
         position: relative;
     }
@@ -131,17 +144,9 @@ footer.legal {
         display: block;       /* Make link span whole containing block. */
         padding-inline-start: 10%;
     }
-    nav li.dropdown > ul > li a img {
-        width: 1em;
-        height: 1em;
-    }
 
     .lang {
         grid-column: 5;
-        background-color: black;
-        border-radius: 50% 50% 50% 0;
-        color: white;
-        padding: 0.5em;
         margin: auto;
         margin-top: 3rem;
     }
@@ -255,8 +260,8 @@ footer.legal {
         position: fixed;
         top: 1rem;
         right: 1rem;
-        width: 1.5rem;
-        height: 1.5rem;
+        width: 2rem;
+        height: 2rem;
         transform-origin: var(--togglable-origin);
         transform: var(--togglable-transform);
         transition: transform 0.5s;
@@ -306,4 +311,19 @@ footer.legal {
     header.banner h1 {
         font-size: 1.6rem;
     }
+
+    header.menu .content {
+        display: grid;
+        grid-template-columns: auto 4rem;
+        grid-template-rows: 4rem 4rem auto;
+    }
+    header.menu .content nav {
+        grid-row: 1 / -1;
+        grid-column: 1;
+    }
+    header.menu .content .lang {
+        grid-row: 2;
+        grid-column: 2;
+        margin: auto;
+    }
 }