diff options
| -rw-r--r-- | Makefile | 11 | ||||
| -rw-r--r-- | concerts.html | 98 | ||||
| -rw-r--r-- | en/concerts.html | 98 | ||||
| -rw-r--r-- | scripts/concerts.js | 34 | ||||
| -rw-r--r-- | stylesheets/concerts.css | 65 |
5 files changed, 139 insertions, 167 deletions
@@ -26,6 +26,9 @@ images_folders = $(call dirnames,$(images)) stylesheets = $(foreach img,$(shell find stylesheets -type f),$(OUTDIR)/$(img)) stylesheets_folders = $(call dirnames,$(stylesheets)) +scripts = $(foreach img,$(shell find scripts -type f),$(OUTDIR)/$(img)) +scripts_folders = $(call dirnames,$(scripts)) + .PHONY: all clean site all: site @@ -33,9 +36,9 @@ all: site clean: -rm -r $(OUTDIR) -site: $(pages) $(members_pages) $(resources) $(images) $(stylesheets) +site: $(pages) $(members_pages) $(resources) $(images) $(stylesheets) $(scripts) -$(resources) $(images) $(stylesheets): $(OUTDIR)/%: % +$(resources) $(images) $(stylesheets) $(scripts): $(OUTDIR)/%: % cp $< $@ .SECONDEXPANSION: @@ -63,7 +66,7 @@ $(OUTDIR)/en/programs.html: en/programs.in # Our lists of target directories are created from the lists of leaf # resources; some intermediate directories that only hold subdirs do # not appear in these lists. Work around that with -p. -$(OUTDIR) $(languages_folders) $(images_folders) $(stylesheets_folders): +$(OUTDIR) $(languages_folders) $(images_folders) $(stylesheets_folders) $(scripts_folders): mkdir -p $@ -$(resources) $(images) $(stylesheets) $(pages) $(members_pages): | $$(@D) +$(resources) $(images) $(stylesheets) $(scripts) $(pages) $(members_pages): | $$(@D) diff --git a/concerts.html b/concerts.html index c219825..2982ff0 100644 --- a/concerts.html +++ b/concerts.html @@ -2,17 +2,31 @@ <div id="event-list"> <h1>Prochains concerts</h1> <div class="events"> - <a class="event canceled" href="#concert-2021-04-03"> - <img src="images/concerts/dinard.jpg"> - <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"> - <p class="summary">Paris<br>13 juin 2021</p> - </a> + <div class="eventcontainer"> + <a class="event canceled" href="#concert-2021-04-03"> + <img src="images/concerts/dinard.jpg"> + <p class="summary"> + <span class="canceled">ANNULÉ</span> + Dinard<br>3 avril 2021 + </p> + </a> + <div class="credits"> + <span> + <a href="https://www.piqsels.com/fr/public-domain-photo-zxmbk" target="_blank">Piqsels</a> / <a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC0</a> + </span> + </div> + </div> + <div class="eventcontainer"> + <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 class="credits"> + <span> + <a href="https://www.flickr.com/photos/129231073@N06/23414771992/" target="_blank">Fred Romero</a> / <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">CC BY</a> + </span> + </div> + </div> </div> </div> @@ -31,17 +45,7 @@ </ol> <p class="more"> Informations et réservations : - <a href="https://weekenddemusiqueclassique.fr" - target="_blank"> - 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> + <a href="https://weekenddemusiqueclassique.fr" target="_blank">https://weekenddemusiqueclassique.fr</a> </p> </div> <div class="details" id="concert-2021-06-21"> @@ -58,56 +62,14 @@ </ol> <p class="more"> Entrée libre sans réservation, dans la limite des places - disponibles.<br> + disponibles. + </p> + <p> Pour plus d'informations, merci de contacter : <a href="mailto:quatuorbellefeuille@gmail.com">quatuorbellefeuille@gmail.com</a> </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> - <script> - // When JS is enabled, hide concert details by default, and - // allow the user to display concerts selectively. - var detailsStyle = document.createElement('style'); - document.head.appendChild(detailsStyle); - detailsStyle.sheet.insertRule('.details:not(.active) {display:none}'); - - var pHint = document.querySelector('p.hint'); - - var anchor = document.location.hash; - if (anchor.match(/#concert-/)) { - document.querySelector(anchor).classList.add('active'); - document.querySelector(`a[href="${document.location.hash}"]`) - .classList.add('active'); - pHint.style.display = 'none'; - } - document.querySelectorAll('a.event').forEach((link) => { - link.addEventListener('click', function(click) { - if (click.ctrlKey || click.shiftKey) - return; - - var prev = document.querySelector('.details.active'); - if (prev) - 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'); - - pHint.style.display = 'none'; - }); - }); - </script> - + <script src="scripts/concerts.js"></script> </main> diff --git a/en/concerts.html b/en/concerts.html index 0899b71..f6eef1b 100644 --- a/en/concerts.html +++ b/en/concerts.html @@ -2,17 +2,31 @@ <div id="event-list"> <h1>Next concerts</h1> <div class="events"> - <a class="event canceled" href="#concert-2021-04-03"> - <img src="../images/concerts/dinard.jpg"> - <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"> - <p class="summary">Paris<br>13 June 2021</p> - </a> + <div class="eventcontainer"> + <a class="event canceled" href="#concert-2021-04-03"> + <img src="../images/concerts/dinard.jpg"> + <p class="summary"> + <span class="canceled">CANCELED</span> + Dinard<br>3 April 2021 + </p> + </a> + <div class="credits"> + <span> + <a href="https://www.piqsels.com/fr/public-domain-photo-zxmbk" target="_blank">Piqsels</a> / <a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC0</a> + </span> + </div> + </div> + <div class="eventcontainer"> + <a class="event" href="#concert-2021-06-21"> + <img src="../images/concerts/pantin.jpg"> + <p class="summary">Paris<br>13 June 2021</p> + </a> + <div class="credits"> + <span> + <a href="https://www.flickr.com/photos/129231073@N06/23414771992/" target="_blank">Fred Romero</a> / <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">CC BY</a> + </span> + </div> + </div> </div> </div> @@ -31,17 +45,7 @@ </ol> <p class="more"> Information and reservation : - <a href="https://weekenddemusiqueclassique.fr" - target="_blank"> - https://weekenddemusiqueclassique.fr - </a> - </p> - <p class="photo-credits"> - Photo provided by - <a href="https://www.piqsels.com/fr/public-domain-photo-zxmbk"> - Piqsels - </a> - / <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a> + <a href="https://weekenddemusiqueclassique.fr" target="_blank">https://weekenddemusiqueclassique.fr</a> </p> </div> <div class="details" id="concert-2021-06-21"> @@ -58,56 +62,14 @@ </ol> <p class="more"> Free admission without reservation, subject to the number of - available places.<br> + available places. + </p> + <p> For more information, please contact <a href="mailto:quatuorbellefeuille@gmail.com">quatuorbellefeuille@gmail.com</a> </p> - <p class="photo-credits"> - Photo provided by - <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> - <script> - // When JS is enabled, hide concert details by default, and - // allow the user to display concerts selectively. - var detailsStyle = document.createElement('style'); - document.head.appendChild(detailsStyle); - detailsStyle.sheet.insertRule('.details:not(.active) {display:none}'); - - var pHint = document.querySelector('p.hint'); - - var anchor = document.location.hash; - if (anchor.match(/#concert-/)) { - document.querySelector(anchor).classList.add('active'); - document.querySelector(`a[href="${document.location.hash}"]`) - .classList.add('active'); - pHint.style.display = 'none'; - } - document.querySelectorAll('a.event').forEach((link) => { - link.addEventListener('click', function(click) { - if (click.ctrlKey || click.shiftKey) - return; - - var prev = document.querySelector('.details.active'); - if (prev) - 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'); - - pHint.style.display = 'none'; - }); - }); - </script> - + <script src="../scripts/concerts.js"></script> </main> diff --git a/scripts/concerts.js b/scripts/concerts.js new file mode 100644 index 0000000..fb45819 --- /dev/null +++ b/scripts/concerts.js @@ -0,0 +1,34 @@ +// When JS is enabled, hide concert details by default, and allow the +// user to display concerts selectively. +var detailsStyle = document.createElement('style'); +document.head.appendChild(detailsStyle); +detailsStyle.sheet.insertRule('.details:not(.active) {display:none}'); + +var pHint = document.querySelector('p.hint'); + +var anchor = document.location.hash; +if (anchor.match(/#concert-/)) { + document.querySelector(anchor).classList.add('active'); + document.querySelector(`a[href="${document.location.hash}"]`).parentNode + .classList.add('active'); + pHint.style.display = 'none'; +} +document.querySelectorAll('a.event').forEach((link) => { + link.addEventListener('click', function(click) { + if (click.ctrlKey || click.shiftKey) + return; + + var prev = document.querySelector('.details.active'); + if (prev) + prev.classList.remove('active'); + var id = link.attributes['href'].value; + document.querySelector(id).classList.add('active'); + + prev = document.querySelector('.eventcontainer.active'); + if (prev) + prev.classList.remove('active'); + link.parentNode.classList.add('active'); + + pHint.style.display = 'none'; + }); +}); diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css index b03bdc2..f732daa 100644 --- a/stylesheets/concerts.css +++ b/stylesheets/concerts.css @@ -29,8 +29,11 @@ main h1 { grid-gap: 0.8em; } -a.event { +.eventcontainer { position: relative; +} + +a.event { display: flex; justify-content: center; align-items: center; @@ -40,7 +43,6 @@ a.event { } .event img { - position: absolute; object-position: center; object-fit: cover; height: 100%; @@ -48,10 +50,24 @@ a.event { } .event .summary { + position: absolute; font-weight: bold; color: white; text-align: center; - z-index: 1; +} + +.credits::before { + content: '© '; +} +.credits { + position: absolute; + top: 0; + right: 0; + color: white; + background: #0008; + border-bottom-left-radius: 0.5em; + padding: 0 0.2em; + font-size: small; } .event.canceled { @@ -63,7 +79,7 @@ a.event { color: red; } .event.canceled:hover, -.event.canceled.active { +.eventcontainer.active .event.canceled { opacity: 1; } @@ -97,10 +113,6 @@ a.event { list-style: none; } -.photo-credits { - font-size: x-small; -} - .details.canceled > .canceled { color: red; } @@ -135,17 +147,21 @@ a.event { transition: 0.5s; } - .event:not(.active):hover img, - .event:not(.active):focus-within img, - .event.active img { + .eventcontainer:not(.active):hover img, + .eventcontainer:not(.active):focus-within img, + .eventcontainer.active img { filter: grayscale(0.8) brightness(0.4); } - .event:not(.active):hover .summary, - .event:not(.active):focus-within .summary, - .event.active .summary { + .eventcontainer:not(.active):hover .summary, + .eventcontainer:not(.active):focus-within .summary, + .eventcontainer.active .summary { opacity: 1; } + + .credits:not(:hover) > span:only-child { + display: none; + } } @media (max-width: 40em) { @@ -154,23 +170,18 @@ a.event { --cell-height: 8em; } - a.event { - align-items: flex-end; - } - a.event.active { - align-items: stretch; - } - .event .summary { + align-self: flex-end; + + display: flex; + /* Make sure CANCELED block goes above summary. */ + flex-direction: column; + width: 100%; margin: 0; background: #0008; - width: 100%; } - a.event.active .summary { - display: flex; - align-content: center; + .eventcontainer.active > a.event .summary { + height: 100%; justify-content: center; - /* Make sure CANCELED block goes above summary. */ - flex-direction: column; } } |