accessibilité et open graph
This commit is contained in:
+84
-108
@@ -3,89 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="style/typo.css">
|
||||
<link rel="stylesheet" href="style/default.css">
|
||||
<link rel="stylesheet" href="style/common.css">
|
||||
<link rel="stylesheet" href="style/animation.css">
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
|
||||
<!--REPONSIVE-->
|
||||
<link rel="stylesheet" href="style/responsive.css">
|
||||
|
||||
<!--REDUCED MOTION-->
|
||||
<link rel="stylesheet" href="style/reduced.css">
|
||||
<!-- TEST CCS OUVERTURE
|
||||
<link rel="stylesheet" href="status/openStyle.css">
|
||||
-->
|
||||
<!--
|
||||
<link rel="stylesheet" href="affiches/perm.css">
|
||||
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
|
||||
<link rel="stylesheet" href="affiches/algorave.css">
|
||||
-->
|
||||
<title>L(. O.)L — Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="icon" type="image/svg" href="assets/favicon.svg" />
|
||||
|
||||
<title>Laboratoire Ouvert Lyonnais</title>
|
||||
|
||||
<!--OPEN GRAPHS-->
|
||||
<meta property="og:title" content="Laboratoire Ouvert Lyonnais">
|
||||
<meta property="og:description" content="Hackerspace Queer">
|
||||
<meta property="og:url" content="https://labolyon.fr/">
|
||||
<meta property="og:image" content="assets/logo/logo_picto.svg">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
|
||||
<link rel="icon" type="image/svg" href="assets/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
<img id="logo" src="assets/logo/logo-forme.svg" alt="">
|
||||
<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 class="plain-name">L.O.L.</span>
|
||||
<span class="plain-name">LOL</span>
|
||||
</h1>
|
||||
|
||||
<nav>
|
||||
<nav aria-label="outils numériques du LOL">
|
||||
<ul>
|
||||
<li><a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</a></li>
|
||||
<li><a href="https://wiki.labolyon.fr/" name="wiki" class="textBtnStyle" target="_blank">Wiki</a></li>
|
||||
<li><a href="https://matrix.to/#/#lol-space:chat.labolyon.fr" name="matrix" class="textBtnStyle" target="_blank">Matrix</a></li>
|
||||
<li><a href="https://nerdculture.de/@labolyon" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a></li>
|
||||
<li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" target="_blank">Git</a></li>
|
||||
<li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" target="_blank">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://nerdculture.de/@labolyon" class="textBtnStyle" target="_blank">Fediverse</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="homeContent">
|
||||
|
||||
<!-- MESSAGE DE BIENVENUE -->
|
||||
<aside>
|
||||
|
||||
<button type="button" name="msgBtn" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg">
|
||||
<svg class="icon" viewBox="0 0 40.19 38.9">
|
||||
<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">
|
||||
<dialog class="floatingWindow">
|
||||
<div class="title">
|
||||
<h4>Bienvenue !</h4>
|
||||
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide">
|
||||
<svg viewBox="0 0 53.73 53.59" class="icon">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
hellooo, <br>
|
||||
bienvenue sur le site du LOL ^^<br><br>
|
||||
en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
|
||||
si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
|
||||
ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
|
||||
</p>
|
||||
</dialog>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
<div id="homeContent">
|
||||
|
||||
<section id="titleSection" class="solidBox">
|
||||
<h2>
|
||||
Hackerspace queer
|
||||
<small><br>
|
||||
Lieu de réappropriation, <br>
|
||||
réparation & recyclage <br>
|
||||
des objets techniques <br>
|
||||
& technologiques
|
||||
</small>
|
||||
</h2>
|
||||
<p>
|
||||
Lieu de réappropriation, <br>
|
||||
réparation & recyclage <br>
|
||||
des objets techniques <br>
|
||||
& technologiques
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="hourSection" class="solidBox">
|
||||
@@ -106,7 +78,7 @@
|
||||
-->
|
||||
</section>
|
||||
|
||||
<address class="transparentBox">
|
||||
<address class="transparentBox" aria-label="Adresse du lieu">
|
||||
7 place Chazette<br>
|
||||
69001 Lyon<br>
|
||||
<br>
|
||||
@@ -114,10 +86,10 @@
|
||||
4° 50' 14.052" E
|
||||
</address>
|
||||
|
||||
<div id="planSection" class="transparentBox">
|
||||
<div id="planSection" class="transparentBox" aria-label="Plan d'accès du local">
|
||||
<div id="planContainer" class="transparentBox">
|
||||
<img src="assets/plan.svg" id="plan" alt="Plan d'accès du local: 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 id="fleche" viewBox="0 0 4215.93 2604.36">
|
||||
<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">
|
||||
<g>
|
||||
<path d="M118.58,2250.24l88.9,7.6,20.81,53.59,2035.49-1175.29,534.6-308.72c47.83-27.62,106.77-27.57,154.55.13l610.19,353.56-36.27,19.61,202.14,8.94-20.79-113.99-36.27,21.29-691.73-397.83c-65.1-37.42-145.2-37.35-210.23.2L118.58,2250.24Z"/>
|
||||
<g>
|
||||
@@ -140,84 +112,88 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="extLinkSection" class="transparentBox">
|
||||
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
|
||||
<img src="assets/logo_hackerspaces_monde.png">
|
||||
<div id="extLinkSection" class="transparentBox" aria-label="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">
|
||||
<img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="adhesionSection">
|
||||
<button class="textBtnStyle" popovertarget="addUserWindow" popoveraction="show">Comment adhérer ?</button>
|
||||
<div id="addUserWindow" popover="auto">
|
||||
<dialog class="floatingWindow">
|
||||
<div class="title">
|
||||
<h4>Bienvenue !</h4>
|
||||
<button class="iconBtnStyle" popovertarget="addUserWindow" popoveraction="hide">
|
||||
<svg viewBox="0 0 53.73 53.59" class="icon">
|
||||
<!-- MESSAGE DE BIENVENUE -->
|
||||
<aside>
|
||||
<button type="button" popovertarget="msgWindow" popoveraction="show" 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>
|
||||
</button>
|
||||
|
||||
<div id="msgWindow" popover="auto">
|
||||
<dialog 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">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</h4>
|
||||
|
||||
<p>
|
||||
test adhésion
|
||||
hellooo, <br>
|
||||
bienvenue sur le site du LOL ^^<br><br>
|
||||
en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
|
||||
si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
|
||||
ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
|
||||
</p>
|
||||
</dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<section id="statuSection" class="solidBox">
|
||||
<div id="statusDesc">
|
||||
<p>
|
||||
<h3>
|
||||
Le LOL peut ouvrir en dehors des horaires habituels.
|
||||
En fonction de nos envies et disponibilités.
|
||||
</p>
|
||||
</h3>
|
||||
<p>
|
||||
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
|
||||
</p>
|
||||
</div>
|
||||
<a href="status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>→ → →</a>
|
||||
</section>
|
||||
<section id="extraContent">
|
||||
<section 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>
|
||||
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
|
||||
</p>
|
||||
<p>
|
||||
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 !
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</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>
|
||||
<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">
|
||||
<svg viewBox="0 0 53.73 53.59" class="icon">
|
||||
<a href="/affiches/mardis/" class="iconBtnStyle" target="_blank" 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>
|
||||
</section>
|
||||
</section>
|
||||
</aside>
|
||||
<noscript>
|
||||
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop></video>
|
||||
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop aria-hidden="true"></video>
|
||||
</noscript>
|
||||
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
|
||||
<canvas class="cute-texture"></canvas>
|
||||
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop aria-hidden="true"></video>
|
||||
<canvas class="cute-texture" aria-hidden="true"></canvas>
|
||||
</main>
|
||||
<!-- SCRIPT PRINCIPAL -->
|
||||
<script type="module" src="js/main.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user