quatuorbellefeuille.com

commit 0b5df2b335f8caa2cf3fb05b74659fba44670586
parent 66abe25f9c13bf7f1b9f6ba67d8a7e88c4b1a87c
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sat, 13 Feb 2021 22:34:59 +0100

Add first concert

Plus some emojis.  And center concert summary.

Diffstat:
M
actualités.html
 | 
246
++++++++-----------------------------------------------------------------------
A
images/concerts/dinard.jpg
 | 
0

M
stylesheets/actualités.css
 | 
35
+++++++++++++++++++++++++++++++++++

3 files changed, 60 insertions(+), 221 deletions(-)
diff --git a/actualités.html b/actualités.html
@@ -3,235 +3,39 @@
     <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 href="#concert-2021-04-03">
+          <img src="images/concerts/dinard.jpg">
+          <p class="summary">Dinard<br>3 avril 2021</p>
         </a>
       </div>
     </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>
+    <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>
-      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>
-      </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>
-    </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>
-      </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">
+        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>
+      </p>
     </div>
   </div>
 
@@ -243,9 +47,9 @@
     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) => {
         link.addEventListener('click', function(click) {
             if (click.ctrlKey || click.shiftKey)
diff --git a/images/concerts/dinard.jpg b/images/concerts/dinard.jpg
Binary files differ.
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
@@ -37,6 +37,41 @@
 .event .summary {
     font-weight: bold;
     color: white;
+    text-align: center;
+}
+
+.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) {