update month in content

Author: JBBailly

frugal.css

@@ -305,15 +305,15 @@ footer {
 
 #goueliou {
     display: flex;
-    justify-content: space-around;
-    gap: 1rem;
+    justify-content: center;
+    gap: 3rem;
 }
 
 .gouel {
     padding: 10px;
     margin-bottom: 10px;
     border: 1px solid var(--main-color);
-    width: 300px;
+    width: 480px;
     /* width: 100%; */
     font-size: 20px;
 }
@@ -383,12 +383,12 @@ span.gouel-ville-proche {
 }
 
 #goueiliou-container #nouveau {
-    /* transform: rotate(-20deg); */
+    transform: rotate(-10deg);
     width: fit-content;
     height: fit-content;
     margin-bottom: 2px;
     font-size: x-large;
-    /* margin-left: 20px; */
+    margin-left: 20px;
     font-weight: bold;
     border: 2px solid;
     padding: 5px;
@@ -574,13 +574,13 @@ span.gouel-ville-proche {
     }
 
     #goueiliou-container #nouveau {
-        transform: rotate(-20deg);
+        transform: rotate(-10deg);
         width: fit-content;
         height: fit-content;
         margin-bottom: 0px;
         font-size: small;
         margin-left: 0px;
-        margin-right: 20px;
+        margin-right: 35px;
         font-weight: bold;
         border: 1px solid;
         padding: 2px
@@ -854,7 +854,7 @@ span.gouel-ville-proche {
 @media screen and (min-width: 800px) and (max-width: 1300px) {
     #goueliou {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(1, 1fr);
         gap: 1rem;
     }
     .gouel {
@@ -870,7 +870,7 @@ span.gouel-ville-proche {
 @media screen and (min-width: 1000px) and (max-width: 1300px) {
     #goueliou {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         gap: 1rem;
     }
     .gouel {
@@ -886,7 +886,7 @@ span.gouel-ville-proche {
 @media screen and (min-width: 1300px) and (max-width: 1600px) {
     #goueliou {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         gap: 1rem;
     }
     .gouel {
@@ -1037,4 +1037,4 @@ span.gouel-ville-proche {
     font-style: normal;
     font-weight: 400;
     src: url('ressources/fonts/LeagueGothic-Regular-VariableFont_wdth.ttf') format('truetype');
-}
+}

goueliou/index.html

@@ -119,7 +119,7 @@ <h1>Kerlandrier.cc</h1>
         }
         Object.entries(goueliou).forEach(([month, fest]) => {
             // Creation des colonnes Mois
-            if (!["Avril", "Mai", "Juin", "Juillet", "Août"].includes(month)) return;
+            if (![ "Juin", "Juillet", "Août"].includes(month)) return;
             const container = document.createElement('div');
             container.classList.add('month');
             const title = document.createElement('h2');
@@ -268,4 +268,4 @@ <h2 id="gouel-title">${fest[i].Nom}</h2>
     </script>
 </body>
 
-</html>
+</html>

index.html

@@ -87,16 +87,16 @@ <h1>Kerlandrier.cc</h1>
             </div>
             <div id="goueiliou-container">
                 <p id="nouveau">Nouveau</p>
-                <p>Kerlandrier des <a href="./goueliou/index.html">Festivals de l'été</a></p>
+                <p>Kerlandrier des <a href="./goueliou/">Festivals de l'été</a> 🌴</p>
             </div>
             <div id="filters-container">
                 <select id="monthSelect" aria-label="Choisir une date">
                     <option class="month-option" aria-label="Choisir une date" label="Choisir une date" value="">Choisir
                         une date</option>
-                    <option value="2025-04-01T00:00:00.000Z,2025-05-01T00:00:00.000Z">Avril-2025</option>
-                    <option value="2025-05-01T00:00:00.000Z,2025-06-01T00:00:00.000Z">Mai-2025</option>
                     <option value="2025-06-01T00:00:00.000Z,2025-07-01T00:00:00.000Z">Juin-2025</option>
                     <option value="2025-07-01T00:00:00.000Z,2025-08-01T00:00:00.000Z">Juillet-2025</option>
+                    <option value="2025-08-01T00:00:00.000Z,2025-09-01T00:00:00.000Z">Août-2025</option>
+                    <option value="2025-09-01T00:00:00.000Z,2025-10-01T00:00:00.000Z">Septembre-2025</option>
                 </select>
                 <div id="filters">
                     <button class="filter" id="first-zone" name="aven"><span id="aven">AVEN</span></button>
@@ -130,4 +130,4 @@ <h1 id="exposection">Expositions / Festivals</h1>
     <script src="./js/listeners.js?v=100"></script>
 </body>
 
-</html>
+</html>