Merge branch 'v333' of https://git.labolyon.fr/LOL/labolyon.fr into v333

index.html

@@ -185,7 +185,7 @@
             Nous revendiquons l'ouverture du code et des techniques,<br>
             le partage des connaissances et l'autogestion,<br>
             l'anti-capitalisme et l'anti-fascisme. <br><br>
-            Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
+            Nous condamnons donc toute forme de discrimination et d'opressions dans nos locaux.
             Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
           </p>
 
@@ -205,6 +205,7 @@
 
         <section id="eventSection" class="transparentBox">
   			       <h3>Événements <small>à venir</small></h3>
+
                 <article class="solidBox">
                   <h4>Permanences du LOL</h4>
                   <p class="date">↻ Mardi & Samedi</p>
@@ -214,6 +215,37 @@
                     </svg>
                   </a>
                 </article>
+
+                <article class="solidBox">
+                  <h4>Permanences du LOL</h4>
+                  <p class="date">↻ Mardi & Samedi</p>
+                  <a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
+                    <svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
+                      <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+                    </svg>
+                  </a>
+                </article>
+
+                <article class="solidBox">
+                  <h4>Permanences du LOL</h4>
+                  <p class="date">↻ Mardi & Samedi</p>
+                  <a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
+                    <svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
+                      <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+                    </svg>
+                  </a>
+                </article>
+
+                <article class="solidBox">
+                  <h4>Permanences du LOL</h4>
+                  <p class="date">↻ Mardi & Samedi</p>
+                  <a href="/affiches/mardis/" class="iconBtnStyle" aria-label="Plus d'infos sur cet évènement">
+                    <svg viewBox="0 0 53.73 53.59" class="icon" aria-hidden="true">
+                      <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+                    </svg>
+                  </a>
+                </article>
+
         </section>
       </aside>
       <footer id="webRingSection" aria-label="les copaines du LOL">

style/main.css

@@ -140,7 +140,7 @@ main{
   overflow: hidden;
 
       #homeContent{
-        height: 66vh;
+        min-height: 66vh;
         width: 100%;
         position:relative;
         z-index: 0;
@@ -363,6 +363,8 @@ main{
                 margin-top: 7.77px;
                 gap: 13.12px;
 
+                z-index: 333;
+
                 a{
                         img{
                           width: auto;
@@ -545,7 +547,6 @@ main{
                           margin-bottom: 7.77px;
                         }
 
-
                         article{
                                 h4{
                                   padding: 16.1px;
@@ -591,9 +592,44 @@ main{
                           margin-top: 7.77px;
                           overflow: hidden;
                           margin-bottom: 7.77px;
+                          margin-left: 16.1px;
+                          margin-right: 16.1px;
+                          width: calc(100% - 32.2px);
 
                         }
 
+                        article:first-of-type,
+                        article.solidBox:first-of-type:has(details[open]),
+                        article:has(details[open]) + article {
+                          margin-top: 0;
+                          border-top-left-radius: 16.1px;
+                          border-top-right-radius: 16.1px;
+                        }
+
+                        article:last-of-type,
+                        article.solidBox:last-of-type:has(details[open]),
+                        article:has( + article details[open]) {
+                          margin-bottom: 0;
+                          border-bottom-left-radius: 16.1px;
+                          border-bottom-right-radius: 16.1px;
+                        }
+
+                        article details summary::before {
+                          content: "→";
+                          font-size: 2em;
+                          flex: 0;
+                          flex-shrink: 0;
+                          transition: ease-out 0.3s transform;
+                        }
+
+                        article details[open] summary::before {
+                          transform: rotate(90deg);
+                        }
+
+                        article details summary h4 {
+                          flex: 1;
+                        }
+
                         .iconBtnStyle{
                           width: 33px;
                           height: 33px;

style/responsive.css

@@ -36,7 +36,7 @@
 
   main{
     #homeContent{
-      height: 77vh;
+      min-height: 77vh;
       grid-template-columns: 2fr 2fr 1fr;
       grid-template-rows: 0.7fr 2fr;