quatuorbellefeuille.com

commit 75ac34ffa43f47bfc43d48d2e9d59334b30e808b
parent 67dd63d1a25e19a1623f0303ca77f6078da95265
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun, 14 Mar 2021 09:58:10 +0100

Align hint with center of first line of thumbnails

Not 100% satisfied with how things turn out when JS is disabled, but
oh well.

Diffstat:
M
stylesheets/concerts.css
 | 
20
+++++++++++++++-----

1 file changed, 15 insertions(+), 5 deletions(-)
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
@@ -124,6 +124,11 @@ a.event {
 
 @media (min-width: 40em) {
     main {
+        /* Define thumbnail dimension here so that we can align stuff in
+         * #event-details. */
+        --cell-width: 14em;
+        --cell-height: 12em;
+
         display: grid;
         grid-template-columns: 60% 40%;
     }
@@ -133,11 +138,6 @@ a.event {
         padding-right: 1em;
     }
 
-    .events {
-        --cell-width: 14em;
-        --cell-height: 12em;
-    }
-
     .event .summary {
         opacity: 0;
         transition: 0.5s;
@@ -162,6 +162,16 @@ a.event {
     .credits:not(:hover) > span:only-child {
         display: none;
     }
+
+    /* Try to align with center of thumbnails. */
+    #event-details > p.hint {
+        margin-top: calc(
+            /* h1: 1.4em (commun.css) with 2*.67em margins (default) */
+            1.4 * (1em + 2*.67em)
+            /* Half of grid height */
+            + var(--cell-height) / 2
+        );
+    }
 }
 
 @media (max-width: 40em) {