Hover

david/index.html

@@ -142,202 +142,282 @@
   </p>
   <h2>Publications 2024</h2>
   <style type="text/css">
-    body [data-tag="accessibilite"]:hover,
+    
+      body [data-tag="accessibilite"]:hover,
+      body [data-accessibilite]:hover,
       body:has([data-tag="accessibilite"]:hover) [data-accessibilite],
       body:has([data-accessibilite]:hover) [data-tag="accessibilite"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="accompagnement"]:hover,
+    
+      body [data-tag="accompagnement"]:hover,
+      body [data-accompagnement]:hover,
       body:has([data-tag="accompagnement"]:hover) [data-accompagnement],
       body:has([data-accompagnement]:hover) [data-tag="accompagnement"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="adaptation"]:hover,
+    
+      body [data-tag="adaptation"]:hover,
+      body [data-adaptation]:hover,
       body:has([data-tag="adaptation"]:hover) [data-adaptation],
       body:has([data-adaptation]:hover) [data-tag="adaptation"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="addiction"]:hover,
+    
+      body [data-tag="addiction"]:hover,
+      body [data-addiction]:hover,
       body:has([data-tag="addiction"]:hover) [data-addiction],
       body:has([data-addiction]:hover) [data-tag="addiction"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="apprentissage"]:hover,
+    
+      body [data-tag="apprentissage"]:hover,
+      body [data-apprentissage]:hover,
       body:has([data-tag="apprentissage"]:hover) [data-apprentissage],
       body:has([data-apprentissage]:hover) [data-tag="apprentissage"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="aventure"]:hover,
+    
+      body [data-tag="aventure"]:hover,
+      body [data-aventure]:hover,
       body:has([data-tag="aventure"]:hover) [data-aventure],
       body:has([data-aventure]:hover) [data-tag="aventure"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="commun"]:hover,
+    
+      body [data-tag="commun"]:hover,
+      body [data-commun]:hover,
       body:has([data-tag="commun"]:hover) [data-commun],
       body:has([data-commun]:hover) [data-tag="commun"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="communaute"]:hover,
+    
+      body [data-tag="communaute"]:hover,
+      body [data-communaute]:hover,
       body:has([data-tag="communaute"]:hover) [data-communaute],
       body:has([data-communaute]:hover) [data-tag="communaute"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="deception"]:hover,
+    
+      body [data-tag="deception"]:hover,
+      body [data-deception]:hover,
       body:has([data-tag="deception"]:hover) [data-deception],
       body:has([data-deception]:hover) [data-tag="deception"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="decision"]:hover,
+    
+      body [data-tag="decision"]:hover,
+      body [data-decision]:hover,
       body:has([data-tag="decision"]:hover) [data-decision],
       body:has([data-decision]:hover) [data-tag="decision"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="dependance"]:hover,
+    
+      body [data-tag="dependance"]:hover,
+      body [data-dependance]:hover,
       body:has([data-tag="dependance"]:hover) [data-dependance],
       body:has([data-dependance]:hover) [data-tag="dependance"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="documentation"]:hover,
+    
+      body [data-tag="documentation"]:hover,
+      body [data-documentation]:hover,
       body:has([data-tag="documentation"]:hover) [data-documentation],
       body:has([data-documentation]:hover) [data-tag="documentation"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="dystopie"]:hover,
+    
+      body [data-tag="dystopie"]:hover,
+      body [data-dystopie]:hover,
       body:has([data-tag="dystopie"]:hover) [data-dystopie],
       body:has([data-dystopie]:hover) [data-tag="dystopie"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="echanges"]:hover,
+    
+      body [data-tag="echanges"]:hover,
+      body [data-echanges]:hover,
       body:has([data-tag="echanges"]:hover) [data-echanges],
       body:has([data-echanges]:hover) [data-tag="echanges"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="ecriture"]:hover,
+    
+      body [data-tag="ecriture"]:hover,
+      body [data-ecriture]:hover,
       body:has([data-tag="ecriture"]:hover) [data-ecriture],
       body:has([data-ecriture]:hover) [data-tag="ecriture"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="equipe"]:hover,
+    
+      body [data-tag="equipe"]:hover,
+      body [data-equipe]:hover,
       body:has([data-tag="equipe"]:hover) [data-equipe],
       body:has([data-equipe]:hover) [data-tag="equipe"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="evolution"]:hover,
+    
+      body [data-tag="evolution"]:hover,
+      body [data-evolution]:hover,
       body:has([data-tag="evolution"]:hover) [data-evolution],
       body:has([data-evolution]:hover) [data-tag="evolution"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="experience"]:hover,
+    
+      body [data-tag="experience"]:hover,
+      body [data-experience]:hover,
       body:has([data-tag="experience"]:hover) [data-experience],
       body:has([data-experience]:hover) [data-tag="experience"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="fediverse"]:hover,
+    
+      body [data-tag="fediverse"]:hover,
+      body [data-fediverse]:hover,
       body:has([data-tag="fediverse"]:hover) [data-fediverse],
       body:has([data-fediverse]:hover) [data-tag="fediverse"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="foret"]:hover,
+    
+      body [data-tag="foret"]:hover,
+      body [data-foret]:hover,
       body:has([data-tag="foret"]:hover) [data-foret],
       body:has([data-foret]:hover) [data-tag="foret"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="gratitude"]:hover,
+    
+      body [data-tag="gratitude"]:hover,
+      body [data-gratitude]:hover,
       body:has([data-tag="gratitude"]:hover) [data-gratitude],
       body:has([data-gratitude]:hover) [data-tag="gratitude"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="ia"]:hover,
