1 files changed, 13 insertions, 148 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 3c8439e..174ab7d 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -1,10 +1,5 @@
 body {
     --gold: #E4B63A;
-    --banner-logo-height: 11rem;
-    --banner-name-height: 2.4rem;
-    --menu-top-margin: calc((var(--banner-logo-height)
-                             - 2 * var(--banner-name-height))
-                            / 2);
 
     margin: 0;
     background-color: white;
@@ -86,7 +81,7 @@ footer.social a.lang:hover {
     border: 0.15rem solid var(--gold);
 }
 
-footer.social > .content {
+footer.social {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -101,13 +96,13 @@ footer.legal {
 }
 
 @media (min-width: 40em) {
-    .togglable > input.toggle,
-    .togglable > img.button,
-    .togglable > label {
-        display: none;
-    }
-
     body {
+        --banner-logo-height: 11rem;
+        --banner-name-height: 2.4rem;
+        --menu-top-margin: calc((var(--banner-logo-height)
+                                 - 2 * var(--banner-name-height))
+                                / 2);
+
         min-height: 100vh;
         display: grid;
         grid-template-columns: 2fr 1fr 4fr 1fr auto;
@@ -128,8 +123,6 @@ footer.legal {
 
     header.menu {
         grid-column: 3 / -2;
-    }
-    header.menu > .content {
         display: grid;
         grid-template-columns: 3fr 1fr;
     }
@@ -231,127 +224,25 @@ footer.legal {
 @media (max-width: 40em) {
     body {
         display: grid;
-        grid-template-columns: 2fr 1fr;
-        grid-template-rows: auto auto 1fr auto;
+        grid-template-columns: 1fr;
+        grid-template-rows: 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;
+    header.menu, footer.social {
+        display: none;
     }
     footer.legal {
-        grid-row: 4;
+        grid-row: 3;
     }
     main {
-        grid-row: 3;
-        grid-column: 1 / -1;
+        grid-row: 2;
         margin: 0.8em;
     }
 
-    header.menu {
-        --open-button-size: 2.4rem;
-    }
-    header.menu > label {
-        font-size: 1.2rem;
-    }
-    footer.social {
-        --open-button-size: 1.8rem;
-    }
-    footer.social > label {
-        font-size: 0.8rem;
-    }
-
-    /* Ideally, we'd use display: grid to have labels aligned.
-     * Unfortunately, afaict on mobile Safari brainfarts and fails to
-     * move the input to its fixed top-right position when it is
-     * checked; instead it moves it… somewhere…
-     *
-     * Use display: flex, absolute positions, and margins instead.
-     */
-    .togglable {
-        display: flex;
-        position: relative;
-        align-items: center;
-        --open-button-max-size: 2.4rem;
-        --close-button-size: 2rem;
-        --togglable-origin: left;
-        --togglable-transform: translate(-100vw);
-    }
-    .togglable > input.toggle {
-        position: absolute;
-        margin: 0;
-        margin-left: calc(var(--open-button-max-size) - var(--open-button-size));
-        width: var(--open-button-size);
-        height: var(--open-button-size);
-        opacity: 0;
-        cursor: pointer;
-    }
-    .togglable > img.button.open {
-        margin-left: calc(var(--open-button-max-size) - var(--open-button-size));
-        padding: calc(0.1 * var(--open-button-size));
-        width: calc(0.8 * var(--open-button-size));
-        height: calc(0.8 * var(--open-button-size));
-        object-fit: contain;
-        object-position: center;
-    }
-    .togglable > img.button.close {
-        display: block;
-        position: fixed;
-        top: calc(var(--close-button-size) / 2);
-        right: calc(var(--close-button-size) / 2);
-        width: var(--close-button-size);
-        height: var(--close-button-size);
-        margin: 0;
-        transform-origin: var(--togglable-origin);
-        transform: var(--togglable-transform);
-        transition: transform 0.5s;
-        z-index: 4;
-    }
-    .togglable > label {
-        position: absolute;
-        left: calc(1.2 * var(--open-button-max-size));
-        cursor: pointer;
-    }
-    .togglable > .content {
-        display: block;
-        position: fixed;
-        overflow: auto;
-        width: 100vw;
-        height: 100vh;
-        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: calc(var(--close-button-size) / 2);
-        right: calc(var(--close-button-size) / 2);
-        width: var(--close-button-size);
-        height: var(--close-button-size);
-        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;
@@ -359,30 +250,4 @@ footer.legal {
     header.banner h1 {
         font-size: 1.6rem;
     }
-
-    header.menu .content {
-        display: grid;
-        --cell-size: calc(var(--close-button-size) * 2);
-        grid-template-columns: auto var(--cell-size);
-        grid-template-rows: var(--cell-size) var(--cell-size) auto;
-    }
-    header.menu .content nav {
-        grid-row: 1 / -1;
-        grid-column: 1;
-        padding: 2rem;
-    }
-    header.menu .content .lang {
-        grid-row: 2;
-        grid-column: 2;
-        margin: auto;
-    }
-
-    .social > .content img {
-        width: 3em;
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
-    }
-    .contact {
-        padding: 1em;
-    }
 }