diff --git a/www/css/style.css b/www/css/style.css
index 32a1296..ece57f0 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -345,6 +345,65 @@ section p.stand-out {
}
}
+/*--------------------------------------------------------*/
+/* POPUP
+/*--------------------------------------------------------*/
+
+/* Popup container */
+.popup-trigger {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ text-decoration: dotted underline;
+ }
+
+
+ /* The actual popup (appears on top) */
+.popup-trigger .popup {
+ visibility: hidden;
+ min-width: 180px;
+ max-width: 350%;
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 8px 0;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%;
+ left: 50%;
+ margin-left: -80px;
+ }
+
+ /* Popup arrow */
+.popup-trigger .popup::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: #555 transparent transparent transparent;
+ }
+
+ /* Toggle this class when clicking on the popup container (hide and show the popup) */
+ .popup-trigger .show {
+ visibility: visible;
+ -webkit-animation: fadeIn 1s;
+ animation: fadeIn 1s
+ }
+
+ /* Add animation (fade in the popup) */
+ @-webkit-keyframes fadeIn {
+ from {opacity: 0;}
+ to {opacity: 1;}
+ }
+
+ @keyframes fadeIn {
+ from {opacity: 0;}
+ to {opacity:1 ;}
+ }
/*--------------------------------------------------------*/
/* POULPE
diff --git a/www/index.html b/www/index.html
index a64da69..73cd22e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -438,7 +438,12 @@
26/11/2023 4:00
Petit Pôt
- Une exposition comprenant des mosaïques de Lego, des photos, et des tableaux dichroïques.
+ Une triple exposition comprenant :
+ - des mosaïques de Lego
+ -
+ - des tableaux dichroïques.
@@ -605,7 +610,7 @@
-
+
@@ -621,6 +626,9 @@
endDate: new Date(2023, 10, 26, 5),
groupEventsByLocation: true
});
+ $('.popup-trigger').click(function(){
+ $(this).children($('.popup')).toggleClass("show")
+ });
});