Sidestep an issue with Safari

Can't call it a bug yet; haven't seen the problem documented.

1 files changed, 12 insertions, 11 deletions

diff --git a/commun.css b/commun.css
index a725a5a..a3ab21d 100644
--- a/commun.css
+++ b/commun.css
@@ -231,16 +231,20 @@ footer.legal {
         font-size: 0.8rem;
     }
 
+    /* Ideally, we'd use display: grid to have labels aligned.
+     * Unfortunately, afaict on mobile Safari brainfarts and fails to
+     * 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.
+     */
     .togglable {
-        display: grid;
+        display: flex;
         position: relative;
-        grid-template-columns: 2.4rem auto;
         align-items: center;
         --close-size: 2rem;
     }
     .togglable > input.toggle {
-        z-index: 2;
-        grid-column: 1;
         position: absolute;
         width: var(--height);
         height: var(--height);
@@ -249,8 +253,7 @@ footer.legal {
         cursor: pointer;
     }
     .togglable > img.button.open {
-        grid-column: 1;
-        justify-self: center;
+        padding: calc(0.1 * var(--height));
         width: calc(0.8 * var(--height));
         height: calc(0.8 * var(--height));
         object-fit: contain;
@@ -270,10 +273,8 @@ footer.legal {
         z-index: 4;
     }
     .togglable > label {
-        grid-column: 2;
-        height: 100%;
-        display: flex;
-        align-items: center;
+        position: absolute;
+        left: 2.6rem;
         cursor: pointer;
     }
     .togglable > .content {
@@ -332,7 +333,7 @@ footer.legal {
         margin: auto;
     }
 
-    .social img {
+    .social > .content img {
         width: 3em;
         margin-top: 0.5em;
         margin-bottom: 0.5em;