1 files changed, 72 insertions, 21 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 76a1db7..01f6911 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -26,10 +26,14 @@ header.banner a {
     align-items: center;
 }
 header.banner img {
+    height: var(--banner-logo-height);
     margin: 0.6rem;
 }
 header.banner h1 {
     margin: 0;
+    max-width: 6em;             /* Force linebreak. */
+    font-size: var(--banner-name-height);
+    font-weight: normal;
     font-family: 'Cormorant', serif;
 }
 
@@ -109,17 +113,13 @@ footer.legal {
         grid-template-rows: auto 1fr auto;
     }
 
+    header.slidingmenu {
+        display: none;
+    }
+
     header.banner {
         grid-column: 1;
     }
-    header.banner img {
-        height: var(--banner-logo-height);
-    }
-    header.banner h1 {
-        font-size: var(--banner-name-height);
-        font-weight: normal;
-        max-width: 6em;         /* Force linebreak. */
-    }
 
     header.menu {
         grid-column: 3 / -2;
@@ -223,31 +223,82 @@ footer.legal {
 
 @media (max-width: 40em) {
     body {
+        --banner-logo-height: 6rem;
+        --banner-name-height: 1.8rem;
+
         display: grid;
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr auto;
+        grid-template-columns: 3rem 1fr;
+        grid-template-rows: 3rem auto 1fr auto;
         min-height: 100vh;
     }
 
-    header.banner {
-        grid-row: 1;
-    }
     header.menu, footer.social {
         display: none;
     }
-    footer.legal {
-        grid-row: 3;
+
+    header.slidingmenu {
+        grid-column: 1;
+        grid-row: 1;
+    }
+    header.banner {
+        grid-column: 2;
+        grid-row: 1 / 3;
+        justify-self: start;
     }
     main {
-        grid-row: 2;
+        grid-row: 3;
+        grid-column: 1 / -1;
         margin: 0.8em;
     }
+    footer.legal {
+        grid-column: 1 / -1;
+        grid-row: -1;
+    }
 
-    header.banner img {
-        width: 4rem;
-        height: 4rem;
+    header.slidingmenu {
+        position: relative;
+    }
+    header.slidingmenu > input {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        z-index: 3;
+        opacity: 0;
+    }
+    header.slidingmenu > img.button {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 0.3rem;
+        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;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        margin: 0;
+        background: #dddd;
+        transform-origin: left;
+        transform: translate(-100vw);
+        transition: transform 0.5s;
+        z-index: 1;
+    }
+    header.slidingmenu > input:checked ~ .content,
+    header.slidingmenu > input:checked ~ img.button.close {
+        transform: none;
     }
-    header.banner h1 {
-        font-size: 1.6rem;
+    header.slidingmenu > input:checked ~ img.button.open {
+        opacity: 0;
     }
 }