Tweak concert highlight on mobile

1 files changed, 29 insertions, 30 deletions

diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
index 95432dd..9df1ed9 100644
--- a/stylesheets/actualités.css
+++ b/stylesheets/actualités.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;
     }
 }