Modification du texte, du style et dequeerisation

index.html

@@ -31,7 +31,7 @@
     <header>
         <h1>
             <img id="logo" src="assets/logo/logo-forme.svg" alt="Logo du LOL : en jaune sur fond noir, la transcription visuelle des lettre L, O et L en morse, encadré d'un épaisse bordure">
-            <span aria-hidden="true" class="cool-name">L<span class="trans-symbol">⚧</span>L</span>
+            <span aria-hidden="true" class="cool-name">LOL</span>
             <span class="plain-name">LOL</span>
         </h1>
 
@@ -50,10 +50,12 @@
 
           <section id="titleSection" class="solidBox">
               <h2>
-                  Hackerspace queer
+                  Hackerspace
               </h2>
               <p>
-                  Lieu de réappropriation, <br>
+                  <br>
+                  Lieu autogéré <br>
+                  de réappropriation, <br>
                   réparation & recyclage <br>
                   des objets techniques <br>
                   & technologiques
@@ -78,13 +80,22 @@
             -->
           </section>
 
-          <address class="transparentBox" aria-label="Adresse du lieu">
+          <div class="access-info-box transparentBox">
-              7 place Chazette<br>
+            <address aria-label="Adresse du lieu">
-              69001 Lyon<br>
+                7 place Chazette<br>
-              <br>
+                69001 Lyon<br>
-              45° 46' 23.698" N<br>
+                <br>
-              4° 50' 14.052" E
+                45° 46' 23.698" N<br>
-          </address>
+                4° 50' 14.052" E
+            </address>
+  
+            <ul aria-label="Téléphones du lieu">
+                <li> &#128439; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
+                <li> &#9990; Tel EPVPN : <a href="tel:5256">5256</a></li>
+                <li> &#128439; 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="planContainer" class="transparentBox">
@@ -161,21 +172,37 @@
         <a href="status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
         </section>
       <aside id="extraContent">
-        <p id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs"> 
+        <div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
-          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,
+          <p> 
-          qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
+            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,
-          Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
+            qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
-          <br><br>
+            Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
-          Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
+            <br><br>
-          Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
+            Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-          Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles, il y'a une place pour toi !
+            Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, les objets, les techniques etc.
-          <br><br>
+            Le lieu est autogéré, défini par ses utilisateur·ices et en fonctions de ses besoins : peu importe sur quoi tu travailles, il y'a une place pour toi !
-          Nous revendiquons l'ouverture du code et des techniques,<br>
+            <br><br>
-          le partage des connaissances et l'autogestion,<br>
+            Nous revendiquons l'ouverture du code et des techniques,<br>
-          l'anti-capitalisme et l'anti-fascisme. <br><br>
+            le partage des connaissances et l'autogestion,<br>
-          Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
+            l'anti-capitalisme et l'anti-fascisme. <br><br>
-          Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
+            Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
-        </p>
+            Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
+          </p>
+
+          <dl>
+            <dt>Hackerspace</dt>
+            <dd>
+              n.m. : Tiers lieu de réunion et de rencontre entre personnes désirant comprendre, créer ou détourner des objets techniques ou technologiques.
+            </dd>
+
+            <dt>Hackeuse, Hacker</dt>
+            <dd>
+              n. : Personne ayant un intérêt dans la technique ou la technologie et faisant un usage creatif et/ou utile de celle-ci par le détournement.
+            </dd>
+            </dt>
+          </dl>
+        </div>
+
         <section id="eventSection" class="transparentBox">
   			       <h3>Événements <small>à venir</small></h3>
                 <article class="solidBox">

js/floating.js

