From a9a08568228e067711eb493cc9cd086ae059a309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 18 Mar 2024 18:08:29 +0100
Subject: [PATCH] Change modal and card to dark theme

---
 index.html | 60 +++++++++++++++++++++++++++---------------------------
 js/main.js |  4 ++--
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 1d2572e..4290902 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
           <div class="columns is-multiline p-3">
             {{#data}}
               <div class="column is-one-third">
-                <div class="card" onclick="openModalFromTemplate()"
+                <div class="card has-background-black-ter has-text-light" onclick="openModalFromTemplate()"
                   hx-target=".modal-request"
                   hx-get="http://localhost:1337/api/articles/{{id}}?populate=couverture,fichiers">
                   <div class="card-image">
@@ -60,7 +60,7 @@
                   </div>
                   <div class="card-content">
                     <div class="content">
-                      <h2 class="title">{{attributes.titre}}</h2>
+                      <h2 class="title has-text-light">{{attributes.titre}}</h2>
                       <p class="is-italic">{{{attributes.chapeau}}}</p>
                     </div>
                   </div>
@@ -79,11 +79,11 @@
     <div id="modal-charte" class="modal">
       <div class="modal-background"></div>
       <div class="modal-card">
-        <header class="modal-card-head">
-          <p class="modal-card-title has-text-centered">LA CHARTE DU GONG <br> Juin 1963</p>
+        <header class="modal-card-head has-background-dark">
+          <p class="modal-card-title has-text-centered has-text-light">LA CHARTE DU GONG <br> Juin 1963</p>
           <button class="delete" aria-label="close"></button>
         </header>
-        <section class="modal-card-body has-text-justified">
+        <section class="modal-card-body has-text-justified has-background-dark has-text-light">
           <p>
             Ces dernières années écoulées ont vu l'effondrement quasi général du système colonial dans le monde.
             Avec l'accession de l'Algérie à l'indépendance, après la libération des pays de l'Afrique Noire,
@@ -155,7 +155,7 @@
               </li>
             </ul>
           </p>
-          <h3 class="title is-5 mt-5">1. LE DROIT DU PEUPLE GUADELOUPEEN A DISPOSER DE LUI-MÊME.</h3>
+          <h3 class="title is-5 mt-5 has-text-light">1. LE DROIT DU PEUPLE GUADELOUPEEN A DISPOSER DE LUI-MÊME.</h3>
           <p>
             Le droit à l’autodétermination est un droit inaliénable et imprescriptible reconnu à tous les peuples et expressément notifié par la Charte des Nations unies.
             Les Guadeloupéens constituent un peuple majeur différent du peuple français. Communauté stable d'hommes avec un territoire propre, une histoire propre, une culture,
@@ -169,7 +169,7 @@
           <p>
             II en résulte que :
           </p>
-          <h3 class="title is-5 mt-5">2. LA GUADELOUPE A LE DROIT A LA PLEINE SOUVERAINETE NATIONALE</h3>
+          <h3 class="title is-5 mt-5 has-text-light">2. LA GUADELOUPE A LE DROIT A LA PLEINE SOUVERAINETE NATIONALE</h3>
           <p>
             C'est un principe constant sur lequel on ne saurait transiger quand bien même le peuple guadeloupéen
             consentirait à hiérarchiser les étapes par lesquelles inéluctablement il atteindrait son objectif final.
@@ -182,7 +182,7 @@
             La lutte du peuple guadeloupéen pour le triomphe de ses aspirations est par conséquent une lutte à caractère national
             pour là raison même que ces aspirations sont le reflet d’un désir encore plus ou moins conscient de libération du joug oppresseur.
           </p>
-          <h3 class="title is-5 mt-5">3. LA LUTTE POUR CE DROIT EST UNE LUTTE JUSTE.</h3>
+          <h3 class="title is-5 mt-5 has-text-light">3. LA LUTTE POUR CE DROIT EST UNE LUTTE JUSTE.</h3>
           <p>
             Elle s'inscrit dans le grand courant de décolonisation qui constitue l'événement historique fondamental de notre époque.
           </p>
@@ -244,7 +244,7 @@
               </li>
             </ul>
           </p>
-          <h3 class="title is-5 mt-5">4. NÉCESSITÉ D'UNE LUTTE RÉVOLUTIONNAIRE</h3>
+          <h3 class="title is-5 mt-5 has-text-light">4. NÉCESSITÉ D'UNE LUTTE RÉVOLUTIONNAIRE</h3>
           <p>
             La revendication du peuple guadeloupéen est une revendication nationale.
             Elle vise avant tout à transformer l'état de choses existant dans ce qu'il a de plus fondamental et de plus essentiel.
@@ -257,7 +257,7 @@
           <p>
             C'est donc une véritable révolution qu'il faut réaliser en Guadeloupe. (...)
           </p>
-          <h3 class="title is-5 mt-5">6. LES OBJECTIFS DE LA RÉVOLUTION</h3>
+          <h3 class="title is-5 mt-5 has-text-light">6. LES OBJECTIFS DE LA RÉVOLUTION</h3>
           <p>
             Il résulte de l'analyse faite plus haut que la Révolution doit amener nécessairement la Guadeloupe à la pleine souveraineté.
           </p>
@@ -284,7 +284,7 @@
             </ul>
           </p>
           <p>
-            <strong>La pleine souveraineté nationale</strong> <br>
+            <strong class="has-text-light">La pleine souveraineté nationale</strong> <br>
             La lutte révolutionnaire à pour objectif de soustraire la Guadeloupe à la tutelle coloniale et à toute tutelle étrangère.
             Les Guadeloupéens veulent construire leur destin à l'exemple de tous les autres peuples et non subir un destin qu'on leur impose ;
             cela implique l'édification de la Guadeloupe en un état souverain dirigé par:
@@ -303,12 +303,12 @@
             Ces deux pouvoirs détenant les attributs de la souveraineté nationale.
           </p>
           <p class="pt-3">
-            <strong>Rapports avec la France</strong> <br>
+            <strong class="has-text-light">Rapports avec la France</strong> <br>
             La destruction des structures coloniales, -l’accession à la pleine souveraineté, signifient l'établissement de nouveaux rapports
             entre l’ancienne métropole et la Guadeloupe. Seule l'issue de la lutte déterminera le caractère de ces nouveaux rapports.
           </p>
           <p class="pt-3">
-            <strong>La Guadeloupe dans la Caraïbe</strong> <br>
+            <strong class="has-text-light">La Guadeloupe dans la Caraïbe</strong> <br>
             La Guadeloupe, de par sa situation même, est à vocation caraïbe. Le peuple, dans sa grande majorité,
             est sensible à tout ce qui se passe dans la Caraïbe et dans l'Amérique latine ; les progrès de la révolution cubaine sont suivis avec un intérêt croissant
             par les masses laborieuses. C'est la conjonction des divers colonialismes français, britannique, hollandais, espagnol et américain qui a dressé
@@ -371,7 +371,7 @@
             de leurs intérêts et à prolonger la tutelle coloniale.
           </p>
           <p class="pt-3">
-            <strong>Un régime démocratique et populaire</strong>. <br>
+            <strong class="has-text-light">Un régime démocratique et populaire</strong>. <br>
             La prise en main par notre peuple de ses propres affaires suppose l’orientation de la Révolution vers un régime démocratique et populaire ;
             dire l'union consciente de toute les couches de la population pour la construction de la Guadeloupe dans le cadre des principes socialistes.
           </p>
@@ -405,7 +405,7 @@
               </li>
             </ul>
           </p>
-          <h3 class="title is-5 mt-5">7. LES CONDITIONS DU SUCCÈS</h3>
+          <h3 class="title is-5 mt-5 has-text-light">7. LES CONDITIONS DU SUCCÈS</h3>
           <p>
             Telles sont dans leurs grandes lignes les conditions de l'émancipation de notre pays.
           </p>
@@ -419,13 +419,13 @@
             LE G.O.N.G. - Adopté en Assemblée générale - juin 1963
           </p>
         </section>
-        <footer class="flex modal-card-foot is-justify-content-space-between">
+        <footer class="flex modal-card-foot is-justify-content-space-between has-background-dark has-text-light">
           <button class="button">Fermer</button>
           <div>
             <span class="icon">
               <ion-icon name="document"></ion-icon>
             </span>
-            <a href="./assets/charte-du-gong-1963.pdf" download>Voir l'original</a>
+            <a class="has-text-success" href="./assets/charte-du-gong-1963.pdf" download>Voir l'original</a>
           </div>
         </footer>
       </div>
@@ -433,11 +433,11 @@
     <div id="modal-orientation" class="modal">
       <div class="modal-background"></div>
       <div class="modal-card">
-        <header class="modal-card-head">
-          <p class="modal-card-title has-text-centered">ORIENTATION <br> ET  <br> STRATEGIE <br> DE LA LUTTE <br> REVOLUTIONNAIRE <br> DU PEUPLE <br> GUADELOUPEEN</p>
+        <header class="modal-card-head has-background-dark">
+          <p class="modal-card-title has-text-centered has-text-light">ORIENTATION <br> ET  <br> STRATEGIE <br> DE LA LUTTE <br> REVOLUTIONNAIRE <br> DU PEUPLE <br> GUADELOUPEEN</p>
           <button class="delete" aria-label="close"></button>
         </header>
-        <section class="modal-card-body has-text-justified">
+        <section class="modal-card-body has-text-justified has-background-dark has-text-light">
           <p>
             Au cours de la journée d'étude du 1er mai, en présence de représentants de l'AGEC, de l'A.A.C.,
             le bureau provisoire a débattu des voies et moyens et du programme d'activités de l’année 1963.
@@ -800,21 +800,21 @@
               </li>
             </ul>
           </p>
-          <h3 class="title is-5 my-5 has-text-centered">«NOUS VAINCRONS»</h3>
+          <h3 class="title is-5 my-5 has-text-centered has-text-light">«NOUS VAINCRONS»</h3>
           <figure class="image is-128x128 mx-auto">
             <img src="./img/gong.png">
           </figure>
-          <p class="subtitle is-uppercase has-text-weight-bold">
+          <p class="subtitle is-uppercase has-text-weight-bold has-text-light">
             Rangeons nous sous la bannière du G.O.N.G. pour poursuivre la lutte contre l'impérialisme, contre le colonialisme français et ses valets locaux.
           </p>
         </section>
-        <footer class="flex modal-card-foot is-justify-content-space-between">
+        <footer class="flex modal-card-foot is-justify-content-space-between has-background-dark has-text-light">
           <button class="button">Fermer</button>
           <div>
             <span class="icon">
               <ion-icon name="document"></ion-icon>
             </span>
-            <a href="./assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" download>Voir l'original</a>
+            <a class="has-text-success" href="./assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" download>Voir l'original</a>
           </div>
         </footer>
       </div>
@@ -822,26 +822,26 @@
     <div id="modal-article" class="modal">
       <div class="modal-background"></div>
       <div class="modal-card">
-        <header class="modal-card-head">
-          <p id="article-titre" class="modal-card-title"></p>
+        <header class="modal-card-head has-background-dark">
+          <p id="article-titre" class="modal-card-title has-text-light"></p>
           <button class="delete" aria-label="close"></button>
         </header>
-        <section id="modal-card-render" class="modal-card-body">
+        <section id="modal-card-render" class="modal-card-body has-background-dark has-text-light">
           <figure class="image is-3by2 mx-auto mb-3">
             <img id="article-couverture">
           </figure>
-          <p id="article-chapeau" class="mb-5 is-italic subtitle"></p>
+          <p id="article-chapeau" class="mb-5 is-italic subtitle has-text-light"></p>
           <p id="article-contenu"></p>
           <hr>
           <div id="article-fichiers"></div>
         </section>
         <section class="modal-request"></section>
-        <footer class="modal-card-foot">
+        <footer class="modal-card-foot has-background-dark">
           <button class="button">Fermer</button>
         </footer>
       </div>
     </div>
-    <footer class="footer has-background-black has-text-white">
+    <footer class="footer has-background-black-ter has-text-white">
       <div class="content has-text-centered">
         <q>
           <i>
diff --git a/js/main.js b/js/main.js
index c764c34..b190888 100644
--- a/js/main.js
+++ b/js/main.js
@@ -96,7 +96,7 @@ document.addEventListener('htmx:afterSwap', function(event) {
 
       articleFichiers.innerHTML = '';
 
-      articleFichiers.insertAdjacentHTML('beforeend', '<h3 class="title is-4 has-text-centered">Documents</h3>');
+      articleFichiers.insertAdjacentHTML('beforeend', '<h3 class="title is-4 has-text-centered has-text-light">Documents</h3>');
 
       fichiers.forEach(fichier => {
         articleFichiers.insertAdjacentHTML('beforeend', `
@@ -104,7 +104,7 @@ document.addEventListener('htmx:afterSwap', function(event) {
             <span class="icon">
               <ion-icon name="document"></ion-icon>
             </span>
-            <a href="http://localhost:1337${fichier.attributes.url}">${fichier.attributes.name}</a>
+            <a class="has-text-success" href="http://localhost:1337${fichier.attributes.url}">${fichier.attributes.name}</a>
           </p>
         `);
     });