Add toggle buttons

Which will remain hidden until we define CSS rules for (max-width:
40em).

1 files changed, 148 insertions, 141 deletions

diff --git a/commun.css b/commun.css
index f05a297..e49d1c8 100644
--- a/commun.css
+++ b/commun.css
@@ -1,22 +1,24 @@
 body {
-    min-height: 100vh;
-    display: grid;
-    grid-template-columns: 2fr 1fr 3fr 1fr 1fr;
-    grid-template-rows: auto 1fr auto;
     margin: 0;
     background-color: #acf;
 }
 
-header.banner {
-    grid-column: 1;
+.current {
+    background-color: white;
+}
+
+header a, .contact a {
+    text-decoration: none;
+}
+
+header a, footer a {
+    color: inherit;
 }
 
 header.banner a {
     display: flex;
     align-items: center;
-    text-decoration: none;
 }
-
 header.banner img {
     width: 10rem;
     filter: brightness(0%);
@@ -34,138 +36,143 @@ header.banner:hover h1 {
     color: #d82;
 }
 
-header.menu {
-    display: grid;
-    grid-column: 3 / -1;
-    grid-template-columns: 3fr 1fr 1fr;
-}
-
-header.menu nav {
-    grid-column: 1;
-    margin-top: 2rem;
-}
-header.menu .lang {
-    grid-column: 3;
-}
-
-nav > ol {
-    display: flex;
-    align-items: center;
-    align-content: stretch;
-    flex-wrap: wrap;
-    padding-left: 0;
-    text-align: center;
-    list-style-type: none;
-}
-
-nav > ol > li {
-    flex: 1;
-}
-
-nav > ol > li > a {
-    display: block;
-    padding: 0.5em 0.1em;
-}
-
-nav li.dropdown {
-    position: relative;
-}
-nav li.dropdown ul {
-    position: absolute;
-    padding-left: 0;
-    width: 100%;
-    text-align: left;
-    background: lightgrey;
-    z-index: 1;
-
-    overflow: hidden;
-    max-height: 0;
-    transition: max-height 0.5s;
-}
-nav li.dropdown:hover ul {
-    /* ⚠ Magic constant: must be big enough to show the whole dropdown,
+@media (min-width: 40em) {
+    .togglable > input.toggle, .togglable > img.button {
+        display: none;
+    }
+
+    body {
+        min-height: 100vh;
+        display: grid;
+        grid-template-columns: 2fr 1fr 3fr 1fr 1fr;
+        grid-template-rows: auto 1fr auto;
+    }
+
+    header.banner {
+        grid-column: 1;
+    }
+
+    header.menu {
+        grid-column: 3 / -1;
+    }
+    header.menu > div {
+        display: grid;
+        grid-template-columns: 3fr 1fr 1fr;
+    }
+
+    header.menu nav {
+        grid-column: 1;
+        margin-top: 2rem;
+    }
+    header.menu .lang {
+        grid-column: 3;
+    }
+
+    nav > ol {
+        display: flex;
+        align-items: center;
+        align-content: stretch;
+        flex-wrap: wrap;
+        padding-left: 0;
+        text-align: center;
+        list-style-type: none;
+    }
+
+    nav > ol > li {
+        flex: 1;
+    }
+
+    nav > ol > li > a {
+        display: block;
+        padding: 0.5em 0.1em;
+    }
+
+    nav li.dropdown {
+        position: relative;
+    }
+    nav li.dropdown ul {
+        position: absolute;
+        padding-left: 0;
+        width: 100%;
+        text-align: left;
+        background: lightgrey;
+        z-index: 1;
+
+        overflow: hidden;
+        max-height: 0;
+        transition: max-height 0.5s;
+    }
+    nav li.dropdown:hover ul {
+        /* ⚠ Magic constant: must be big enough to show the whole dropdown,
        but not too big otherwise the transition will be "delayed". */
-    max-height: 5em;
-}
-nav li.dropdown > ul > li {
-    list-style-type: none;
-}
-nav li.dropdown > ul > li:hover {
-    background: white;
-}
-nav li.dropdown > ul > li a {
-    display: block;       /* Make link span whole containing block. */
-    padding-inline-start: 10%;
-}
-nav li.dropdown > ul > li a img {
-    width: 1em;
-    height: 1em;
-}
-
-.current {
-    background-color: white;
-}
-
-nav li a {
-    text-decoration: none;
-}
-
-.lang {
-    grid-column: 5;
-    background-color: black;
-    border-radius: 50% 50% 50% 0;
-    color: white;
-    padding: 0.5em;
-    margin: auto;
-    margin-top: 3rem;
-}
-
-main {
-    grid-row: 2;
-    grid-column: 1 / -2;
-    padding-left: 4%;
-}
-
-footer.social {
-    grid-row: 2;
-    grid-column: 5;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: sticky;
-    top: 0;
-}
-
-.social img {
-    width: 2em;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-.contact {
-    /* Ideally should be just: */
-    /* writing-mode: sideways-lr; */
-    /* but of course We Can't Have Nice Things. */
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-
-    margin: 0;
-    padding: 1em 0.5em;
-}
-
-.contact a {
-    text-decoration: none;
-}
-
-footer.legal {
-    grid-column: 1 / -1;
-    width: 100%;
-    text-align: center;
-    margin: auto;
-    font-size: 75%;
-}
-
-header a, footer a {
-    color: inherit;
+        max-height: 5em;
+    }
+    nav li.dropdown > ul > li {
+        list-style-type: none;
+    }
+    nav li.dropdown > ul > li:hover {
+        background: white;
+    }
+    nav li.dropdown > ul > li a {
+        display: block;       /* Make link span whole containing block. */
+        padding-inline-start: 10%;
+    }
+    nav li.dropdown > ul > li a img {
+        width: 1em;
+        height: 1em;
+    }
+
+    .lang {
+        grid-column: 5;
+        background-color: black;
+        border-radius: 50% 50% 50% 0;
+        color: white;
+        padding: 0.5em;
+        margin: auto;
+        margin-top: 3rem;
+    }
+
+    main {
+        grid-row: 2;
+        grid-column: 1 / -2;
+        padding-left: 4%;
+    }
+
+    footer.social {
+        grid-row: 2;
+        grid-column: 5;
+        position: sticky;
+        top: 0;
+    }
+
+    footer.social > div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .social img {
+        width: 2em;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+    }
+
+    .contact {
+        /* Ideally should be just: */
+        /* writing-mode: sideways-lr; */
+        /* but of course We Can't Have Nice Things. */
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+
+        margin: 0;
+        padding: 1em 0.5em;
+    }
+
+    footer.legal {
+        grid-column: 1 / -1;
+        width: 100%;
+        text-align: center;
+        margin: auto;
+        font-size: 75%;
+    }
 }