Use <label>s to automatically gain clickable surface

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

1 files changed, 10 insertions, 5 deletions

diff --git a/commun.css b/commun.css
index 2f51778..4daa0b0 100644
--- 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;