Try to give meaningful names to stuff

1 files changed, 24 insertions, 22 deletions

diff --git a/commun.css b/commun.css
index a3ab21d..7d7c5a4 100644
--- a/commun.css
+++ b/commun.css
@@ -189,9 +189,6 @@ footer.legal {
 
 @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;
@@ -219,13 +216,13 @@ footer.legal {
     }
 
     header.menu {
-        --height: 2.4rem;
+        --open-button-size: 2.4rem;
     }
     header.menu > label {
         font-size: 1.2rem;
     }
     footer.social {
-        --height: 1.8rem;
+        --open-button-size: 1.8rem;
     }
     footer.social > label {
         font-size: 0.8rem;
@@ -236,36 +233,41 @@ footer.legal {
      * move the input to its fixed top-right position when it is
      * checked; instead it moves it… somewhere…
      *
-     * Therefore, use display: flex and absolute positions insteaad.
+     * Use display: flex, absolute positions, and margins instead.
      */
     .togglable {
         display: flex;
         position: relative;
         align-items: center;
-        --close-size: 2rem;
+        --open-button-max-size: 2.4rem;
+        --close-button-size: 2rem;
+        --togglable-origin: left;
+        --togglable-transform: translate(-100vw);
     }
     .togglable > input.toggle {
         position: absolute;
-        width: var(--height);
-        height: var(--height);
         margin: 0;
+        margin-left: calc(var(--open-button-max-size) - var(--open-button-size));
+        width: var(--open-button-size);
+        height: var(--open-button-size);
         opacity: 0;
         cursor: pointer;
     }
     .togglable > img.button.open {
-        padding: calc(0.1 * var(--height));
-        width: calc(0.8 * var(--height));
-        height: calc(0.8 * var(--height));
+        margin-left: calc(var(--open-button-max-size) - var(--open-button-size));
+        padding: calc(0.1 * var(--open-button-size));
+        width: calc(0.8 * var(--open-button-size));
+        height: calc(0.8 * var(--open-button-size));
         object-fit: contain;
         object-position: center;
     }
     .togglable > img.button.close {
         display: block;
         position: fixed;
-        top: calc(var(--close-size) / 2);
-        right: calc(var(--close-size) / 2);
-        width: var(--close-size);
-        height: var(--close-size);
+        top: calc(var(--close-button-size) / 2);
+        right: calc(var(--close-button-size) / 2);
+        width: var(--close-button-size);
+        height: var(--close-button-size);
         margin: 0;
         transform-origin: var(--togglable-origin);
         transform: var(--togglable-transform);
@@ -274,7 +276,7 @@ footer.legal {
     }
     .togglable > label {
         position: absolute;
-        left: 2.6rem;
+        left: calc(1.2 * var(--open-button-max-size));
         cursor: pointer;
     }
     .togglable > .content {
@@ -295,10 +297,10 @@ footer.legal {
     .togglable > input.toggle:checked {
         display: block;
         position: fixed;
-        top: calc(var(--close-size) / 2);
-        right: calc(var(--close-size) / 2);
-        width: var(--close-size);
-        height: var(--close-size);
+        top: calc(var(--close-button-size) / 2);
+        right: calc(var(--close-button-size) / 2);
+        width: var(--close-button-size);
+        height: var(--close-button-size);
         z-index: 5;
     }
     .togglable > input.toggle:checked ~ img.button.close {
@@ -318,7 +320,7 @@ footer.legal {
 
     header.menu .content {
         display: grid;
-        --cell-size: calc(var(--close-size) * 2);
+        --cell-size: calc(var(--close-button-size) * 2);
         grid-template-columns: auto var(--cell-size);
         grid-template-rows: var(--cell-size) var(--cell-size) auto;
     }