Fix close button & icon positions

1 files changed, 13 insertions, 10 deletions

diff --git a/commun.css b/commun.css
index 5e7e504..3eacaf3 100644
--- a/commun.css
+++ b/commun.css
@@ -237,6 +237,7 @@ footer.legal {
         position: relative;
         grid-template-columns: 2.4rem auto;
         align-items: center;
+        --close-size: 2rem;
     }
     .togglable > input.toggle {
         z-index: 2;
@@ -258,10 +259,11 @@ footer.legal {
     .togglable > img.button.close {
         display: block;
         position: fixed;
-        top: 1rem;
-        right: 1rem;
-        width: 2rem;
-        height: 2rem;
+        top: calc(var(--close-size) / 2);
+        right: calc(var(--close-size) / 2);
+        width: var(--close-size);
+        height: var(--close-size);
+        margin: 0;
         transform-origin: var(--togglable-origin);
         transform: var(--togglable-transform);
         transition: transform 0.5s;
@@ -291,10 +293,10 @@ footer.legal {
     .togglable > input.toggle:checked {
         display: block;
         position: fixed;
-        top: 1rem;
-        right: 1rem;
-        width: 1.5rem;
-        height: 1.5rem;
+        top: calc(var(--close-size) / 2);
+        right: calc(var(--close-size) / 2);
+        width: var(--close-size);
+        height: var(--close-size);
         z-index: 5;
     }
     .togglable > input.toggle:checked ~ img.button.close {
@@ -314,8 +316,9 @@ footer.legal {
 
     header.menu .content {
         display: grid;
-        grid-template-columns: auto 4rem;
-        grid-template-rows: 4rem 4rem auto;
+        --cell-size: calc(var(--close-size) * 2);
+        grid-template-columns: auto var(--cell-size);
+        grid-template-rows: var(--cell-size) var(--cell-size) auto;
     }
     header.menu .content nav {
         grid-row: 1 / -1;