From e44a48a6dc36cb5a644c85e8866936c339a62540 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 22 Nov 2020 22:24:43 +0100
Subject: mfhdmsqlfk

---
 "actualit\303\251s.css"  |  46 +++---
 "actualit\303\251s.html" | 394 +++++++++++++++++++++--------------------------
 2 files changed, 197 insertions(+), 243 deletions(-)

diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css"
index 3cc5ff5..d063ebd 100644
--- "a/actualit\303\251s.css"
+++ "b/actualit\303\251s.css"
@@ -1,13 +1,18 @@
 main {
-    padding-left: 5%;
+    display: grid;
+    grid-template-columns: 60% 40%;
+}
+
+main > div {
+    padding: 2%;
 }
 
 .events {
     display: grid;
-    width: 58vw;
+    width: 50vw;
     grid-auto-rows: 12vw;
     grid-template-columns: repeat(auto-fit, 14vw);
-    grid-gap: 1em;
+    grid-gap: 1vw;
     background-color: #dbb;
 }
 
@@ -19,6 +24,13 @@ main {
     justify-content: center;
 }
 
+.event a {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    text-decoration: none;
+}
+
 .event img {
     position: absolute;
     object-position: center;
@@ -33,6 +45,12 @@ main {
 }
 
 .event .summary {
+    position: absolute;
+    margin: 0;
+    text-align: center;
+    vertical-align: middle;
+    height: 100%;
+    width: 100%;
     z-index: 1;
     opacity: 0;
     font-weight: bold;
@@ -44,26 +62,6 @@ main {
     opacity: 1;
 }
 
-.event .details {
+#event-details .details {
     display: none;
 }
-
-.event input {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    cursor: pointer;
-    opacity: 0;
-    z-index: 2;
-}
-
-.event input:checked ~ .details {
-    display: block;
-    position: fixed;
-    top: 10em;
-    left: 60vw;
-    max-width: 30%;
-    max-height: 50vh;
-    overflow: auto;
-    background-color: #d88;
-}
diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html"
index 53d322a..ab0faa4 100644
--- "a/actualit\303\251s.html"
+++ "b/actualit\303\251s.html"
@@ -31,238 +31,194 @@
     </header>
 
     <main>
-      <h1>Prochains concerts</h1>
-
-      <div class="events">
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 100¤</p>
+      <div id="event-list">
+        <h1>Prochains concerts</h1>
+        <div class="events">
+          <div class="event" id="concert-1">
+            <a href="#details-1">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
           </div>
-        </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 101¤</p>
+          <div class="event" id="concert-2">
+            <a href="#details-2">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
           </div>
-        </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 102¤</p>
+          <div class="event" id="concert-3">
+            <a href="#details-3">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
+          </div>
+          <div class="event" id="concert-4">
+            <a href="#details-4">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
           </div>
         </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 103¤</p>
+        <h1>Concerts passés</h1>
+        <div class="events">
+          <div class="event" id="concert-5">
+            <a href="#details-5">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
+          </div>
+          <div class="event" id="concert-6">
+            <a href="#details-6">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
+          </div>
+          <div class="event" id="concert-7">
+            <a href="#details-7">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+          </div>
+          <div class="event" id="concert-8">
+            <a href="#details-8">
+              <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
+              <p class="summary">Quelque part<br>À un moment</p>
+            </a>
           </div>
         </div>
       </div>
 
-      <h1>Concerts passés</h1>
-
-      <div class="events">
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 104¤</p>
-          </div>
+      <div id="event-details">
+        <div class="details" id="details-1">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 101¤</p>
         </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 105¤</p>
-          </div>
+        <div class="details" id="details-2">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 102¤</p>
         </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 106¤</p>
-          </div>
+        <div class="details" id="details-3">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 103¤</p>
         </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 107¤</p>
-          </div>
+        <div class="details" id="details-4">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 104¤</p>
         </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 108¤</p>
-          </div>
+        <div class="details" id="details-5">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 105¤</p>
         </div>
-        <div class="event">
-          <input type="radio" name="event">
-          <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
-          <p class="summary">Quelque part<br>À un moment</p>
-          <div class="details">
-            <h2>Programme</h2>
-            <ol>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-              <li>Un morceau</li>
-            </ol>
-            <h2>Salle</h2>
-            42 Place de l'Endroit
-            01337 La-Ville-du-Coin
-            <h2>Programmation</h2>
-            <p><a href="http://perdu.com">Site du programmateur</a></p>
-            <p>Réservable sous conditions.</p>
-            <p>1 place : 109¤</p>
-          </div>
+        <div class="details" id="details-6">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 106¤</p>
+        </div>
+        <div class="details" id="details-7">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 107¤</p>
+        </div>
+        <div class="details" id="details-8">
+          <h2>Programme</h2>
+          <ol>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+            <li>Un morceau</li>
+          </ol>
+          <h2>Salle</h2>
+          42 Place de l'Endroit
+          01337 La-Ville-du-Coin
+          <h2>Programmation</h2>
+          <p><a href="http://perdu.com">Site du programmateur</a></p>
+          <p>Réservable sous conditions.</p>
+          <p>1 place : 108¤</p>
         </div>
       </div>
 
-- 
cgit v1.2.3


From 89d7345d98640482f1f925b06a8238f3b1355ba1 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 22 Nov 2020 22:57:50 +0100
Subject: I don't even know what changed; mmm; "Fix stuff" I guess??

---
 "actualit\303\251s.css"  | 19 +++++--------------
 "actualit\303\251s.html" | 49 ++++++++++++++++++++++++------------------------
 2 files changed, 30 insertions(+), 38 deletions(-)

diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css"
index d063ebd..7f6aae1 100644
--- "a/actualit\303\251s.css"
+++ "b/actualit\303\251s.css"
@@ -1,5 +1,6 @@
 main {
     display: grid;
+    overflow: auto;
     grid-template-columns: 60% 40%;
 }
 
@@ -19,13 +20,13 @@ main > div {
 .event {
     position: relative;
     background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .event a {
     position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
     width: 100%;
     text-decoration: none;
@@ -45,14 +46,8 @@ main > div {
 }
 
 .event .summary {
-    position: absolute;
-    margin: 0;
-    text-align: center;
-    vertical-align: middle;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
     opacity: 0;
+    z-index: 1;
     font-weight: bold;
     color: white;
     transition: 0.5s;
@@ -61,7 +56,3 @@ main > div {
 .event:hover .summary {
     opacity: 1;
 }
-
-#event-details .details {
-    display: none;
-}
diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html"
index ab0faa4..937b83e 100644
--- "a/actualit\303\251s.html"
+++ "b/actualit\303\251s.html"
@@ -34,26 +34,26 @@
       <div id="event-list">
         <h1>Prochains concerts</h1>
         <div class="events">
-          <div class="event" id="concert-1">
-            <a href="#details-1">
+          <div class="event">
+            <a href="#concert-1">
               <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
           </div>
-          <div class="event" id="concert-2">
-            <a href="#details-2">
+          <div class="event">
+            <a href="#concert-2">
               <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
           </div>
-          <div class="event" id="concert-3">
-            <a href="#details-3">
+          <div class="event">
+            <a href="#concert-3">
               <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
           </div>
-          <div class="event" id="concert-4">
-            <a href="#details-4">
+          <div class="event">
+            <a href="#concert-4">
               <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
@@ -61,25 +61,26 @@
         </div>
         <h1>Concerts passés</h1>
         <div class="events">
-          <div class="event" id="concert-5">
-            <a href="#details-5">
+          <div class="event">
+            <a href="#concert-5">
               <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
           </div>
-          <div class="event" id="concert-6">
-            <a href="#details-6">
+          <div class="event">
+            <a href="#concert-6">
               <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
           </div>
-          <div class="event" id="concert-7">
-            <a href="#details-7">
+          <div class="event">
+            <a href="#concert-7">
               <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
               <p class="summary">Quelque part<br>À un moment</p>
+            </a>
           </div>
-          <div class="event" id="concert-8">
-            <a href="#details-8">
+          <div class="event">
+            <a href="#concert-8">
               <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
               <p class="summary">Quelque part<br>À un moment</p>
             </a>
@@ -88,7 +89,7 @@
       </div>
 
       <div id="event-details">
-        <div class="details" id="details-1">
+        <div class="details" id="concert-1">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -101,7 +102,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 101¤</p>
         </div>
-        <div class="details" id="details-2">
+        <div class="details" id="concert-2">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -115,7 +116,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 102¤</p>
         </div>
-        <div class="details" id="details-3">
+        <div class="details" id="concert-3">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -130,7 +131,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 103¤</p>
         </div>
-        <div class="details" id="details-4">
+        <div class="details" id="concert-4">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -146,7 +147,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 104¤</p>
         </div>
-        <div class="details" id="details-5">
+        <div class="details" id="concert-5">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -163,7 +164,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 105¤</p>
         </div>
-        <div class="details" id="details-6">
+        <div class="details" id="concert-6">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -181,7 +182,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 106¤</p>
         </div>
-        <div class="details" id="details-7">
+        <div class="details" id="concert-7">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
@@ -200,7 +201,7 @@
           <p>Réservable sous conditions.</p>
           <p>1 place : 107¤</p>
         </div>
-        <div class="details" id="details-8">
+        <div class="details" id="concert-8">
           <h2>Programme</h2>
           <ol>
             <li>Un morceau</li>
-- 
cgit v1.2.3


From c7d0c9d90c7981878e5dc7f163fb41f350c5f45e Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Mon, 23 Nov 2020 00:03:57 +0100
Subject: Hide and show details on demand

Don't write display:none into regular stylesheets, otherwise people
who disable JS will be screwed.
---
 "actualit\303\251s.html" | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html"
index 937b83e..136f089 100644
--- "a/actualit\303\251s.html"
+++ "b/actualit\303\251s.html"
@@ -223,6 +223,24 @@
         </div>
       </div>
 
+      <!-- TODO: scroll list and details independently -->
+      <!-- TODO: check URL for anchor and auto-enable -->
+      <script>
+        var detailsStyle = document.createElement('style');
+        document.head.appendChild(detailsStyle);
+        detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
+
+        document.querySelectorAll('.event a').forEach((link) => {
+            link.onclick = function() {
+                var prev = document.querySelector('.details.active');
+                if (prev)
+                    prev.classList.remove('active');
+                var id = link.attributes['href'].value;
+                document.querySelector(id).classList.add('active');
+            }
+        });
+      </script>
+
     </main>
 
     <footer class="social">
-- 
cgit v1.2.3


From 3c5114af62b777ec79a1b794be45e7c764bf5af5 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Mon, 23 Nov 2020 09:22:52 +0100
Subject: Make scrolling more convenient

Clicking on summary buttons no longer scrolls the summary div.
---
 "actualit\303\251s.css"  | 1 +
 "actualit\303\251s.html" | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css"
index 7f6aae1..46ac00a 100644
--- "a/actualit\303\251s.css"
+++ "b/actualit\303\251s.css"
@@ -6,6 +6,7 @@ main {
 
 main > div {
     padding: 2%;
+    overflow: auto;
 }
 
 .events {
diff --git "a/actualit\303\251s.html" "b/actualit\303\251s.html"
index 136f089..925d167 100644
--- "a/actualit\303\251s.html"
+++ "b/actualit\303\251s.html"
@@ -223,7 +223,7 @@
         </div>
       </div>
 
-      <!-- TODO: scroll list and details independently -->
+      <!-- TODO: prevent scroll when clicking on overflowing details -->
       <!-- TODO: check URL for anchor and auto-enable -->
       <script>
         var detailsStyle = document.createElement('style');
-- 
cgit v1.2.3