Modification du texte, du style et dequeerisation

2026-09-02 00:51:16 +02:00
parent 24334511f3
commit dda83b7d4d
9 changed files with 138 additions and 110 deletions
@@ -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">
-              7 place Chazette<br>
-              69001 Lyon<br>
-              <br>
-              45° 46' 23.698" N<br>
-              4° 50' 14.052" E
-          </address>
+          <div class="access-info-box transparentBox">
+            <address aria-label="Adresse du lieu">
+                7 place Chazette<br>
+                69001 Lyon<br>
+                <br>
+                45° 46' 23.698" N<br>
+                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"> 
-          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>
-          Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
-          <br><br>
-          Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
-          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.
-          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 !
-          <br><br>
-          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>
-          Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
-        </p>
+        <div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
+          <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>
+            Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
+            <br><br>
+            Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
+            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.
+            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 !
+            <br><br>
+            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>
+            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">
@@ -5,16 +5,19 @@ export function makeItFloat(target){

    let startX, startY;
    let clicked = false;
+    let selectedPointer;

-    startTarget.addEventListener('mousedown', (event) => {
-    startX = event.pageX;
-    startY = event.pageY;
-    clicked = true;
-    console.log('clicking...')
+    startTarget.addEventListener('pointerdown', (event) => {
+        selectedPointer = event.pointerId;
+        startX = event.pageX;
+        startY = event.pageY;
+        console.log('clicking...')
    })

-    document.addEventListener('mousemove', (event) => {
-    if(clicked){
+    document.addEventListener('pointermove', (event) => {
+    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', () => {
-    console.log('STOP !')
-    clicked = false;
+    document.addEventListener('pointerup', () => {
+        console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
+    })
+
+    document.addEventListener('pointercancel', () => {
+        console.log('STOP !')
+        selectedPointer = null;
+        document.querySelector('html').style.overflow = '';
    })
 }
@@ -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;
-})
-*/
@@ -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/",
@@ -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" />
-    <!-- STYLE A IMPORTER EN 1ER -->
-    <link rel="stylesheet" href="status/openStyle.css">
-
+    <link rel="icon" type="image/svg" href="assets/favicon.svg" />
+    <link rel="stylesheet" href="status/closedStyle.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">
-    <video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
+<body id="lolIsClosed">
    <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 vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
-    highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
-    lowp float opacity = 0.25;
+    highp float pixelSize = 50.0;
+    highp vec2 coords = floor((uCanvasSize.xy * vTextureCoord.xy) / pixelSize);
+    highp float lum = (noise1(uRandom.yz+coords) * 0.631372549);
+    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>

@@ -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"
@@ -23,7 +23,7 @@ a button{

 p,h1,h2,h3,h4{
  cursor: inherit;
-  pointer-events: none !important;
+  pointer-events: none;
  padding: 0;
  margin: 0;
 }
@@ -63,10 +63,11 @@ header{
                }

                .cool-name{
-                  font-family: 'karrik';
+                  font-family: 'pressStart';
                  font-size: 50px;
                  padding-top: 13.12px;
                  
+
                  .trans-symbol{
                    font-family: 'velvelyne';
                    font-weight: bold;
@@ -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,10 +207,16 @@ 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';
                                                font-weight: normal;
@@ -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;
@@ -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;