quatuorbellefeuille.com

commit f00417bf89c42ed947012ebe33a7555e54d53d2c
parent d6071702bbd3aa151d8f3f9ab166db5bad0eabbe
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun,  7 Mar 2021 19:32:48 +0100

Handle canceled events

Diffstat:
M
actualités.html
 | 
4
++--
M
stylesheets/actualités.css
 | 
26
++++++++++++++++++++++++++

2 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/actualités.html b/actualités.html
@@ -2,7 +2,7 @@
   <div id="event-list">
     <h1>Prochains concerts</h1>
     <div class="events">
-      <a class="event" href="#concert-2021-04-03">
+      <a class="event canceled" href="#concert-2021-04-03">
         <img src="images/concerts/dinard.jpg">
         <p class="summary">Dinard<br>3 avril 2021</p>
       </a>
@@ -19,7 +19,7 @@
   <div id="event-details">
     <p>Cliquez sur un concert pour obtenir plus d'informations.</p>
 
-    <div class="details" id="concert-2021-04-03">
+    <div class="details canceled" id="concert-2021-04-03">
       <p class="detail date">Samedi 3 avril 2021</p>
       <p class="detail time">20h00</p>
       <p class="detail place">Dinard</p>
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
@@ -44,6 +44,16 @@ a.event {
     text-align: center;
 }
 
+.event.canceled {
+    opacity: 50%;
+    transition: 0.5s;
+}
+.event.canceled .summary::before {
+    display: block;
+    content: "ANNULÉ";
+    color: red;
+}
+
 .details > .detail {
     display: grid;
     grid-template-columns: 2em 1fr;
@@ -78,6 +88,17 @@ a.event {
     font-size: x-small;
 }
 
+.details.canceled::before {
+    display: block;
+    content: "ANNULÉ";
+    color: red;
+}
+
+.details.canceled .detail,
+.details.canceled .more {
+    opacity: 50%;
+}
+
 @media (min-width: 40em) {
     main {
         display: grid;
@@ -119,6 +140,11 @@ a.event {
         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 {