Rename some CSS classes

Also fix JS while at it 😗🎵

3 files changed, 24 insertions, 26 deletions

diff --git a/concerts.html b/concerts.html
index 5c1eddc..c9fd82a 100644
--- a/concerts.html
+++ b/concerts.html
@@ -2,10 +2,8 @@
   <div id="event-list">
     <h1>Prochains concerts</h1>
     <div class="events">
-      <!-- TODO: rename those classes; "eventcontainer" should be
-      "event", "event" should be "eventthumbnail". -->
-      <div class="eventcontainer canceled">
-        <a class="event" href="#concert-2021-04-03">
+      <div class="event canceled">
+        <a class="thumbnail" href="#concert-2021-04-03">
           <img src="images/concerts/dinard.jpg">
           <p class="summary">
             <span class="canceled">ANNULÉ</span>
@@ -18,8 +16,8 @@
           </span>
         </div>
       </div>
-      <div class="eventcontainer">
-        <a class="event" href="#concert-2021-06-21">
+      <div class="event">
+        <a class="thumbnail" href="#concert-2021-06-21">
           <img src="images/concerts/pantin.jpg">
           <p class="summary">Paris<br>13 juin 2021</p>
         </a>
diff --git a/scripts/concerts.js b/scripts/concerts.js
index fb45819..c4a07f3 100644
--- a/scripts/concerts.js
+++ b/scripts/concerts.js
@@ -13,7 +13,7 @@ if (anchor.match(/#concert-/)) {
         .classList.add('active');
     pHint.style.display = 'none';
 }
-document.querySelectorAll('a.event').forEach((link) => {
+document.querySelectorAll('.event > a.thumbnail').forEach((link) => {
     link.addEventListener('click', function(click) {
         if (click.ctrlKey || click.shiftKey)
             return;
@@ -24,7 +24,7 @@ document.querySelectorAll('a.event').forEach((link) => {
         var id = link.attributes['href'].value;
         document.querySelector(id).classList.add('active');
 
-        prev = document.querySelector('.eventcontainer.active');
+        prev = document.querySelector('.event.active');
         if (prev)
             prev.classList.remove('active');
         link.parentNode.classList.add('active');
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index 8eadb06..28dda6a 100644
--- a/stylesheets/concerts.css
+++ b/stylesheets/concerts.css
@@ -28,11 +28,11 @@ main h1 {
     grid-gap: 0.8em;
 }
 
-.eventcontainer {
+.event {
     position: relative;
 }
 
-a.event {
+a.thumbnail {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -41,14 +41,14 @@ a.event {
     text-decoration: none;
 }
 
-.event img {
+.thumbnail img {
     object-position: center;
     object-fit: cover;
     height: 100%;
     width: 100%;
 }
 
-.event .summary {
+.thumbnail .summary {
     position: absolute;
     font-weight: bold;
     color: white;
@@ -64,7 +64,7 @@ a.event {
     font-size: small;
 }
 
-.eventcontainer.canceled {
+.event.canceled {
     opacity: 50%;
     transition: 0.5s;
 }
@@ -72,8 +72,8 @@ a.event {
     display: block;
     color: red;
 }
-.eventcontainer.canceled:hover,
-.eventcontainer.canceled.active {
+.event.canceled:hover,
+.event.canceled.active {
     opacity: 1;
 }
 
@@ -132,12 +132,12 @@ a.event {
         padding-right: 1em;
     }
 
-    .event .summary {
+    .thumbnail .summary {
         opacity: 0;
         transition: 0.5s;
     }
 
-    .event img {
+    .thumbnail img {
         transition: 0.5s;
     }
 
@@ -149,15 +149,15 @@ a.event {
         border-top-left-radius: 0.5em;
     }
 
-    .eventcontainer:hover img,
-    .eventcontainer:focus-within img,
-    .eventcontainer.active img {
+    .event:hover img,
+    .event:focus-within img,
+    .event.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
-    .eventcontainer:hover .summary,
-    .eventcontainer:focus-within .summary,
-    .eventcontainer.active .summary {
+    .event:hover .summary,
+    .event:focus-within .summary,
+    .event.active .summary {
         opacity: 1;
     }
 
@@ -182,11 +182,11 @@ a.event {
         --cell-height: 8em;
     }
 
-    .eventcontainer {
+    .event {
         display: grid;
     }
 
-    .event .summary {
+    .thumbnail .summary {
         align-self: flex-end;
 
         display: flex;
@@ -196,7 +196,7 @@ a.event {
         margin: 0;
         background: #0008;
     }
-    .eventcontainer.active > a.event .summary {
+    .event.active > a.thumbnail .summary {
         align-self: stretch;
         /* No idea why "100%" does not work here: */
         height: var(--cell-height);