draft event details

radio buttons cannot be unset, so this might not be The Way.

take the plunge, learn some js, and use <input type="button">?

2 files changed, 52 insertions, 12 deletions

diff --git a/événements.css b/événements.css
index 8753eb3..6a2bd4a 100644
--- a/événements.css
+++ b/événements.css
@@ -30,7 +30,7 @@
     filter: grayscale(0.8) brightness(0.4);
 }
 
-.event p {
+.event .summary {
     z-index: 1;
     opacity: 0;
     font-weight: bold;
@@ -38,6 +38,26 @@
     transition: 0.5s;
 }
 
-.event:hover p {
+.event:hover .summary {
     opacity: 1;
 }
+
+.event .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: 0;
+}
diff --git a/événements.html b/événements.html
index 23cbabe..9ac88cc 100644
--- a/événements.html
+++ b/événements.html
@@ -15,44 +15,64 @@
   <div class="main">
     <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>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #0 !<br>Plein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #1 !<br>Pleein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #2 !<br>Pleeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #3 !<br>Pleeeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #4 !<br>Pleeeeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #5 !<br>Pleeeeeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #6 !<br>Pleeeeeeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #7 !<br>Pleeeeeeeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #8 !<br>Pleeeeeeeeein de détails.</div>
       </div>
       <div class="event">
+        <input type="radio" name="event">
         <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png">
-        <p>Quelque part<br>À un moment</p>
+        <p class="summary">Quelque part<br>À un moment</p>
+        <div class="details">Des détails #9 !<br>Pleeeeeeeeeein de détails.</div>
       </div>
     </div>
   </div>