Keep thumbnail of opened concerts highlighted

2 files changed, 14 insertions, 2 deletions

diff --git a/actualités.html b/actualités.html
index 99d54ae..606bb74 100644
--- a/actualités.html
+++ b/actualités.html
@@ -73,6 +73,8 @@
     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');
     }
     document.querySelectorAll('a.event').forEach((link) => {
         link.addEventListener('click', function(click) {
@@ -84,6 +86,12 @@
                 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');
         });
     });
   </script>
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
index 280316d..ee1be86 100644
--- a/stylesheets/actualités.css
+++ b/stylesheets/actualités.css
@@ -109,7 +109,9 @@ a.event {
         transition: 0.5s;
     }
 
-    .event:hover img, .event:focus-within img {
+    .event:not(.active):hover img,
+    .event:not(.active):focus-within img,
+    .event.active img {
         filter: grayscale(0.8) brightness(0.4);
     }
 
@@ -119,7 +121,9 @@ a.event {
         transition: 0.5s;
     }
 
-    .event:hover .summary, .event:focus-within .summary {
+    .event:not(.active):hover .summary,
+    .event:not(.active):focus-within .summary,
+    .event.active .summary {
         opacity: 1;
     }
 }