+    
+      body [data-tag="ia"]:hover,
+      body [data-ia]:hover,
       body:has([data-tag="ia"]:hover) [data-ia],
       body:has([data-ia]:hover) [data-tag="ia"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="laboratoire"]:hover,
+    
+      body [data-tag="laboratoire"]:hover,
+      body [data-laboratoire]:hover,
       body:has([data-tag="laboratoire"]:hover) [data-laboratoire],
       body:has([data-laboratoire]:hover) [data-tag="laboratoire"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="lecture"]:hover,
+    
+      body [data-tag="lecture"]:hover,
+      body [data-lecture]:hover,
       body:has([data-tag="lecture"]:hover) [data-lecture],
       body:has([data-lecture]:hover) [data-tag="lecture"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="opendata"]:hover,
+    
+      body [data-tag="opendata"]:hover,
+      body [data-opendata]:hover,
       body:has([data-tag="opendata"]:hover) [data-opendata],
       body:has([data-opendata]:hover) [data-tag="opendata"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="opensource"]:hover,
+    
+      body [data-tag="opensource"]:hover,
+      body [data-opensource]:hover,
       body:has([data-tag="opensource"]:hover) [data-opensource],
       body:has([data-opensource]:hover) [data-tag="opensource"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="parentalite"]:hover,
+    
+      body [data-tag="parentalite"]:hover,
+      body [data-parentalite]:hover,
       body:has([data-tag="parentalite"]:hover) [data-parentalite],
       body:has([data-parentalite]:hover) [data-tag="parentalite"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="partage"]:hover,
+    
+      body [data-tag="partage"]:hover,
+      body [data-partage]:hover,
       body:has([data-tag="partage"]:hover) [data-partage],
       body:has([data-partage]:hover) [data-tag="partage"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="parvenir"]:hover,
+    
+      body [data-tag="parvenir"]:hover,
+      body [data-parvenir]:hover,
       body:has([data-tag="parvenir"]:hover) [data-parvenir],
       body:has([data-parvenir]:hover) [data-tag="parvenir"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="photographie"]:hover,
+    
+      body [data-tag="photographie"]:hover,
+      body [data-photographie]:hover,
       body:has([data-tag="photographie"]:hover) [data-photographie],
       body:has([data-photographie]:hover) [data-tag="photographie"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="poesie"]:hover,
+    
+      body [data-tag="poesie"]:hover,
+      body [data-poesie]:hover,
       body:has([data-tag="poesie"]:hover) [data-poesie],
       body:has([data-poesie]:hover) [data-tag="poesie"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="processus"]:hover,
+    
+      body [data-tag="processus"]:hover,
+      body [data-processus]:hover,
       body:has([data-tag="processus"]:hover) [data-processus],
       body:has([data-processus]:hover) [data-tag="processus"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="propriete"]:hover,
+    
+      body [data-tag="propriete"]:hover,
+      body [data-propriete]:hover,
       body:has([data-tag="propriete"]:hover) [data-propriete],
       body:has([data-propriete]:hover) [data-tag="propriete"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="protopie"]:hover,
+    
+      body [data-tag="protopie"]:hover,
+      body [data-protopie]:hover,
       body:has([data-tag="protopie"]:hover) [data-protopie],
       body:has([data-protopie]:hover) [data-tag="protopie"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="psychologie"]:hover,
+    
+      body [data-tag="psychologie"]:hover,
+      body [data-psychologie]:hover,
       body:has([data-tag="psychologie"]:hover) [data-psychologie],
       body:has([data-psychologie]:hover) [data-tag="psychologie"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="solastalgia"]:hover,
+    
+      body [data-tag="solastalgia"]:hover,
+      body [data-solastalgia]:hover,
       body:has([data-tag="solastalgia"]:hover) [data-solastalgia],
       body:has([data-solastalgia]:hover) [data-tag="solastalgia"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="sport"]:hover,
+    
+      body [data-tag="sport"]:hover,
+      body [data-sport]:hover,
       body:has([data-tag="sport"]:hover) [data-sport],
       body:has([data-sport]:hover) [data-tag="sport"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="technique"]:hover,
+    
+      body [data-tag="technique"]:hover,
+      body [data-technique]:hover,
       body:has([data-tag="technique"]:hover) [data-technique],
       body:has([data-technique]:hover) [data-tag="technique"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="velo"]:hover,
+    
+      body [data-tag="velo"]:hover,
+      body [data-velo]:hover,
       body:has([data-tag="velo"]:hover) [data-velo],
       body:has([data-velo]:hover) [data-tag="velo"] {
         background-color: var(--hover-tag-color);
       }
-    body [data-tag="web"]:hover,
+    
+      body [data-tag="web"]:hover,
+      body [data-web]:hover,
       body:has([data-tag="web"]:hover) [data-web],
       body:has([data-web]:hover) [data-tag="web"] {
         background-color: var(--hover-tag-color);

david/templates/profil_2024.html

@@ -39,8 +39,9 @@
   </p>
   <h2>Publications 2024</h2>
   <style type="text/css">
-    {% for slug, title, count in tags -%}
+    {% for slug, title, count in tags %}
       body [data-tag="{{ slug }}"]:hover,
+      body [data-{{ slug }}]:hover,
       body:has([data-tag="{{ slug }}"]:hover) [data-{{ slug }}],
       body:has([data-{{ slug }}]:hover) [data-tag="{{ slug }}"] {
         background-color: var(--hover-tag-color);