From faba503e2cab1c61bd922ac92b6cc99001fa5d3f Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Mon, 8 Mar 2021 23:40:47 +0100
Subject: Tweak concert highlight on mobile

---
 "stylesheets/actualit\303\251s.css" | 59 ++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

(limited to 'stylesheets')

diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css"
index 95432dd..9df1ed9 100644
--- "a/stylesheets/actualit\303\251s.css"
+++ "b/stylesheets/actualit\303\251s.css"
@@ -30,6 +30,7 @@ main h1 {
 }
 
 a.event {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -38,10 +39,19 @@ a.event {
     text-decoration: none;
 }
 
+.event img {
+    position: absolute;
+    object-position: center;
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+}
+
 .event .summary {
     font-weight: bold;
     color: white;
     text-align: center;
+    z-index: 1;
 }
 
 .event.canceled {
@@ -53,6 +63,10 @@ a.event {
     content: "ANNULÉ";
     color: red;
 }
+.event.canceled:hover,
+.event.canceled.active {
+    opacity: 1;
+}
 
 .details > .detail {
     display: grid;
@@ -115,16 +129,12 @@ a.event {
         --cell-height: 12em;
     }
 
-    a.event {
-        position: relative;
+    .event .summary {
+        opacity: 0;
+        transition: 0.5s;
     }
 
     .event img {
-        position: absolute;
-        object-position: center;
-        object-fit: cover;
-        height: 100%;
-        width: 100%;
         transition: 0.5s;
     }
 
@@ -134,17 +144,6 @@ a.event {
         filter: grayscale(0.8) brightness(0.4);
     }
 
-    .event .summary {
-        opacity: 0;
-        z-index: 1;
-        transition: 0.5s;
-    }
-
-    .event.canceled:hover,
-    .event.canceled.active {
-        opacity: 1;
-    }
-
     .event:not(.active):hover .summary,
     .event:not(.active):focus-within .summary,
     .event.active .summary {
@@ -158,23 +157,23 @@ a.event {
         --cell-height: 8em;
     }
 
-    .event {
-        position: relative;
+    a.event {
+        align-items: flex-end;
     }
-
-    .event img {
-        object-position: center;
-        object-fit: cover;
-        height: 100%;
-        width: 100%;
+    a.event.active {
+        align-items: stretch;
     }
 
     .event .summary {
-        position: absolute;
-        text-align: center;
-        bottom: 0;
         margin: 0;
-        width: 100%;
         background: #0008;
+        width: 100%;
+    }
+    a.event.active .summary {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        /* Make sure CANCELED block goes above summary. */
+        flex-direction: column;
     }
 }
-- 
cgit v1.2.3