From 14adfbe5fb0a5e7d6ab7e0aa2646de8381fb75d0 Mon Sep 17 00:00:00 2001
From: Michael Costa <michael.costa@mcos.nc>
Date: Sat, 8 Apr 2023 11:45:59 +1100
Subject: [PATCH] wip: colors

---
 src/thsf/static/css/tooltip.css | 38 +++++++++++++++++++++
 src/thsf/templates/base.html    |  2 ++
 src/thsf/templates/index.html   | 60 ++++++++++++++++++++++-----------
 3 files changed, 80 insertions(+), 20 deletions(-)
 create mode 100644 src/thsf/static/css/tooltip.css

diff --git a/src/thsf/static/css/tooltip.css b/src/thsf/static/css/tooltip.css
new file mode 100644
index 0000000..549bcad
--- /dev/null
+++ b/src/thsf/static/css/tooltip.css
@@ -0,0 +1,38 @@
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: var(--main-color);
+  color: var(--alt-color);
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: var(--alt-color) transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
diff --git a/src/thsf/templates/base.html b/src/thsf/templates/base.html
index 2d2dd7b..c7ff438 100644
--- a/src/thsf/templates/base.html
+++ b/src/thsf/templates/base.html
@@ -6,6 +6,8 @@
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <link rel="stylesheet"
         href="{{ url_for('static', filename='css/style.css') }}">
+  <link rel="stylesheet"
+        href="{{ url_for('static', filename='css/tooltip.css') }}">
   <link rel="icon"
         type="image/png"
         href="{{ url_for('static', filename='images/favicon.png') }}" />
diff --git a/src/thsf/templates/index.html b/src/thsf/templates/index.html
index 79809d0..292e3a3 100644
--- a/src/thsf/templates/index.html
+++ b/src/thsf/templates/index.html
@@ -34,35 +34,55 @@
   </div>
 </div>
 <div id="navbar_wrapper">
-  <i class="button black fa-regular fa-calendar"
+  <i class="button tooltip black fa-regular fa-calendar"
     title="Programme"
-    alt="Programme"></i>
-  <i class="button black fa-solid fa-map-location-dot"
+    alt="Programme">
+    <span class="tooltiptext">Programme</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-map-location-dot"
     title="Le Lieu"
-    alt="Le Lieu"></i>
-  <i class="button black fa-solid fa-burger"
+    alt="Le Lieu">
+    <span class="tooltiptext">Le lieu</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-burger"
     title="Restauration"
-    alt="Restauration"></i>
-  <i class="button black fa-solid fa-shirt"
+    alt="Restauration">
+    <span class="tooltiptext">Restauration</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-shirt"
     title="T-shirt et goodies"
-    alt="T-shirt et goodies"></i>
-  <i class="button black fa-solid fa-guitar"
+    alt="T-shirt et goodies">
+    <span class="tooltiptext">Goodies</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-guitar"
     title="Concerts et DJ sets"
-    alt="Concerts et DJ sets"></i>
-  <i class="button black fa-solid fa-screwdriver-wrench"
+    alt="Concerts et DJ sets">
+    <span class="tooltiptext">Concerts et DJ sets</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-screwdriver-wrench"
     title="Ateliers"
-    alt="Ateliers"></i>
-  <i class="button black fa-solid fa-film"
+    alt="Ateliers">
+    <span class="tooltiptext">Ateliers</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-film"
     title="Projections"
-    alt="Projections"></i>
-  <i class="button black fa-solid fa-users-line"
+    alt="Projections">
+    <span class="tooltiptext">Projections</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-users-line"
     title="Tables rondes"
-    alt="Tables rondes"></i>
-  <i class="button black fa-solid fa-palette"
+    alt="Tables rondes">
+    <span class="tooltiptext">Tables rondes</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-palette"
     title="Expositions"
-    alt="Expositions"></i>
-  <i class="button black fa-solid fa-person-chalkboard"
+    alt="Expositions">
+    <span class="tooltiptext">Expositions</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-person-chalkboard"
     title="Conférences"
-    alt="Conférences"></i>
+    alt="Conférences">
+    <span class="tooltiptext">Conférences</span>
+  </i>
 </div>
 {% endblock %}