Start laying things out in mobile menu

2 files changed, 77 insertions, 24 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 {
diff --git a/template.html b/template.html
index 10dd002..aef42ea 100644
--- a/template.html
+++ b/template.html
@@ -16,8 +16,8 @@
     <header class="slidingmenu">
       <input type="checkbox">
       <img class="button open" src="images/menu.svg">
-      <img class="button close" src="images/close.svg">
       <div class="content">
+        <img class="button close" src="images/close.svg">
         <a class="lang" href="">
           EN
         </a>
@@ -38,18 +38,24 @@
         </nav>
         <nav class="social">
           <ul>
-            <a href="https://www.facebook.com/quatuorbellefeuille/"
-               target="_blank" rel="noreferrer noopener">
-              <img src="images/facebook-logo.svg">
-            </a>
-            <a href="https://www.instagram.com/quatuor.bellefeuille/"
-               target="_blank" rel="noreferrer noopener">
-              <img src="images/instagram-logo.svg">
-            </a>
-            <a href=""
-               target="_blank" rel="noreferrer noopener">
-              <img src="images/youtube-logo.svg">
-            </a>
+            <li>
+              <a href="https://www.facebook.com/quatuorbellefeuille/"
+                 target="_blank" rel="noreferrer noopener">
+                <img src="images/facebook-logo.svg">
+              </a>
+            </li>
+            <li>
+              <a href="https://www.instagram.com/quatuor.bellefeuille/"
+                 target="_blank" rel="noreferrer noopener">
+                <img src="images/instagram-logo.svg">
+              </a>
+            </li>
+            <li>
+              <a href=""
+                 target="_blank" rel="noreferrer noopener">
+                <img src="images/youtube-logo.svg">
+              </a>
+            </li>
           </ul>
         </nav>
         <a class="contact" href="contact.html">