1 files changed, 117 insertions, 5 deletions

diff --git a/commun.css b/commun.css
index e49d1c8..2f51778 100644
--- a/commun.css
+++ b/commun.css
@@ -20,7 +20,6 @@ header.banner a {
     align-items: center;
 }
 header.banner img {
-    width: 10rem;
     filter: brightness(0%);
     transition: filter 1s;
 }
@@ -29,7 +28,6 @@ header.banner:hover img {
 }
 header.banner h1 {
     margin: 0;
-    font-size: 1.5rem;
     transition: color 1s;
 }
 header.banner:hover h1 {
@@ -37,7 +35,9 @@ header.banner:hover h1 {
 }
 
 @media (min-width: 40em) {
-    .togglable > input.toggle, .togglable > img.button {
+    .togglable > input.toggle,
+    .togglable > img.button,
+    .togglable > .name {
         display: none;
     }
 
@@ -51,11 +51,17 @@ header.banner:hover h1 {
     header.banner {
         grid-column: 1;
     }
+    header.banner img {
+        width: 10rem;
+    }
+    header.banner h1 {
+        font-size: 1.5rem;
+    }
 
     header.menu {
         grid-column: 3 / -1;
     }
-    header.menu > div {
+    header.menu > .content {
         display: grid;
         grid-template-columns: 3fr 1fr 1fr;
     }
@@ -145,7 +151,7 @@ header.banner:hover h1 {
         top: 0;
     }
 
-    footer.social > div {
+    footer.social > .content {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -176,3 +182,109 @@ header.banner:hover h1 {
         font-size: 75%;
     }
 }
+
+@media (max-width: 40em) {
+    body {
+        --togglable-origin: left;
+        --togglable-transform: translate(-100vw);
+
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        grid-template-rows: auto auto 1fr auto;
+        min-height: 100vh;
+    }
+
+    header.banner {
+        grid-row: 1 / 3;
+        grid-column: 1;
+    }
+    header.menu {
+        grid-row: 1;
+        grid-column: 2;
+    }
+    footer.social {
+        grid-row: 2;
+        grid-column: 2;
+    }
+    footer.legal {
+        grid-row: 4;
+        grid-column: 1 / -1;
+    }
+    main {
+        grid-row: 3;
+        grid-column: 1 / -1;
+    }
+
+    .togglable {
+        display: grid;
+        position: relative;
+        grid-template-columns: 2rem auto;
+        align-items: center;
+    }
+    .togglable > input.toggle {
+        z-index: 2;
+        grid-column: 1 / -1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        opacity: 0;
+    }
+    .togglable > img.button.open {
+        grid-column: 1;
+        width: 1.6rem;
+        height: 1.6rem;
+        object-fit: contain;
+        object-position: center;
+    }
+    .togglable > img.button.close {
+        display: block;
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        transform-origin: var(--togglable-origin);
+        transform: var(--togglable-transform);
+        transition: transform 0.5s;
+        z-index: 4;
+    }
+    .togglable > .name {
+        grid-column: 2;
+    }
+    .togglable > .content {
+        display: block;
+        position: fixed;
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        margin: 0;
+        background: #dddd;
+        transform-origin: var(--togglable-origin);
+        transform: var(--togglable-transform);
+        transition: transform 0.5s;
+        z-index: 3;
+    }
+    .togglable > input.toggle:checked {
+        display: block;
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        z-index: 5;
+    }
+    .togglable > input.toggle:checked ~ img.button.close {
+        transform: none;
+    }
+    .togglable > input.toggle:checked ~ .content {
+        transform: none;
+    }
+
+    header.banner img {
+        width: 4rem;
+        height: 4rem;
+    }
+}