Merge branch 'actus-highlight-current'

4 files changed, 109 insertions, 228 deletions

diff --git a/actualités.html b/actualités.html
index 70ccce8..3c0bbfb 100644
--- a/actualités.html
+++ b/actualités.html
@@ -2,236 +2,64 @@
   <div id="event-list">
     <h1>Prochains concerts</h1>
     <div class="events">
-      <div class="event">
-        <a href="#concert-8">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
-      <div class="event">
-        <a href="#concert-7">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
-      <div class="event">
-        <a href="#concert-6">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
-      <div class="event">
-        <a href="#concert-5">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
+      <a class="event" href="#concert-2021-04-03">
+        <img src="images/concerts/dinard.jpg">
+        <p class="summary">Dinard<br>3 avril 2021</p>
+      </a>
+      <a class="event" href="#concert-2021-06-21">
+        <img src="images/concerts/pantin.jpg">
+        <p class="summary">Paris<br>13 juin 2021</p>
+      </a>
     </div>
     <h1>Concerts passés</h1>
     <div class="events">
-      <div class="event">
-        <a href="#concert-4">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
-      <div class="event">
-        <a href="#concert-3">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
-      <div class="event">
-        <a href="#concert-2">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
-      <div class="event">
-        <a href="#concert-1">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-        </a>
-      </div>
     </div>
   </div>
 
   <div id="event-details">
-    <div class="details" id="concert-8">
-      <h1>Concert 8</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-      </ol>
-      <h2>Salle</h2>
-      42 Place de l'Endroit
-      01337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 108¤</p>
-    </div>
-    <div class="details" id="concert-7">
-      <h1>Concert 7</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-      </ol>
-      <h2>Salle</h2>
-      43 Place de l'Endroit
-      02337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 107¤</p>
-    </div>
-    <div class="details" id="concert-6">
-      <h1>Concert 6</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-      </ol>
-      <h2>Salle</h2>
-      44 Place de l'Endroit
-      03337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 106¤</p>
-    </div>
-    <div class="details" id="concert-5">
-      <h1>Concert 5</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-      </ol>
-      <h2>Salle</h2>
-      45 Place de l'Endroit
-      04337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 105¤</p>
-    </div>
-    <div class="details" id="concert-4">
-      <h1>Concert 4</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-      </ol>
-      <h2>Salle</h2>
-      46 Place de l'Endroit
-      05337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 104¤</p>
-    </div>
-    <div class="details" id="concert-3">
-      <h1>Concert 3</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-      </ol>
-      <h2>Salle</h2>
-      47 Place de l'Endroit
-      06337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 103¤</p>
-    </div>
-    <div class="details" id="concert-2">
-      <h1>Concert 2</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
+    <div class="details" 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>
+      <ol class="detail program">
+        <li>Haydn quatuor op.76 n°1​</li>
+        <li>Brahms quatuor n°7, op.59 n°1​</li>
+        <li>Ravel quatuor à cordes</li>
       </ol>
-      <h2>Salle</h2>
-      48 Place de l'Endroit
-      07337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 102¤</p>
+      <p class="more">
+        Informations et réservations :
+        <a href="https://weekenddemusiqueclassique.fr">
+          https://weekenddemusiqueclassique.fr
+        </a>
+      </p>
+      <p class="photo-credits">
+        Photo fournie par
+        <a href="https://www.piqsels.com/fr/public-domain-photo-zxmbk">
+          Piqsels
+        </a>
+        / <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>
+      </p>
     </div>
-    <div class="details" id="concert-1">
-      <h1>Concert 1</h1>
-      <h2>Programme</h2>
-      <ol>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Entracte</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
-        <li>Un morceau</li>
+    <div class="details" id="concert-2021-06-21">
+      <p class="detail date">Dimanche 13 juin 2021</p>
+      <p class="detail time">15h00</p>
+      <p class="detail place">
+        Église Sainte-Claire d’Assise<br>
+        Place de la Porte-de-Pantin<br>
+        75019 Paris
+      </p>
+      <ol class="detail program">
+        <li>Haydn quatuor op.76 n°1​</li>
+        <li>Beethoven quatuor n°7, op.59 n°1</li>
       </ol>
