quatuorbellefeuille.com

commit 30b8c9136a6641ba2e838317a604b775960b1ef0
parent 05185dd3df8e2d3a47ada8e30b664ec442bfb3fd
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Fri, 15 Jan 2021 23:55:04 +0100

Fix close button & icon positions

Diffstat:
M
commun.css
 | 
23
+++++++++++++----------

1 file changed, 13 insertions(+), 10 deletions(-)
diff --git 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;