Merge branch 'menu-mobile'

1 files changed, 144 insertions, 147 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 3c8439e..b30d130 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;
@@ -31,14 +26,18 @@ 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;
 }
 
-header.banner img, .social a img {
+header.banner img, .social img {
     filter: brightness(0);
 }
 header.banner:hover img, .social a:hover img {
@@ -48,18 +47,13 @@ header.banner:hover {
     color: var(--gold);
 }
 
-nav a {
+header.menu > nav a {
     font-size: 1.2rem;
     font-weight: 600;
 }
 
-nav > ol, nav li.dropdown > ul {
+nav ol, nav ul {
     list-style-type: none;
-    padding-left: 0;
-}
-nav > ol > li > a {
-    display: block;
-    padding: 0.5em 0.1em;
 }
 
 footer.social a {
@@ -72,21 +66,23 @@ footer.social a.contact:hover {
     background: white;
 }
 
-footer.social a.lang {
-    display: block;
-    padding: 0.5rem;
-    border-radius: 50%;
-    font-size: 1rem;
-
+a.lang {
     border: 0.15rem solid black;
+    border-radius: 50%;
 }
-footer.social a.lang:hover {
+a.lang:hover {
     color: white;
     background: var(--gold);
     border: 0.15rem solid var(--gold);
 }
 
-footer.social > .content {
+footer.social a.lang {
+    display: block;
+    padding: 0.5rem;
+    font-size: 1rem;
+}
+
+footer.social {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -101,35 +97,29 @@ 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;
         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;
-    }
-    header.menu > .content {
         display: grid;
         grid-template-columns: 3fr 1fr;
     }
@@ -146,6 +136,9 @@ footer.legal {
         text-align: center;
         margin: 0;
     }
+    nav ol, nav ul {
+        padding-left: 0;
+    }
 
     /* I'd like to make sure the grid only ever has 1/2/4 columns.
      * No idea how to do that with one single neat rule, so…
@@ -163,6 +156,11 @@ footer.legal {
         }
     }
 
+    nav > ol > li > a {
+        display: block;
+        padding: 0.5em 0.1em;
+    }
+
     nav li.dropdown {
         position: relative;
     }
@@ -208,16 +206,16 @@ footer.legal {
         padding: var(--menu-top-margin) 1em 0;
     }
 
-    .social a {
+    footer.social a {
         display: block;
         margin: 1rem;
     }
 
-    .social a > img {
+    footer.social a > img {
         width: 2.2rem;
     }
 
-    a.contact {
+    footer.social > a.contact {
         /* Ideally should be just: */
         /* writing-mode: sideways-lr; */
         /* but of course We Can't Have Nice Things. */
@@ -230,99 +228,67 @@ footer.legal {
 
 @media (max-width: 40em) {
     body {
+        --banner-logo-height: 6rem;
+        --banner-name-height: 1.8rem;
+
         display: grid;
-        grid-template-columns: 2fr 1fr;
-        grid-template-rows: auto auto 1fr auto;
+        grid-template-columns: 3rem 1fr;
+        grid-template-rows: 3rem auto 1fr auto;
         min-height: 100vh;
     }
 
-    header.banner {
-        grid-row: 1 / 3;
-        grid-column: 1;
+    header.menu, footer.social {
+        display: none;
     }
-    header.menu {
+
+    header.slidingmenu {
+        grid-column: 1;
         grid-row: 1;
-        grid-column: 2;
     }
-    footer.social {
-        grid-row: 2;
+    body > header.banner {
         grid-column: 2;
-    }
-    footer.legal {
-        grid-row: 4;
+        grid-row: 1 / 3;
+        justify-self: start;
     }
     main {
         grid-row: 3;
         grid-column: 1 / -1;
         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;
+    footer.legal {
+        grid-column: 1 / -1;
+        grid-row: -1;
     }
 
-    /* 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;
+    header.slidingmenu {
         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;
+    header.slidingmenu > input {
+        position: relative;
+        width: 100%;
+        height: 100%;
         margin: 0;
-        margin-left: calc(var(--open-button-max-size) - var(--open-button-size));
-        width: var(--open-button-size);
-        height: var(--open-button-size);
+        z-index: 3;
         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;
+    header.slidingmenu img.button {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 0.3rem;
+        width: 2.4rem;
+        height: 2.4rem;
     }
-    .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;
+    header.slidingmenu img.button {
+        filter: brightness(0);
     }
-    .togglable > label {
-        position: absolute;
-        left: calc(1.2 * var(--open-button-max-size));
-        cursor: pointer;
+    header.slidingmenu > input:hover ~ img.button.open,
+    header.slidingmenu > input:hover ~ .content > img.button.close {
+        filter: none;
     }
-    .togglable > .content {
-        display: block;
+
+    header.slidingmenu > .content {
         position: fixed;
         overflow: auto;
         width: 100vw;
@@ -330,59 +296,90 @@ footer.legal {
         top: 0;
         left: 0;
         margin: 0;
-        background: #dddd;
-        transform-origin: var(--togglable-origin);
-        transform: var(--togglable-transform);
+
+        background: #eeee;
+        color: initial;
+
+        transform-origin: left;
+        transform: translate(-100vw);
         transition: transform 0.5s;
-        z-index: 3;
+        z-index: 1;
+
+        display: grid;
+        grid-template-columns: 3rem 1fr 3.6rem;
+        grid-template-rows: 3.6rem repeat(4, auto);
     }
-    .togglable > input.toggle:checked {
-        display: block;
+    header.slidingmenu > .content > img.button.close {
+        grid-column: 1;
+        grid-row: 1;
         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;
+    header.slidingmenu > .content header.banner {
+        grid-column: 2;
+        grid-row: 1 / 3;
+        justify-self: start;
     }
-    .togglable > input.toggle:checked ~ .content {
-        transform: none;
+    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;
+
+        padding: 0.4rem;
+        font-size: 1rem;
+    }
+    header.slidingmenu > .content > nav.menu,
+    header.slidingmenu > .content > nav.social {
+        grid-column: 2;
     }
 
-    header.banner img {
-        width: 4rem;
-        height: 4rem;
+    header.slidingmenu > .content nav ol,
+    header.slidingmenu > .content nav ul {
+        margin-top: 0.2em;
+        padding-left: 0;
+    }
+    header.slidingmenu > .content > nav.menu li > a {
+        display: block;
+        padding: 0.5em;
+    }
+    header.slidingmenu > .content > nav.menu li.dropdown > a {
+        display: flex;
     }
-    header.banner h1 {
-        font-size: 1.6rem;
+    header.slidingmenu > .content > nav.menu li.dropdown li > a {
+        padding: 0.2em;
+        padding-left: 2em;
     }
 
-    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.slidingmenu > .content > nav.social > ul {
+        display: flex;
+        padding-left: 0;
     }
-    header.menu .content nav {
-        grid-row: 1 / -1;
-        grid-column: 1;
-        padding: 2rem;
+    header.slidingmenu > .content > nav.social > ul > li:not(:first-child) {
+        margin-left: 1em;
     }
-    header.menu .content .lang {
-        grid-row: 2;
-        grid-column: 2;
-        margin: auto;
+    header.slidingmenu > .content > nav.social > ul > li > a {
+        display: flex;
+        align-items: center;
+        padding: 0.5em;
+    }
+    header.slidingmenu > .content > nav.social > ul > li > a > img {
+        width: 2em;
+        height: 2em;
     }
 
-    .social > .content img {
-        width: 3em;
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
+    header.slidingmenu > input:checked {
+        position: fixed;
+        width: 3rem;
+        height: 3rem;
     }
-    .contact {
-        padding: 1em;
+    header.slidingmenu > input:checked ~ .content {
+        transform: none;
+    }
+    header.slidingmenu > input:checked ~ img.button.open {
+        opacity: 0;
     }
 }