feature - implement more deuil électoral

adcousin · adcousin · commit afc2f8b1fcf2 · 2026-03-23T12:00:48.000+01:00
diff --git a/frugal.css b/frugal.css
@@ -399,6 +399,11 @@ span.gouel-ville-proche {
     width: 50%;
 }
 
+.header-title {
+    white-space: nowrap;
+    padding-left: 30px;
+}
+
 .deuil-ribbon {
     display: inline-block;
     width: 12px;
@@ -429,6 +434,44 @@ span.gouel-ville-proche {
     }
 }
 
+header {
+    position: relative;
+    /* overflow: hidden; */
+}
+
+.deuil-corner-ribbon {
+    position: absolute;
+    top: 0;
+    /* left: 0; */
+    width: 232px;       /* Longueur de la bande */
+    height: 30px;       /* Épaisseur de la bande */
+    background: #000;
+    color: #fff;
+    
+    /* Rotation et placement */
+    transform: rotate(-52deg) translate(-87px, -51px);
+    transform-origin: center;
+    
+    z-index: 999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.3);
+    pointer-events: none; /* Permet de cliquer sur les liens dessous si besoin */
+}
+
+/* Ajustement pour mobile si nécessaire */
+@media (max-width: 799px) {
+    .deuil-corner-ribbon {
+        left: -20px;
+        width: 142px;
+        height: 20px;
+        transform: rotate(-52deg) translate(-45px, -10px)
+        
+    }
+
+    .header-title {
+        padding-left: 20px;
+    }
+}
+
 /* MEDIA QUERIES --- pour la lecture sur ordinateur, mobile et papier  */
 @media only screen and (max-width: 799px)
 /*HANDHELD*/
diff --git a/index.html b/index.html
@@ -72,9 +72,10 @@
 
 <body>
     <header>
+        <div class="deuil-corner-ribbon" title="En deuil"></div>
         <div id="title">
             <div id="info-container">
-                <h1 style="white-space: nowrap;">Ꝃlandrier.cc <span class="deuil-ribbon" title="En deuil électoral"></span></h1>
+                <h1 class="header-title">Ꝃlandrier.cc <span class="deuil-ribbon" title="En deuil électoral"></span></h1>
                 <p id="description">Agenda collaboratif des évènements autour de Concarneau</p>
                 <span id="infos-link"> <a href="./diwar-benn.html">Ajouter un évènement manquant ou en savoir plus</a>
                 </span>
@@ -89,9 +90,9 @@ <h1 style="white-space: nowrap;">Ꝃlandrier.cc <span class="deuil-ribbon" title
                 <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="2026-02-01T00:00:00.000Z,2026-03-01T00:00:00.000Z">Février-2026</option>
                     <option value="2026-03-01T00:00:00.000Z,2026-04-01T00:00:00.000Z">Mars-2026</option>
                     <option value="2026-04-01T00:00:00.000Z,2026-05-01T00:00:00.000Z">Avril-2026</option>
+                    <option value="2026-05-01T00:00:00.000Z,2026-06-01T00:00:00.000Z">Mai-2026</option>
                 </select>
                 <div id="filters">
                     <button class="filter" id="first-zone"><span>TRES PROCHE</span></button>
