vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibilité et open graph

Browse Source
This commit is contained in:
vgaNAR6ta
2026-08-24 21:22:29 +02:00
parent c7a07c3b7c
commit 7dc68ad0e5
5 changed files with 248 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/logo/logo_picto.svg
+143
View File
@@ -0,0 +1,143 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2"
version="1.1"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
width="94.468437"
height="67.160767"
viewBox="0 0 94.468437 67.160767"
sodipodi:docname="logo_picto.svg"
inkscape:export-filename="/home/nwa/Documents/Lyon Open Lab/Collectif LOL/parallax and responsive/images/logo.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs6" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="691"
id="namedview4"
showgrid="false"
inkscape:zoom="4.8680853"
inkscape:cx="38.498621"
inkscape:cy="32.522625"
inkscape:current-layer="svg2"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:4.70173216;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4542"
width="89.766708"
height="62.459038"
x="2.3508661"
y="2.3508661" />
<circle
r="4.0235658"
cy="44.207626"
cx="68.418625"
id="circle822"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
ry="1.525695"
y="40.821571"
x="34.42173"
height="6.7451782"
width="11.456149"
id="rect838"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5829103;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle842"
cx="54.284214"
cy="44.207626"
r="4.0235658" />
<circle
r="4.0235658"
cy="44.207626"
cx="26.015396"
id="circle846"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect852"
width="14.782129"
height="6.7451782"
x="57.660061"
y="28.948668"
ry="1.525695" />
<rect
ry="1.525695"
y="28.948668"
x="39.825947"
height="6.7451782"
width="14.782129"
id="rect858"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect860"
width="14.782129"
height="6.7451782"
x="21.991831"
y="28.948668"
ry="1.525695" />
<circle
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle862"
cx="68.418625"
cy="20.461821"
r="4.0235658" />
<rect
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5829103;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect864"
width="11.456149"
height="6.7451782"
x="34.42173"
y="17.075764"
ry="1.525695" />
<circle
r="4.0235658"
cy="20.461821"
cx="54.284214"
id="circle866"
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<circle
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="circle868"
cx="26.015396"
cy="20.461821"
r="4.0235658" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

