Suppression de la marge, ajout des bordures arrondies ainsi que la délicate petite fleche de la velvelyne

index.html

@@ -37,10 +37,10 @@
 
         <nav aria-label="outils numériques du LOL">
             <ul>
-                <li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" target="_blank">Git</a></li>
+                <li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle">Git</a></li>
-                <li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" target="_blank">Wiki</a></li>
+                <li><a href="https://wiki.labolyon.fr/" class="textBtnStyle">Wiki</a></li>
-                <li><a href="https://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle" target="_blank">Matrix</a></li>
+                <li><a href="https://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle">Matrix</a></li>
-                <li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" target="_blank">Fediverse</a></li>
+                <li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle">Fediverse</a></li>
             </ul>
         </nav>
     </header>
@@ -169,7 +169,7 @@
                 <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
             </p>
         </div>
-        <a href="status" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
+        <a href="status" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
         </section>
       <aside id="extraContent">
         <div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
@@ -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,15 +205,47 @@
 
         <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>
-                  <a href="/affiches/mardis/" class="iconBtnStyle" target="_blank" aria-label="Plus d'infos sur cet évènement">
+                  <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>
+
+                <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

@@ -544,7 +544,6 @@ main{
                           margin-bottom: 7.77px;
                         }
 
-
                         article{
                                 h4{
                                   padding: 16.1px;
@@ -590,6 +589,9 @@ main{
                           margin-top: 7.77px;
                           overflow: hidden;
                           margin-bottom: 7.77px;
+                          margin-left: 16.1px;
+                          margin-right: 16.1px;
+                          width: calc(100% - 32.2px);
 
                           details{
                             cursor: default;
@@ -597,6 +599,38 @@ main{
 
                         }
 
+                        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;