From 75ac34ffa43f47bfc43d48d2e9d59334b30e808b Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 14 Mar 2021 09:58:10 +0100
Subject: Align hint with center of first line of thumbnails

Not 100% satisfied with how things turn out when JS is disabled, but
oh well.
---
 stylesheets/concerts.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'stylesheets')

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) {
-- 
cgit v1.2.3