-      <h2>Salle</h2>
-      49 Place de l'Endroit
-      08337 La-Ville-du-Coin
-      <h2>Programmation</h2>
-      <p><a href="http://perdu.com">Site du programmateur</a></p>
-      <p>Conditions de réservation : tenue correcte, vaccins à jour</p>
-      <p>Tarif 1 place : 101¤</p>
+      <p class="more">Entrée libre</p>
+      <p class="photo-credits">
+        Photo fournie par
+        <a href="https://www.flickr.com/photos/129231073@N06/23414771992/">
+          Fred Romero
+        </a>
+        / <a href="https://creativecommons.org/licenses/by/2.0/">CC BY</a>
+      </p>
     </div>
   </div>
 
@@ -243,10 +71,12 @@
     detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
 
     var anchor = document.location.hash;
-    if (anchor.match(/#concert-[0-9]/))
+    if (anchor.match(/#concert-/)) {
         document.querySelector(anchor).classList.add('active');
-
-    document.querySelectorAll('.event a').forEach((link) => {
+        document.querySelector(`a[href="${document.location.hash}"]`)
+            .classList.add('active');
+    }
+    document.querySelectorAll('a.event').forEach((link) => {
         link.addEventListener('click', function(click) {
             if (click.ctrlKey || click.shiftKey)
                 return;
@@ -256,6 +86,12 @@
                 prev.classList.remove('active');
             var id = link.attributes['href'].value;
             document.querySelector(id).classList.add('active');
+
+            prev = document.querySelector('a.event.active');
+            if (prev) {
+                prev.classList.remove('active');
+            }
+            link.classList.add('active');
         });
     });
   </script>
diff --git a/images/concerts/dinard.jpg b/images/concerts/dinard.jpg
new file mode 100644
index 0000000..bc46720
--- /dev/null
+++ b/images/concerts/dinard.jpg
diff --git a/images/concerts/pantin.jpg b/images/concerts/pantin.jpg
new file mode 100644
index 0000000..a8fa017
--- /dev/null
+++ b/images/concerts/pantin.jpg
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
index 25ec656..ee1be86 100644
--- a/stylesheets/actualités.css
+++ b/stylesheets/actualités.css
@@ -21,11 +21,11 @@
 .events {
     display: grid;
     grid-auto-rows: var(--cell-height);
-    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr));
     grid-gap: 0.8em;
 }
 
-.event a {
+a.event {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -37,6 +37,47 @@
 .event .summary {
     font-weight: bold;
     color: white;
+    text-align: center;
+}
+
+#event-details {
+    /* Align with photos; #event-list h1 has font-size 2em and margin
+     * .67em; browsers default line-height to "roughly 1.2". */
+    margin-top: calc(2*0.67em + 2*1.2em);
+}
+
+.details > .detail {
+    display: grid;
+    grid-template-columns: 2em 1fr;
+}
+
+.detail.date::before {
+    content: "📅";
+}
+.detail.time::before {
+    content: "🕗";
+}
+.detail.place::before {
+    content: "📌";
+}
+.detail.program::before {
+    content: "🎼";
+}
+
+.details > .detail::before {
+    grid-column: 1;
+}
+.details > .detail > * {
+    grid-column: 2;
+}
+
+.detail.program {
+    padding-left: 0;
+    list-style: none;
+}
+
+.photo-credits {
+    font-size: x-small;
 }
 
 @media (min-width: 40em) {
@@ -55,7 +96,7 @@
         --cell-height: 12em;
     }
 
-    .event a {
+    a.event {
         position: relative;
     }
 
@@ -68,7 +109,9 @@
         transition: 0.5s;
     }
 
-    .event:hover img {
+    .event:not(.active):hover img,
+    .event:not(.active):focus-within img,
+    .event.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
@@ -78,7 +121,9 @@
         transition: 0.5s;
     }
 
-    .event:hover .summary {
+    .event:not(.active):hover .summary,
+    .event:not(.active):focus-within .summary,
+    .event.active .summary {
         opacity: 1;
     }
 }