plus de contraste affiche permanences, icon dispo partout, gitignore

.gitignore

@@ -1 +0,0 @@
-status/index.html

affiches/mardis/index.html

@@ -26,7 +26,7 @@
     <style>
         :root{
             --mardi-back-color: rgb(37, 1, 65);
-            --mardi-main-color: rgb(255, 74, 231);
+            --mardi-main-color: rgb(255, 161, 255);
             --mardi-accent-color: rgb(0, 255, 21);
         }
 
@@ -36,6 +36,7 @@
             align-items: flex-start;
             justify-content: flex-start;
             background-color: var(--mardi-main-color);
+            filter: none !important;
 
                @container( width > 650px ){
                     flex-direction: row;
@@ -55,7 +56,7 @@
                         box-sizing: border-box;
                         overflow: hidden;
                         gap: 3.33px;
-                        padding-top: 3.33px;
+                        padding-top: 0;
 
                         img{
                             max-width: 34%;

index.html

@@ -19,7 +19,7 @@
 
     <!--OPEN GRAPHS-->
     <meta property="og:title" content="Laboratoire Ouvert Lyonnais">
-    <meta property="og:description" content="Hackerspace Queer">
+    <meta property="og:description" content="Hackerspace Lyonnais">
     <meta property="og:url" content="https://labolyon.fr/">
     <meta property="og:image" content="assets/logo/logo_picto.svg">
     <meta property="og:type" content="website">
@@ -35,12 +35,12 @@
             <span class="plain-name">LOL</span>
         </h1>
 
-        <nav aria-label="outils numériques du LOL">
+        <nav>
             <ul>
-                <li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle">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">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">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">Fediverse</a></li>
+                <li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" >Fediverse</a></li>
             </ul>
         </nav>
     </header>
@@ -81,7 +81,7 @@
           </section>
 
           <div class="access-info-box transparentBox">
-            <address aria-label="Adresse du lieu">
+            <address>
                 7 place Chazette<br>
                 69001 Lyon<br>
                 <br>
@@ -89,15 +89,15 @@
                 4° 50' 14.052" E
             </address>
 
-            <ul aria-label="Téléphones du lieu">
+            <ul>
-                <li> &#128439; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
+                <li> &#x1f4e0; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
-                <li> &#9990; Tel EPVPN : <a href="tel:5256">5256</a></li>
+                <li> &#x1f4de; Tel EPVPN : <a href="tel:5256">5256</a></li>
-                <li> &#128439; Fax EPVPN : <a href="tel:5257">5257</a></li>
+                <li> &#x1f4e0;  Fax EPVPN : <a href="tel:5257">5257</a></li>
             </ul>
           </div>
 
 
-          <div id="planSection" class="transparentBox" aria-label="Plan d'accès du local">
+          <div id="planSection" class="transparentBox" title="Plan d'accès du local">
             <div id="planContainer" class="transparentBox">
       				<img src="assets/plan.svg" id="plan" alt="Sonnez à l'interphone Laboratoire Ouvert Lyonnais au 7 Place Chazette 69001, puis avancez tout droit, traversez la cour, et avancez encore, la porte se situe après l'ascenceur, sur la droite">
       				<svg aria-hidden="true" id="fleche" viewBox="0 0 4215.93 2604.36">
@@ -123,25 +123,25 @@
             </div>
           </div>
 
-          <div id="extLinkSection" class="transparentBox" aria-label="Liens externes">
+          <div id="extLinkSection" class="transparentBox" title="Liens externes">
-            <a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank" aria-label="hackerspace.org est un site qui recense les hackerspaces en Europe">
+            <a href="https://www.hackerspaces.org/" id="hackerLogo" title="hackerspace.org est un site qui recense les hackerspaces en Europe">
                 <img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
             </a>
           </div>
 
                           <!-- MESSAGE DE BIENVENUE -->
                     <aside>
-                      <button type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
+                      <button type="button" popovertarget="msgWindow" popoveraction="show" aria-controls="msgPanel" class="iconBtnStyle" id="openMsg" title="ouvrir le message de bienvenue">
                         <svg class="icon" viewBox="0 0 40.19 38.9" aria-hidden="true">
                           <path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
                         </svg>
                       </button>
 
-                      <div id="msgWindow" popover="auto">
+                      <div  id="msgWindow" popover="auto">
-                        <dialog class="floatingWindow" aria-label="Message de bienvenue du LOL">
+                        <dialog tabindex="-1" id="msgPanel" aria-expanded="false" class="floatingWindow" aria-label="Message de bienvenue du LOL">
                           <h4 class="title">
                             Bienvenue sur le site du LOL!
-                            <button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" aria-label="Fermer la fenêtre">
+                            <button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" title="Fermer la fenêtre" autofocus>
                               <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>
@@ -169,10 +169,10 @@
                 <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
             </p>
         </div>
-        <a href="status" 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">
+        <div id="aboutSection" class="solidBox">
           <p>
             Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
             qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
@@ -209,37 +209,7 @@
                 <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">
+                  <a href="/affiches/mardis/" class="iconBtnStyle"  title="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>
@@ -248,15 +218,25 @@
 
         </section>
       </aside>
-      <footer id="webRingSection" aria-label="les copaines du LOL">
+      <footer id="webRingSection" title="les copaines du LOL">
-        <a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
+        <a href="https://berthe.cc"  title="berthe.cc">
           <img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
         </a>
-        <a href="https://murmure.cafe" target="_blank" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
+        <a href="https://murmure.cafe"  title="murmure.café, collectif de réappropriation du web et des réseaux">
           <img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
         </a>
-        <a href="https://drags-nerds.net" target="_blank" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
+        <a href="https://drags-nerds.net"  title="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
-          <img class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+          <img id="flashDNN" class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+          <img id="reducedDNN" src="/assets/webRings/dnn-reduced-motion.png" alt="les lettres #, D, et, N en gros pixel blanc sur fond noir avec un léger effet 3D, alternée entre vert et rose, toujours fluo ">
+        </a>
+        <a href="https://peertube.1312.media/"  title="the 1312 media collective">
+          <img src="/assets/webRings/1312.media-webring.png" alt="le logo antifasciste et un texte rouge très large, the 1312 media collective">
+        </a>
+        <a href="https://vinishor.tf/"  title="vinishor.tf">
+          <img src="/assets/webRings/vinishor-webring.png" alt="un poisson globe jaune pixelisé et l'inscription vinishor.tf sur un fond marron">
+        </a>
+        <a href="https://wiki.labolyon.fr/doku.php?id=transe-telecom/"  title="trans telecom, service de téléphonie et fax LOL">
+          <img src="/assets/webRings/ima_342027e.jpeg" alt="une parodie du logo France Telecom avec un petit coeur et l'inscription  Trans Telecom">
         </a>
       </footer>
       <noscript>

js/events.js

@@ -39,9 +39,12 @@ function createEntry(title, date, html, style){
   const newEntry = document.createElement('details');
   const newSummary = document.createElement('summary');
   newSummary.append(title, date);
+  newSummary.setAttribute('tabindex', '0');
 
   newEntry.append(newSummary);
 
+  html.setAttribute('tabindex', '-1');
+
   newEntry.append(html);
 
   newEntry.name = "eventList"

status/index.html

@@ -0,0 +1 @@
+index.ouvert.html

style/common.css

@@ -27,6 +27,10 @@
   border-color: var(--back-color);
 }
 
+.textBtnStyle:focus{
+  filter: hue-rotate(180deg);
+}
+
 .iconBtnStyle{
   display: flex;
   flex-direction: column;
@@ -56,6 +60,10 @@
   animation: none;
 }
 
+.iconBtnStyle:focus{
+  filter: hue-rotate(180deg);
+}
+
 @media(min-width: 1300px){
   .textBtnStyle{
     font-size: 19px;
@@ -68,7 +76,6 @@
 
 .solidBox{
   width: 100%;
-  height: 100%;
   position: relative;
   z-index: 0;
 
@@ -167,7 +174,7 @@
     padding-right: 7.77px;
 
     box-sizing: border-box;
-    cursor: move;
+    cursor: url(../assets/cursor/move.png) 2 16 , auto;
 
     h4{
       pointer-events: none;

style/default.css

@@ -6,12 +6,9 @@ input {
 a{
   text-decoration: none;
   color: inherit;
-  cursor: alias;
+  cursor: url(../assets/cursor/lien.png) 2 2 , auto;
 }
 
-button{
-  cursor: cell;
-}
 
 a p{
   cursor:inherit;
@@ -37,3 +34,11 @@ ul,ol {
 dialog{
   padding: 0;
 }
+dialog:focus{
+  outline:none;
+  filter: hue-rotate(180deg);
+}
+
+button:focus, a:focus, summary:focus{
+  outline:none;
+}

style/main.css

@@ -27,6 +27,8 @@ body{
   position: relative;
   z-index: -33;
   box-sizing: border-box;
+
+  cursor: url(../assets/cursor/default.png) 2 2 , auto;
 }
 /*================ STRUCTURE ======================*/
 
@@ -156,6 +158,14 @@ main{
                 address {
                   margin-bottom: 2em;
                 }
+
+                ul li{
+                  margin-bottom: 3.33px;
+                }
+
+                ul li a:focus{
+                  filter: hue-rotate(180deg);
+                }
               }
 
               aside{
@@ -178,9 +188,11 @@ main{
                         box-sizing: border-box;
 
                         border-radius: 13.12px;
+
+                        cursor: url(../assets/cursor/msg.png) 2 16 , auto;
                       }
 
-                      #openMsg:hover{
+                      #openMsg:hover, #openMsg:focus{
                         animation: none;
                       }
 
@@ -197,7 +209,7 @@ main{
                               .floatingWindow{
                                 width: 277px;
                                 height: auto;
-                                margin-top: 33px;
+                                margin: 0;
 
                                 text-transform: none;
                                 font-size: 15px;
@@ -362,7 +374,6 @@ main{
                 z-index: 333;
 
                 a{
-                  cursor: alias;
                         img{
                           width: auto;
                           height: 55px;
@@ -370,6 +381,14 @@ main{
                         }
                 }
 
+                a:focus, a:hover{
+                  background-color: var(--back-color);
+                  img{
+                    filter: invert();
+
+                  }
+                }
+
               }
 
               #adhesionSection{
@@ -500,7 +519,6 @@ main{
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
-        align-items: flex-start;
 
               dl dt {
                 clear: both;
@@ -581,6 +599,10 @@ main{
                           border-color: var(--back-color);
                         }
 
+                        .solidBox:has(details){
+                          overflow: hidden;
+                        }
+
                         .solidBox:has(details[open]){
                           color: var(--back-color);
                           background-color: var(--main-color);
@@ -593,8 +615,8 @@ main{
                           margin-right: 16.1px;
                           width: calc(100% - 32.2px);
 
-                          details{
+                          summary{
-                            cursor: default;
+                            background-color: var(--main-color);
                           }
 
                         }
@@ -643,7 +665,6 @@ main{
                         details{
                           width: 100%;
                           height: 100%;
-                          cursor: copy;
                           overflow: hidden;
 
                                 summary{
@@ -655,16 +676,32 @@ main{
                                   box-sizing: border-box;
                                   list-style-type: none;
                                   padding: 16.1px;
+                                  background-color: var(--back-color);
+
+                                  cursor: url(../assets/cursor/default.png) 2 16 , auto;
+
+                                }
+
+                                &:not([open]) summary{
+                                  cursor: url(../assets/cursor/details.png) 2 16 , auto;
                                 }
 
                                 article{
                                   width: 100%;
-                                  cursor: default;
                                   text-transform: none;
                                 }
                         }
+
+                        summary:hover{
+                          background-color: var(--main-color);
+                        }
+
+                        summary:focus{
+                          filter: hue-rotate(180deg);
+
+                        }
                 }
-      }
+    }
 
       #webRingSection{
         width: 100%;
@@ -677,14 +714,22 @@ main{
         border-style: solid;
         border-width: thin 0 0 0;
         grid-template-columns: repeat(4, 1fr);
-        gap: 7.77px;
+        box-sizing: border-box;
+        gap: 13.12px;
 
               a{
                 width: 100%;
-                height: 31px;
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                align-items: flex-end;
+                margin-top: 3.33px;
+                transition: 0.333s;
 
                       img{
                         width: 100%;
+                        image-rendering: pixelated;
+
                       }
 
                       .needOutline{
@@ -694,6 +739,15 @@ main{
                       }
               }
 
+              a:focus, a:hover{
+                margin-top: -4.44px;
+              }
+
+              a #reducedDNN{
+                visibility: collapse;
+                display: none;
+              }
+
 
       }
 }

style/reduced.css

@@ -9,4 +9,16 @@
     main aside #openMsg{
         animation: none !important;
     }
+
+    main #webRingSection{
+      a #reducedDNN{
+        visibility: visible;
+        display: inline;
+      }
+
+      a #flashDNN{
+        visibility: collapse;
+        display: none;
+      }
+    }
 }

style/responsive.css

@@ -173,6 +173,22 @@
               left: unset;
               right: 33px;
               top: 33vh;
+              width: 444px; 
+
+                    .floatingWindow{
+                      width: 444px;
+                      
+                        .title{
+                          font-size: 22px;
+                          height: 50px;
+
+                          .iconBtnStyle{
+                            width: 36px;
+                            height: 36px;
+                            border-radius: 22px;
+                          }
+                        }
+                    }
             }
 
             #openMsg{
@@ -185,19 +201,7 @@
               width: auto;
             }
 
-            dialog{
             
-                .title{
-                  font-size: 22px;
-                  height: 50px;
-
-                  .iconBtnStyle{
-                    width: 36px;
-                    height: 36px;
-                    border-radius: 22px;
-                  }
-                }
-            }
           }
 
           #titleSection{
@@ -241,17 +245,6 @@
             }
           }
 
-          #adhesionSection{
-            width: 50%;
-            margin-left: 16.1px;
-            margin-bottom: 77px;
-
-            .textBtnStyle{
-              height: 44px;
-              font-size: 20px;
-            }
-          }
-
     }
 
     #statuSection{