Re-implement togglable menus

6 files changed, 126 insertions, 8 deletions

diff --git a/Makefile b/Makefile
index e60fba9..e00d8ed 100644
--- a/Makefile
+++ b/Makefile
@@ -23,7 +23,7 @@ $(resources): $(OUTDIR)/%: % | $(OUTDIR)
 	cp $< $@
 
 # TODO: optional dependency to .sh template parameters.
-$(pages): $(OUTDIR)/%.html: %.html | $(OUTDIR)
+$(pages): $(OUTDIR)/%.html: %.html template.html | $(OUTDIR)
 	./build.sh $< $@
 
 clean:
diff --git a/close.svg b/close.svg
new file mode 100644
index 0000000..7d5875c
--- /dev/null
+++ b/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
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;
+    }
+}
diff --git a/menu.svg b/menu.svg
new file mode 100644
index 0000000..e8a84a9
--- /dev/null
+++ b/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file
diff --git a/share.svg b/share.svg
new file mode 100644
index 0000000..09b1c7b
--- /dev/null
+++ b/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
\ No newline at end of file
diff --git a/template.html b/template.html
index 18dffff..a544179 100644
--- a/template.html
+++ b/template.html
@@ -2,6 +2,7 @@
 <html lang="fr">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
     <title>{TITLE} - Quatuor Camelot</title>
     <link rel="stylesheet" href="commun.css">
 {STYLESHEETS}
@@ -20,7 +21,8 @@
       <input type="checkbox" class="toggle">
       <img class="button open" src="menu.svg">
       <img class="button close" src="close.svg">
-      <div>
+      <div class="name">Menu</div>
+      <div class="content">
         <nav>
           <ol>
             <li class="dropdown"><a href="quatuor.html">Le quatuor</a>
@@ -48,7 +50,8 @@
       <input type="checkbox" class="toggle">
       <img class="button open" src="share.svg">
       <img class="button close" src="close.svg">
-      <div>
+      <div class="name">Nous contacter</div>
+      <div class="content">
         <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">