Align hint with center of first line of thumbnails

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

1 files changed, 15 insertions, 5 deletions

diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index f732daa..a413d28 100644
--- 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) {