From fdbf89c3b895bb899dc30642043fa08596fc7111 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Fri, 15 Jan 2021 22:49:46 +0100
Subject: Use <label>s to automatically gain clickable surface

Instead of making the <input>s cover the whole grid.
---
 template.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'template.html')

diff --git a/template.html b/template.html
index a544179..59b9996 100644
--- 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">
-- 
cgit v1.2.3