diff options
| -rw-r--r-- | actualités.html | 246 | ||||
| -rw-r--r-- | images/concerts/dinard.jpg | bin | 0 -> 548213 bytes | |||
| -rw-r--r-- | stylesheets/actualités.css | 35 |
3 files changed, 60 insertions, 221 deletions
diff --git a/actualités.html b/actualités.html index 70ccce8..81a70e3 100644 --- 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 differnew file mode 100644 index 0000000..bc46720 --- /dev/null +++ b/images/concerts/dinard.jpg diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css index ce77f74..bb11e09 100644 --- 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) { |
