wip: colors

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;
+}

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') }}" />

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>
+    alt="Programme">
-  <i class="button black fa-solid fa-map-location-dot"
+    <span class="tooltiptext">Programme</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-map-location-dot"
     title="Le Lieu"
-    alt="Le Lieu"></i>
+    alt="Le Lieu">
-  <i class="button black fa-solid fa-burger"
+    <span class="tooltiptext">Le lieu</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-burger"
     title="Restauration"
-    alt="Restauration"></i>
+    alt="Restauration">
-  <i class="button black fa-solid fa-shirt"
+    <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>
+    alt="T-shirt et goodies">
-  <i class="button black fa-solid fa-guitar"
+    <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>
+    alt="Concerts et DJ sets">
-  <i class="button black fa-solid fa-screwdriver-wrench"
+    <span class="tooltiptext">Concerts et DJ sets</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-screwdriver-wrench"
     title="Ateliers"
-    alt="Ateliers"></i>
+    alt="Ateliers">
-  <i class="button black fa-solid fa-film"
+    <span class="tooltiptext">Ateliers</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-film"
     title="Projections"
-    alt="Projections"></i>
+    alt="Projections">
-  <i class="button black fa-solid fa-users-line"
+    <span class="tooltiptext">Projections</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-users-line"
     title="Tables rondes"
-    alt="Tables rondes"></i>
+    alt="Tables rondes">
-  <i class="button black fa-solid fa-palette"
+    <span class="tooltiptext">Tables rondes</span>
+  </i>
+  <i class="button tooltip black fa-solid fa-palette"
     title="Expositions"
-    alt="Expositions"></i>
+    alt="Expositions">
-  <i class="button black fa-solid fa-person-chalkboard"
+    <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 %}