diff options
| -rw-r--r-- | actualités.html | 4 | ||||
| -rw-r--r-- | stylesheets/actualités.css | 26 |
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 { |