diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-03-13 10:22:52 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2021-03-13 10:22:52 +0100 |
| commit | 111e4ac7c10dd63b27a6a24047743b2fb82037ee (patch) | |
| tree | 57f3a0065f7f545b23584679f322636c2908a8ea | |
| parent | 3c89b21fbdf014d22fafbfa9d630b68ea3f4855d (diff) | |
| download | quatuorbellefeuille.com-111e4ac7c10dd63b27a6a24047743b2fb82037ee.tar.xz | |
Translate "canceled" marker
Also move away from ::before to comply with WCAG 1.3.1, specifically
by avoiding F87.
https://www.w3.org/TR/WCAG21/#info-and-relationships
https://www.w3.org/WAI/WCAG21/Techniques/failures/F87
| -rw-r--r-- | concerts.html | 6 | ||||
| -rw-r--r-- | en/concerts.html | 6 | ||||
| -rw-r--r-- | stylesheets/concerts.css | 7 |
3 files changed, 12 insertions, 7 deletions
diff --git a/concerts.html b/concerts.html index 357e3c1..eec368a 100644 --- a/concerts.html +++ b/concerts.html @@ -4,7 +4,10 @@ <div class="events"> <a class="event canceled" href="#concert-2021-04-03"> <img src="images/concerts/dinard.jpg"> - <p class="summary">Dinard<br>3 avril 2021</p> + <p class="summary"> + <span class="canceled">ANNULÉ</span> + Dinard<br>3 avril 2021 + </p> </a> <a class="event" href="#concert-2021-06-21"> <img src="images/concerts/pantin.jpg"> @@ -20,6 +23,7 @@ <p class="hint">Cliquez sur un concert pour obtenir plus d'informations.</p> <div class="details canceled" id="concert-2021-04-03"> + <p class="canceled">ANNULÉ</p> <p class="detail date">Samedi 3 avril 2021</p> <p class="detail time">20h00</p> <p class="detail place">Dinard</p> diff --git a/en/concerts.html b/en/concerts.html index 6493058..2bfe2eb 100644 --- a/en/concerts.html +++ b/en/concerts.html @@ -4,7 +4,10 @@ <div class="events"> <a class="event canceled" href="#concert-2021-04-03"> <img src="../images/concerts/dinard.jpg"> - <p class="summary">Dinard<br>3 April 2021</p> + <p class="summary"> + <span class="canceled">CANCELED</span> + Dinard<br>3 April 2021 + </p> </a> <a class="event" href="#concert-2021-06-21"> <img src="../images/concerts/pantin.jpg"> @@ -20,6 +23,7 @@ <p class="hint">Click on a concert to obtain more information.</p> <div class="details canceled" id="concert-2021-04-03"> + <p class="canceled">CANCELED</p> <p class="detail date">Saturday April 3, 2021</p> <p class="detail time">08:00 pm</p> <p class="detail place">Dinard</p> diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css index 9df1ed9..b03bdc2 100644 --- a/stylesheets/concerts.css +++ b/stylesheets/concerts.css @@ -58,9 +58,8 @@ a.event { opacity: 50%; transition: 0.5s; } -.event.canceled .summary::before { +.event.canceled .summary .canceled { display: block; - content: "ANNULÉ"; color: red; } .event.canceled:hover, @@ -102,9 +101,7 @@ a.event { font-size: x-small; } -.details.canceled::before { - display: block; - content: "ANNULÉ"; +.details.canceled > .canceled { color: red; } |