@@ -5,16 +5,19 @@ export function makeItFloat(target){
 
     let startX, startY;
     let clicked = false;
+    let selectedPointer;
 
-    startTarget.addEventListener('mousedown', (event) => {
+    startTarget.addEventListener('pointerdown', (event) => {
-    startX = event.pageX;
+        selectedPointer = event.pointerId;
-    startY = event.pageY;
+        startX = event.pageX;
-    clicked = true;
+        startY = event.pageY;
-    console.log('clicking...')
+        console.log('clicking...')
     })
 
-    document.addEventListener('mousemove', (event) => {
+    document.addEventListener('pointermove', (event) => {
-    if(clicked){
+    if(event.pointerId === selectedPointer){
+        event.preventDefault();
+        document.querySelector('html').style.overflow = 'hidden';
         console.log('moving...')
         let currentX = event.pageX;
         let currentY = event.pageY;
@@ -27,8 +30,15 @@ export function makeItFloat(target){
     }
     });
 
-    document.addEventListener('mouseup', () => {
+    document.addEventListener('pointerup', () => {
-    console.log('STOP !')
+        console.log('STOP !')
-    clicked = false;
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
+    })
+
+    document.addEventListener('pointercancel', () => {
+        console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
     })
 }

js/main.js

@@ -19,33 +19,3 @@ loadStatus()
 // ======================================== floating message window
 
 makeItFloat(document.querySelector('#msgWindow'));
-makeItFloat(document.querySelector('#addUserWindow'));
-
-/*
-//================================ tentative de gestion des écran tactiles
-startTarget.addEventListener('touchstart', (event) => {
-  startX = event.pageX;
-  startY = event.pageY;
-  clicked = true;
-  console.log('touching...')
-})
-
-document.addEventListener('touchmove', (event) => {
-  if(clicked){
-    console.log('moving...')
-    let currentX = event.pageX;
-    let currentY = event.pageY;
-    let moveX = target.offsetLeft + currentX - startX;
-    target.style.left =  moveX + 'px';
-    let moveY = target.offsetTop + currentY - startY;
-    target.style.top = moveY + 'px';
-    startX = currentX;
-    startY = currentY;
-  }
-});
-
-document.addEventListener('touchend', () => {
-  console.log('STOP !')
-  clicked = false;
-})
-*/

spaceapi/space.json

@@ -1,5 +1,8 @@
 {
-  "api_compatibility": ["14", "15"],
+  "api_compatibility": [
+    "14",
+    "15"
+  ],
   "space": "Laboratoire Ouvert Lyonnais",
   "logo": "https://labolyon.fr/images/logo_picto.svg",
   "url": "https://labolyon.fr/",
@@ -21,7 +24,8 @@
       "closed": "https://labolyon.fr/status/status.ferm%C3%A9.png",
       "open": "https://labolyon.fr/status/status.ouvert.png"
     },
-    "open": false
+    "open": false,
+    "lastchange": 1788302721
   },
   "projects": [
     "https://git.labolyon.fr/",

status/index.ouvert.html

@@ -3,21 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg" href="../assets/favicon_open.svg" />
+    <link rel="icon" type="image/svg" href="assets/favicon.svg" />
-    <!-- STYLE A IMPORTER EN 1ER -->
+    <link rel="stylesheet" href="status/closedStyle.css">
-    <link rel="stylesheet" href="status/openStyle.css">
-
     <link rel="stylesheet" href="style/animation.css">
+    <link rel="stylesheet" href="style/typo.css">
     <link rel="stylesheet" href="style/reduced.css">
-    <title>Le LOL est Ouvert</title>
+    <title>Le LOL est Fermé ...</title>
 </head>
-<body id="lolIsOpen">
+<body id="lolIsClosed">
-    <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
     <canvas data-cute-texture class="cute-texture"></canvas>
-    <main id="openContainer">
+    <main id="closedContainer">
         <section>
           <p>Le LOL est actuellement</p>
-          <h3 id="lolStatus">ouvert !</h3>
+          <h3 id="lolStatus">fermé ...</h3>
         </section>
     </main>
     
@@ -26,40 +24,30 @@
 uniform highp vec4 uRandom;
 // Size (in logical pixel) of current CuteTexture canvas
 uniform highp vec2 uCanvasSize;
-// Number of seconds since canvas was initialized
-uniform lowp float uTime;
-// Current frame of first video with [data-cute-texture-video] attribute
-uniform sampler2D uVideo;
 // Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
 varying highp vec2 vTextureCoord;
 
 void main() {
-    highp float waveSize = 10.0;
+    highp float pixelSize = 50.0;
-    highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
+    highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
-    highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
+    highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
-    lowp float opacity = 0.25;
+    lowp float opacity = 0.5;
 
-    gl_FragColor = vec4(
+    highp vec4 baseColor = vec4(
         0.0,
         lum,
-        0.0,
+        lum,
         1.0
     );
 
+    highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
+
     gl_FragColor = vec4(
-        gl_FragColor.rgb * opacity,
+        rotatedColor.x*opacity,
+        rotatedColor.y*opacity,
+        rotatedColor.z*opacity,
         1.0
     );
-
-    highp vec2 videoCoords = (vTextureCoord.xy / 1.5) + vec2(0, 0.25);
-    highp vec4 videoPix = clamp(( grayscale(texture2D(uVideo, videoCoords), 1.0) * 2.0 ), vec4(0), vec4(1));
-    videoPix *= 0.777;
-
-    gl_FragColor = abs( (videoPix*1.2) - gl_FragColor );
-    
-    gl_FragColor.xyz *= 0.9;
-    
-    gl_FragColor.a = 1.0;
 }
     </script>
 

status/set-status.sh

@@ -8,7 +8,8 @@ if [ "$#" = "0" ]; then
     exit 1
 fi
 
-SPACE_JSON=/var/www/html/spaceapi/space.json
+#SPACE_JSON=/var/www/html/spaceapi/space.json
+SPACE_JSON="$(dirname $0)/../spaceapi/space.json"
 
 if [ "$1" = "opened" ]; then
     ln -sf "index.ouvert.html" "$(dirname $0)/index.html"

style/default.css

@@ -23,7 +23,7 @@ a button{
 
 p,h1,h2,h3,h4{
   cursor: inherit;
-  pointer-events: none !important;
+  pointer-events: none;
   padding: 0;
   margin: 0;
 }

style/main.css

@@ -63,9 +63,10 @@ header{
                 }
 
                 .cool-name{
-                  font-family: 'karrik';
+                  font-family: 'pressStart';
                   font-size: 50px;
                   padding-top: 13.12px;
+                  
 
                   .trans-symbol{
                     font-family: 'velvelyne';
@@ -145,6 +146,18 @@ main{
         grid-template-columns: 2.5fr 2fr 1fr;
         grid-template-rows: 1fr 1.5fr;
 
+              .access-info-box {
+                grid-column: 2 / 4;
+                grid-row: 1;
+                font-size: 15px;
+                z-index: 5;
+                padding-top: 50px;
+
+                address {
+                  margin-bottom: 2em;
+                }
+              }
+
               aside{
                 grid-row: 2;
                 grid-column: 2;
@@ -194,9 +207,15 @@ main{
                                 border-width: 3.33px;
                                 border-style: double solid solid;
 
+                                h4{
+                                  user-select: none;
+                                  pointer-events: all;
+                                }
+
                                       p{
                                         padding: 7.77px;
                                         padding-right: 16.1px;
+                                        
 
                                               strong{
                                                 font-family: 'karrik';
@@ -223,7 +242,7 @@ main{
                 grid-row: 1;
                 width: 100%;
                 height: 100%;
-
+                      
                       h2{
                         text-transform: uppercase;
                         font-family: 'karrik';
@@ -289,14 +308,6 @@ main{
                       }
               }
 
-              address{
-                grid-column: 2;
-                grid-row: 1;
-                width: 150%;
-                font-size: 15px;
-                padding-top: 33px;
-              }
-
               #planSection{
                 grid-column: 1 / 3;
                 grid-row: 2;
@@ -337,7 +348,7 @@ main{
                 grid-column: 3;
                 grid-row: 1;
                 width: 77%;
-                height: 133%;
+                height: 122%;
                 justify-self: end;
 
                 display: flex;
@@ -489,6 +500,19 @@ main{
         justify-content: flex-start;
         align-items: flex-start;
 
+              dl dt {
+                clear: both;
+                float: left;
+                margin-right: 1ex;
+                font-family: "karrik", sans-serif;
+                text-transform: uppercase;
+              }
+
+              dl dd {
+                margin-left: 0;
+                margin-bottom: 1em;
+              }
+
               #aboutSection{
                 padding: 13.12px;
                 padding-right: 33px;

style/responsive.css

@@ -40,6 +40,10 @@
       grid-template-columns: 2fr 2fr 1fr;
       grid-template-rows: 0.7fr 2fr;
 
+      .access-info-box {
+        padding-top: 0;
+      }
+
           aside{
             grid-column: 3;
             margin-bottom: 33px;