Handle canceled events

2 files changed, 28 insertions, 2 deletions

diff --git a/actualités.html b/actualités.html
index f8b5e11..fd5c5f2 100644
--- 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
index bb6b3f8..95432dd 100644
--- 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 {