Add toggle buttons

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

2 files changed, 185 insertions, 168 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%;
+    }
 }
diff --git a/template.html b/template.html
index b3e712c..18dffff 100644
--- a/template.html
+++ b/template.html
@@ -16,38 +16,48 @@
       </a>
     </header>
 
-    <header class="menu">
-      <nav>
-        <ol>
-          <li class="dropdown"><a href="quatuor.html">Le quatuor</a>
-            <ul>
-              <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
-              <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
-              <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
-              <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
-            </ul>
-          </li>
-          <li><a href="actualités.html">Actualités</a></li>
-          <li><a href="programmes.html">Programmes</a></li>
-          <li><a href="gallerie.html">Gallerie</a></li>
-        </ol>
-      </nav>
-      <div class="lang">
-        EN
+    <header class="menu togglable">
+      <input type="checkbox" class="toggle">
+      <img class="button open" src="menu.svg">
+      <img class="button close" src="close.svg">
+      <div>
+        <nav>
+          <ol>
+            <li class="dropdown"><a href="quatuor.html">Le quatuor</a>
+              <ul>
+                <li><a href="vlad.html"><img src="https://static.wikia.nocookie.net/goldensun/images/8/87/Isaac2.gif">Vlad</a></li>
+                <li><a href="garet.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3e/Garet_icon.gif">Garet</a></li>
+                <li><a href="ivan.html"><img src="https://static.wikia.nocookie.net/goldensun/images/3/3d/Ivan_platinum.gif">Ivan</a></li>
+                <li><a href="sofia.html"><img src="https://static.wikia.nocookie.net/goldensun/images/4/43/Mia.gif">Sofia</a></li>
+              </ul>
+            </li>
+            <li><a href="actualités.html">Actualités</a></li>
+            <li><a href="programmes.html">Programmes</a></li>
+            <li><a href="gallerie.html">Gallerie</a></li>
+          </ol>
+        </nav>
+        <div class="lang">
+          EN
+        </div>
       </div>
     </header>
 
 {MAIN}
 
-    <footer class="social">
-      <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
-      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg">
-      <a href="feed.xml">
-        <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg">
-      </a>
-      <p class="contact">
-        <a href="contact.html">Contact</a>
-      </p>
+    <footer class="social togglable">
+      <input type="checkbox" class="toggle">
+      <img class="button open" src="share.svg">
+      <img class="button close" src="close.svg">
+      <div>
+        <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg">
+        <a href="feed.xml">
+          <img src="https://upload.wikimedia.org/wikipedia/en/4/43/Feed-icon.svg">
+        </a>
+        <p class="contact">
+          <a href="contact.html">Contact</a>
+        </p>
+      </div>
     </footer>
 
     <footer class="legal">