Start laying things out in mobile menu

1 files changed, 58 insertions, 11 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 01f6911..8aca71f 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -47,7 +47,7 @@ header.banner:hover {
     color: var(--gold);
 }
 
-nav a {
+header.menu > nav a {
     font-size: 1.2rem;
     font-weight: 600;
 }
@@ -266,7 +266,7 @@ footer.legal {
         z-index: 3;
         opacity: 0;
     }
-    header.slidingmenu > img.button {
+    header.slidingmenu img.button {
         position: absolute;
         top: 0;
         left: 0;
@@ -274,12 +274,6 @@ footer.legal {
         width: 2.4rem;
         height: 2.4rem;
     }
-    header.slidingmenu > img.button.close {
-        transform-origin: left;
-        transform: translate(-100vw);
-        transition: transform 0.5s;
-        z-index: 2;
-    }
     header.slidingmenu > .content {
         position: fixed;
         overflow: auto;
@@ -288,14 +282,67 @@ footer.legal {
         top: 0;
         left: 0;
         margin: 0;
-        background: #dddd;
+        background: #eeee;
         transform-origin: left;
         transform: translate(-100vw);
         transition: transform 0.5s;
         z-index: 1;
+
+        display: grid;
+        grid-template-columns: 3rem 1fr 3rem;
+        grid-template-rows: 3rem auto auto auto;
     }
-    header.slidingmenu > input:checked ~ .content,
-    header.slidingmenu > input:checked ~ img.button.close {
+    header.slidingmenu > .content > img.button.close {
+        grid-column: 1;
+        grid-row: 1;
+    }
+    header.slidingmenu > .content > a.lang {
+        grid-column: -2;
+        grid-row: 1;
+
+        display: flex;
+        align-self: center;
+        justify-self: center;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+
+        border: 0.15rem solid black;
+        border-radius: 50%;
+    }
+    header.slidingmenu > .content > nav.menu,
+    header.slidingmenu > .content > nav.social,
+    header.slidingmenu > .content > a.contact {
+        grid-column: 1 / -1;
+    }
+
+    header.slidingmenu > .content ul,
+    header.slidingmenu > .content ol {
+        list-style: none;
+        padding-left: 0;
+    }
+
+    header.slidingmenu > .content > nav.menu ol > li > ul > li {
+        width: 100%;
+    }
+    header.slidingmenu > .content > nav.menu ol > li > ul > li > a {
+        display: block;
+        padding-left: 2em;
+    }
+
+    header.slidingmenu > .content > nav.social > ul {
+        display: flex;
+    }
+    header.slidingmenu > .content > nav.social > ul > li > a {
+        display: block;
+    }
+    header.slidingmenu > .content > nav.social > ul > li > a > img {
+        width: 2em;
+        height: 2em;
+    }
+
+    header.slidingmenu > input:checked ~ .content {
         transform: none;
     }
     header.slidingmenu > input:checked ~ img.button.open {