Move credits closer to photos in concerts page

5 files changed, 139 insertions, 167 deletions

diff --git a/Makefile b/Makefile
index bbec445..7431b64 100644
--- a/Makefile
+++ b/Makefile
@@ -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;
     }
 }