quatuorbellefeuille.com

commit fdbf89c3b895bb899dc30642043fa08596fc7111
parent 213837e448a92bbb438887e0cbfa5c612ef14c13
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Fri, 15 Jan 2021 22:49:46 +0100

Use <label>s to automatically gain clickable surface

Instead of making the <input>s cover the whole grid.

Diffstat:
M
commun.css
 | 
15
++++++++++-----
M
template.html
 | 
8
++++----

2 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/commun.css b/commun.css
@@ -37,7 +37,7 @@ header.banner:hover h1 {
 @media (min-width: 40em) {
     .togglable > input.toggle,
     .togglable > img.button,
-    .togglable > .name {
+    .togglable > label {
         display: none;
     }
 
@@ -223,15 +223,17 @@ header.banner:hover h1 {
     }
     .togglable > input.toggle {
         z-index: 2;
-        grid-column: 1 / -1;
+        grid-column: 1;
         position: absolute;
-        width: 100%;
-        height: 100%;
+        width: 2rem;
+        height: 2rem;
         margin: 0;
         opacity: 0;
     }
     .togglable > img.button.open {
         grid-column: 1;
+        position: absolute;
+        left: 0.2rem;
         width: 1.6rem;
         height: 1.6rem;
         object-fit: contain;
@@ -249,8 +251,11 @@ header.banner:hover h1 {
         transition: transform 0.5s;
         z-index: 4;
     }
-    .togglable > .name {
+    .togglable > label {
         grid-column: 2;
+        height: 100%;
+        display: flex;
+        align-items: center;
     }
     .togglable > .content {
         display: block;
diff --git a/template.html b/template.html
@@ -18,10 +18,10 @@
     </header>
 
     <header class="menu togglable">
-      <input type="checkbox" class="toggle">
+      <input type="checkbox" class="toggle" id="menu">
       <img class="button open" src="menu.svg">
       <img class="button close" src="close.svg">
-      <div class="name">Menu</div>
+      <label for="menu">Menu</label>
       <div class="content">
         <nav>
           <ol>
@@ -47,10 +47,10 @@
 {MAIN}
 
     <footer class="social togglable">
-      <input type="checkbox" class="toggle">
+      <input type="checkbox" class="toggle" id="social">
       <img class="button open" src="share.svg">
       <img class="button close" src="close.svg">
-      <div class="name">Nous contacter</div>
+      <label for="social">Nous contacter</label>
       <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">