Move credits closer to photos in concerts page

1 files changed, 30 insertions, 68 deletions

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>