Add logo to mobile menu, lay nav.menu out a bit better

3 files changed, 27 insertions, 7 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 8aca71f..c6c665b 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -240,7 +240,7 @@ footer.legal {
         grid-column: 1;
         grid-row: 1;
     }
-    header.banner {
+    body > header.banner {
         grid-column: 2;
         grid-row: 1 / 3;
         justify-self: start;
@@ -282,7 +282,10 @@ footer.legal {
         top: 0;
         left: 0;
         margin: 0;
+
         background: #eeee;
+        color: initial;
+
         transform-origin: left;
         transform: translate(-100vw);
         transition: transform 0.5s;
@@ -290,12 +293,18 @@ footer.legal {
 
         display: grid;
         grid-template-columns: 3rem 1fr 3rem;
-        grid-template-rows: 3rem auto auto auto;
+        grid-template-rows: 3rem repeat(4, auto);
+        justify-items: center;
+        text-align: center;
     }
     header.slidingmenu > .content > img.button.close {
         grid-column: 1;
         grid-row: 1;
     }
+    header.slidingmenu > .content header.banner {
+        grid-column: 2;
+        grid-row: 1 / 3;
+    }
     header.slidingmenu > .content > a.lang {
         grid-column: -2;
         grid-row: 1;
@@ -315,24 +324,28 @@ footer.legal {
     header.slidingmenu > .content > nav.social,
     header.slidingmenu > .content > a.contact {
         grid-column: 1 / -1;
+        width: 100%;
     }
 
     header.slidingmenu > .content ul,
     header.slidingmenu > .content ol {
         list-style: none;
         padding-left: 0;
+        width: 100%;
     }
 
-    header.slidingmenu > .content > nav.menu ol > li > ul > li {
-        width: 100%;
+    header.slidingmenu > .content > nav.menu > ol > li > ul {
+        display: flex;
+        justify-content: space-evenly;
     }
-    header.slidingmenu > .content > nav.menu ol > li > ul > li > a {
+    header.slidingmenu > .content > nav.menu > ol > li > ul > li > a {
         display: block;
-        padding-left: 2em;
+        padding: 0.5em;
     }
 
     header.slidingmenu > .content > nav.social > ul {
         display: flex;
+        justify-content: space-evenly;
     }
     header.slidingmenu > .content > nav.social > ul > li > a {
         display: block;
diff --git a/stylesheets/dark.css b/stylesheets/dark.css
index 0234077..0b96216 100644
--- a/stylesheets/dark.css
+++ b/stylesheets/dark.css
@@ -12,6 +12,6 @@ footer.social a.lang:hover {
     border-color: white;
 }
 
-header.banner img, footer.social a img {
+body > header.banner img, footer.social a img {
     filter: brightness(10);
 }
diff --git a/template.html b/template.html
index aef42ea..6bebb8f 100644
--- a/template.html
+++ b/template.html
@@ -18,6 +18,13 @@
       <img class="button open" src="images/menu.svg">
       <div class="content">
         <img class="button close" src="images/close.svg">
+        <header class="banner">
+          <a href="index.html">
+            <img src="images/logo.svg"
+                 alt="logo">
+            <h1>Quatuor Bellefeuille</h1>
+          </a>
+        </header>
         <a class="lang" href="">
           EN
         </a>