dnn webrings en reduced motion

index.html

@@ -131,7 +131,7 @@
 
                           <!-- MESSAGE DE BIENVENUE -->
                     <aside>
-                      <button tabindex="0" type="button" popovertarget="msgWindow" popoveraction="show" aria-controls="msgWindow" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
+                      <button tabindex="0" type="button" popovertarget="msgWindow" popoveraction="show" aria-controls="msgPanel" class="iconBtnStyle" id="openMsg" aria-label="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>
@@ -256,7 +256,8 @@
           <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 tabindex="0" href="https://drags-nerds.net"  aria-label="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 tabindex="0" href="https://peertube.1312.media/"  aria-label="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">

style/main.css

@@ -739,6 +739,11 @@ main{
                 margin-top: -7.77px;
               }
 
+              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;
+      }
+    }
 }