index.html
+84 -108
View File
@@ -3,89 +3,61 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/typo.css"> <link rel="stylesheet" href="style/typo.css">
<link rel="stylesheet" href="style/default.css"> <link rel="stylesheet" href="style/default.css">
<link rel="stylesheet" href="style/common.css"> <link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/animation.css"> <link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<!--REPONSIVE-->
<link rel="stylesheet" href="style/responsive.css"> <link rel="stylesheet" href="style/responsive.css">
<!--REDUCED MOTION-->
<link rel="stylesheet" href="style/reduced.css"> <link rel="stylesheet" href="style/reduced.css">
<!-- TEST CCS OUVERTURE
<link rel="stylesheet" href="status/openStyle.css"> <title>Laboratoire Ouvert Lyonnais</title>
-->
<!-- <!--OPEN GRAPHS-->
<link rel="stylesheet" href="affiches/perm.css"> <meta property="og:title" content="Laboratoire Ouvert Lyonnais">
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css"> <meta property="og:description" content="Hackerspace Queer">
<link rel="stylesheet" href="affiches/algorave.css"> <meta property="og:url" content="https://labolyon.fr/">
--> <meta property="og:image" content="assets/logo/logo_picto.svg">
<title>L(. O.)L &mdash; Laboratoire Ouvert Lyonnais</title> <meta property="og:type" content="website">
<link rel="icon" type="image/svg" href="assets/favicon.svg" />
<link rel="icon" type="image/svg" href="assets/favicon.svg">
</head> </head>
<body> <body>
<header> <header>
<h1> <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 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> </h1>
<nav> <nav aria-label="outils numériques du LOL">
<ul> <ul>
<li><a href="https://git.labolyon.fr/explore/repos" name="git" class="textBtnStyle" target="_blank">Git</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/" name="wiki" class="textBtnStyle" target="_blank">Wiki</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" name="matrix" class="textBtnStyle" target="_blank">Matrix</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" name="fedi" class="textBtnStyle" target="_blank">Fediverse</a></li> <li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" target="_blank">Fediverse</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<main> <main>
<section id="homeContent"> <div 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>
<section id="titleSection" class="solidBox"> <section id="titleSection" class="solidBox">
<h2> <h2>
Hackerspace queer Hackerspace queer
<small><br>
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</small>
</h2> </h2>
<p>
Lieu de réappropriation, <br>
réparation & recyclage <br>
des objets techniques <br>
& technologiques
</p>
</section> </section>
<section id="hourSection" class="solidBox"> <section id="hourSection" class="solidBox">
@@ -106,7 +78,7 @@
--> -->
</section> </section>
<address class="transparentBox"> <address class="transparentBox" aria-label="Adresse du lieu">
7 place Chazette<br> 7 place Chazette<br>
69001 Lyon<br> 69001 Lyon<br>
<br> <br>
@@ -114,10 +86,10 @@
4° 50' 14.052" E 4° 50' 14.052" E
</address> </address>
<div id="planSection" class="transparentBox"> <div id="planSection" class="transparentBox" aria-label="Plan d'accès du local">
<div id="planContainer" class="transparentBox"> <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"> <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 id="fleche" viewBox="0 0 4215.93 2604.36"> <svg aria-hidden="true" id="fleche" viewBox="0 0 4215.93 2604.36">
<g> <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"/> <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> <g>
@@ -140,84 +112,88 @@
</div> </div>
</div> </div>
<div id="extLinkSection" class="transparentBox"> <div id="extLinkSection" class="transparentBox" aria-label="Liens externes">
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank"> <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"> <img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
</a> </a>
</div> </div>
<div id="adhesionSection"> <!-- MESSAGE DE BIENVENUE -->
<button class="textBtnStyle" popovertarget="addUserWindow" popoveraction="show">Comment adhérer ?</button> <aside>
<div id="addUserWindow" popover="auto"> <button type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
<dialog class="floatingWindow"> <svg class="icon" viewBox="0 0 40.19 38.9" aria-hidden="true">
<div class="title"> <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"/>
<h4>Bienvenue !</h4> </svg>
<button class="iconBtnStyle" popovertarget="addUserWindow" popoveraction="hide"> </button>
<svg viewBox="0 0 53.73 53.59" class="icon">
<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"/> <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> </svg>
</button> </button>
</div> </h4>
<p> <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> </p>
</dialog> </dialog>
</div> </div>
</div> </aside>
</div>
</section>
<section id="statuSection" class="solidBox"> <section id="statuSection" class="solidBox">
<div id="statusDesc"> <div id="statusDesc">
<p> <h3>
Le LOL peut ouvrir en dehors des horaires habituels. Le LOL peut ouvrir en dehors des horaires habituels.
En fonction de nos envies et disponibilités. En fonction de nos envies et disponibilités.
</p> </h3>
<p> <p>
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small> <small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p> </p>
</div> </div>
<a href="status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a> <a href="status/index.ouvert.html" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section> </section>
<section id="extraContent"> <aside id="extraContent">
<section id="aboutSection" class="solidBox"> <p 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,
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>
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.
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes. <br><br>
</p> Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
<p> 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>
</p> le partage des connaissances et l'autogestion,<br>
<p> l'anti-capitalisme et l'anti-fascisme. <br><br>
Nous revendiquons l'ouverture du code et des techniques,<br> Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
le partage des connaissances et l'autogestion,<br> Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
l'anti-capitalisme et l'anti-fascisme. <br><br> </p>
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>
<section id="eventSection" class="transparentBox"> <section id="eventSection" class="transparentBox">
<h3>Événements <small>à venir</small></h3> <h3>Événements <small>à venir</small></h3>
<article class="solidBox"> <article class="solidBox">
<h4>Permanences du LOL</h4> <h4>Permanences du LOL</h4>
<p class="date">↻ Mardi & Samedi</p> <p class="date">↻ Mardi & Samedi</p>
<a href="/affiches/mardis/" class="iconBtnStyle" target="_blank"> <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"> <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"/> <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> </svg>
</a> </a>
</article> </article>
</section> </section>
</section> </aside>
<noscript> <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> </noscript>
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video> <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"></canvas> <canvas class="cute-texture" aria-hidden="true"></canvas>
</main> </main>
<!-- SCRIPT PRINCIPAL --> <!-- SCRIPT PRINCIPAL -->
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
readMe.MD
+9
View File
@@ -88,4 +88,13 @@ aller dans /status puis executer la commande en fonction du statut souhaité
> statut fermé > statut fermé
## Accessibilité
[x] alt sur les images fonctionnelle
[x] alt sur les boutons aussi
[x]checkup global accessibilité et sémantique
[x] open graphs !
style/main.css
+8 -9
View File
@@ -229,15 +229,14 @@ main{
font-family: 'karrik'; font-family: 'karrik';
font-size: 22px; font-size: 22px;
line-height: 1em; line-height: 1em;
}
small{ small{
text-transform: none; text-transform: none;
font-size: 15px; font-size: 15px;
font-family: 'velvelyne'; font-family: 'velvelyne';
font-weight: bold; font-weight: bold;
line-height: 0.3em; line-height: 0.3em;
padding-left: 7.77px; padding-left: 7.77px;
}
} }
} }
style/responsive.css
+4 -5
View File
@@ -56,9 +56,10 @@
height: 110%; height: 110%;
h2{ h2{
font-size: 27px; font-size: 27px;
small{ }
font-size: 20px;
} p{
font-size: 20px;
} }
} }
@@ -309,6 +310,4 @@
} }
} }
} }
} }