16 Commits
Author SHA1 Message Date
vgaNAR6ta 8dc53ae101 plus de contraste affiche permanences, icon dispo partout, gitignore 2026-10-06 23:51:14 +02:00
vgaNAR6ta 9736e820aa dernier edit techniques et ajout des derniers boutons du webring 2026-10-06 21:40:41 +02:00
vgaNAR6ta d6124df186 Merge branch 'v333' of https://git.labolyon.fr/LOL/labolyon.fr into v333 2026-10-06 20:43:27 +02:00
vgaNAR6ta 9ddabc35de réglages fenetres message 2026-10-06 20:43:22 +02:00
epickiwi 5ae40f558a Convertion de aria-label en title quand necessaire 2026-09-29 21:20:47 +02:00
epickiwi b55e97ea92 Auppression des tabindex superflus 2026-09-29 21:17:59 +02:00
epickiwi 8ac31e11ec Dequeerification de la meta opengraph 2026-09-29 20:57:22 +02:00
vincent 7c83be6973 Upload the webring for vinishor.tf 2026-09-29 16:35:06 +00:00
vgaNAR6ta c2357e6227 dnn webrings en reduced motion 2026-09-28 23:37:23 +02:00
vgaNAR6ta d81048ae3e aria-controls et -expanded pour indiquer au lecteurs d'écran que le bouton message ouvre un panneau et qu'il est fermé par default 2026-09-28 22:39:10 +02:00
vgaNAR6ta 8639e7769f tabindex, style :focus et bug associés pour accesibilité clavier (et visuelle au passage) 2026-09-28 22:35:45 +02:00
vgaNAR6ta 210b06d20f Elargissement du bloc de description du LOL 2026-09-15 22:31:09 +02:00
vgaNAR6ta 3ea3bd03d6 Merge branch 'v333' of https://git.labolyon.fr/LOL/labolyon.fr into v333 2026-09-15 21:56:26 +02:00
vgaNAR6ta 43db4b642b curseur custom, target blank, 1312.media 2026-09-15 21:53:27 +02:00
epickiwi 262b08fcb5 Suppression de la marge, ajout des bordures arrondies ainsi que la délicate petite fleche de la velvelyne 2026-09-15 21:13:23 +02:00
epickiwi a7dbf6c948 Suppression de starget="_blank" 2026-09-15 19:22:39 +02:00
20 changed files with 205 additions and 84 deletions

No files matched your search

-1
View File
@@ -1 +0,0 @@
status/index.html
+9 -8
View File
@@ -26,7 +26,7 @@
<style>
:root{
--mardi-back-color: rgb(37, 1, 65);
--mardi-main-color: rgb(255, 74, 231);
--mardi-main-color: rgb(255, 161, 255);
--mardi-accent-color: rgb(0, 255, 21);
}
@@ -36,13 +36,14 @@
align-items: flex-start;
justify-content: flex-start;
background-color: var(--mardi-main-color);
filter: none !important;
@container( width > 650px ){
flex-direction: row;
}
}
#imgContainer{
display: flex;
@@ -55,7 +56,7 @@
box-sizing: border-box;
overflow: hidden;
gap: 3.33px;
padding-top: 3.33px;
padding-top: 0;
img{
max-width: 34%;
@@ -101,7 +102,7 @@
}
</style>
</head>
<body>
@@ -109,16 +110,16 @@
<div id="imgContainer">
<img src="/affiches/mardis/IMG001.jpg" alt="une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan">
<img src="/affiches/mardis/IMG002.jpg" alt="un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive">
<img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle">
<img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle">
</div>
<div id="textContainer" property="description">
<h4 property="name">Permanences du LOL</h1>
<p>Venez chiller avec nous, partager un thé ou une bière.</p>
<p>On échange technique et savoir-faire<br>sur tous les sujets : logiciel libre, hacking,<br> couture, bricole et bidouille en tout genre,<br> mais aussi sur nos projets personnels ou collectifs</p>
<p class="event-hours">
<span property="eventSchedule" typeof="Schedule">
@@ -133,4 +134,4 @@
</div>
</article>
</body>
</html>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

+43 -31
View File
@@ -19,7 +19,7 @@
<!--OPEN GRAPHS-->
<meta property="og:title" content="Laboratoire Ouvert Lyonnais">
<meta property="og:description" content="Hackerspace Queer">
<meta property="og:description" content="Hackerspace Lyonnais">
<meta property="og:url" content="https://labolyon.fr/">
<meta property="og:image" content="assets/logo/logo_picto.svg">
<meta property="og:type" content="website">
@@ -35,12 +35,12 @@
<span class="plain-name">LOL</span>
</h1>
<nav aria-label="outils numériques du LOL">
<nav>
<ul>
<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>
<li><a href="https://git.labolyon.fr/explore/repos" class="textBtnStyle" >Git</a></li>
<li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" >Wiki</a></li>
<li><a href="https://matrix.to/#/#lol-space:chat.labolyon.fr" class="textBtnStyle" >Matrix</a></li>
<li><a href="https://nerdculture.de/@labolyon" class="textBtnStyle" >Fediverse</a></li>
</ul>
</nav>
</header>
@@ -72,7 +72,7 @@
Sam. <strong>14h &rarr; 20h</strong>
</li>
</ol>
<!-- pour plus tard
<!-- pour plus tard
<h3>Nocturne</h3>
<ol>
<li>Ven. <strong>21h &rarr; 5h</strong></li>
@@ -81,23 +81,23 @@
</section>
<div class="access-info-box transparentBox">
<address aria-label="Adresse du lieu">
<address>
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>
<li> &#x1f4e0; Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
<li> &#x1f4de; Tel EPVPN : <a href="tel:5256">5256</a></li>
<li> &#x1f4e0; 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="planSection" class="transparentBox" title="Plan d'accès du local">
<div id="planContainer" class="transparentBox">
<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">
@@ -123,25 +123,25 @@
</div>
</div>
<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="">
<div id="extLinkSection" class="transparentBox" title="Liens externes">
<a href="https://www.hackerspaces.org/" id="hackerLogo" title="hackerspace.org est un site qui recense les hackerspaces en Europe">
<img src="assets/logo_hackerspaces_monde.png" aria-hidden="true" alt="">
</a>
</div>
<!-- MESSAGE DE BIENVENUE -->
<aside>
<button type="button" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg" aria-label="ouvrir le message de bienvenue">
<button type="button" popovertarget="msgWindow" popoveraction="show" aria-controls="msgPanel" class="iconBtnStyle" id="openMsg" title="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">
<div id="msgWindow" popover="auto">
<dialog tabindex="-1" id="msgPanel" aria-expanded="false" 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">
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide" title="Fermer la fenêtre" autofocus>
<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>
@@ -169,11 +169,11 @@
<small>Un capteur sur la porte d'entrée indique si le local est ouvert:</small>
</p>
</div>
<a href="status" target="_blank" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
<a href="status" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>&rarr; &rarr; &rarr;</a>
</section>
<aside id="extraContent">
<div id="aboutSection" class="solidBox" aria-label="Description de l'asso, de ses objectifs et valeurs">
<p>
<div 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.
@@ -185,7 +185,7 @@
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>
Nous condamnons donc toute forme de discrimination et d'opressions dans nos locaux.
Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
</p>
@@ -205,26 +205,38 @@
<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" aria-label="Plus d'infos sur cet évènement">
<a href="/affiches/mardis/" class="iconBtnStyle" title="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>
</aside>
<footer id="webRingSection" aria-label="les copaines du LOL">
<a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
<footer id="webRingSection" title="les copaines du LOL">
<a href="https://berthe.cc" title="berthe.cc">
<img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
</a>
<a href="https://murmure.cafe" target="_blank" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
<a href="https://murmure.cafe" title="murmure.café, collectif de réappropriation du web et des réseaux">
<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 href="https://drags-nerds.net" target="_blank" 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">
<a href="https://drags-nerds.net" title="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
<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 href="https://peertube.1312.media/" title="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">
</a>
<a href="https://vinishor.tf/" title="vinishor.tf">
<img src="/assets/webRings/vinishor-webring.png" alt="un poisson globe jaune pixelisé et l'inscription vinishor.tf sur un fond marron">
</a>
<a href="https://wiki.labolyon.fr/doku.php?id=transe-telecom/" title="trans telecom, service de téléphonie et fax LOL">
<img src="/assets/webRings/ima_342027e.jpeg" alt="une parodie du logo France Telecom avec un petit coeur et l'inscription Trans Telecom">
</a>
</footer>
<noscript>
+3
View File
@@ -39,9 +39,12 @@ function createEntry(title, date, html, style){
const newEntry = document.createElement('details');
const newSummary = document.createElement('summary');
newSummary.append(title, date);
newSummary.setAttribute('tabindex', '0');
newEntry.append(newSummary);
html.setAttribute('tabindex', '-1');
newEntry.append(html);
newEntry.name = "eventList"
+1
View File
@@ -0,0 +1 @@
index.ouvert.html
+9 -2
View File
@@ -27,6 +27,10 @@
border-color: var(--back-color);
}
.textBtnStyle:focus{
filter: hue-rotate(180deg);
}
.iconBtnStyle{
display: flex;
flex-direction: column;
@@ -56,6 +60,10 @@
animation: none;
}
.iconBtnStyle:focus{
filter: hue-rotate(180deg);
}
@media(min-width: 1300px){
.textBtnStyle{
font-size: 19px;
@@ -68,7 +76,6 @@
.solidBox{
width: 100%;
height: 100%;
position: relative;
z-index: 0;
@@ -167,7 +174,7 @@
padding-right: 7.77px;
box-sizing: border-box;
cursor: move;
cursor: url(../assets/cursor/move.png) 2 16 , auto;
h4{
pointer-events: none;
+9 -4
View File
@@ -6,12 +6,9 @@ input {
a{
text-decoration: none;
color: inherit;
cursor: alias;
cursor: url(../assets/cursor/lien.png) 2 2 , auto;
}
button{
cursor: cell;
}
a p{
cursor:inherit;
@@ -37,3 +34,11 @@ ul,ol {
dialog{
padding: 0;
}
dialog:focus{
outline:none;
filter: hue-rotate(180deg);
}
button:focus, a:focus, summary:focus{
outline:none;
}
+101 -13
View File
@@ -27,6 +27,8 @@ body{
position: relative;
z-index: -33;
box-sizing: border-box;
cursor: url(../assets/cursor/default.png) 2 2 , auto;
}
/*================ STRUCTURE ======================*/
@@ -156,6 +158,14 @@ main{
address {
margin-bottom: 2em;
}
ul li{
margin-bottom: 3.33px;
}
ul li a:focus{
filter: hue-rotate(180deg);
}
}
aside{
@@ -178,9 +188,11 @@ main{
box-sizing: border-box;
border-radius: 13.12px;
cursor: url(../assets/cursor/msg.png) 2 16 , auto;
}
#openMsg:hover{
#openMsg:hover, #openMsg:focus{
animation: none;
}
@@ -197,7 +209,7 @@ main{
.floatingWindow{
width: 277px;
height: auto;
margin-top: 33px;
margin: 0;
text-transform: none;
font-size: 15px;
@@ -362,7 +374,6 @@ main{
z-index: 333;
a{
cursor: alias;
img{
width: auto;
height: 55px;
@@ -370,6 +381,14 @@ main{
}
}
a:focus, a:hover{
background-color: var(--back-color);
img{
filter: invert();
}
}
}
#adhesionSection{
@@ -500,7 +519,6 @@ main{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
dl dt {
clear: both;
@@ -544,7 +562,6 @@ main{
margin-bottom: 7.77px;
}
article{
h4{
padding: 16.1px;
@@ -582,6 +599,10 @@ main{
border-color: var(--back-color);
}
.solidBox:has(details){
overflow: hidden;
}
.solidBox:has(details[open]){
color: var(--back-color);
background-color: var(--main-color);
@@ -590,13 +611,48 @@ main{
margin-top: 7.77px;
overflow: hidden;
margin-bottom: 7.77px;
margin-left: 16.1px;
margin-right: 16.1px;
width: calc(100% - 32.2px);
details{
cursor: default;
summary{
background-color: var(--main-color);
}
}
article:first-of-type,
article.solidBox:first-of-type:has(details[open]),
article:has(details[open]) + article {
margin-top: 0;
border-top-left-radius: 16.1px;
border-top-right-radius: 16.1px;
}
article:last-of-type,
article.solidBox:last-of-type:has(details[open]),
article:has( + article details[open]) {
margin-bottom: 0;
border-bottom-left-radius: 16.1px;
border-bottom-right-radius: 16.1px;
}
article details summary::before {
content: "→";
font-size: 2em;
flex: 0;
flex-shrink: 0;
transition: ease-out 0.3s transform;
}
article details[open] summary::before {
transform: rotate(90deg);
}
article details summary h4 {
flex: 1;
}
.iconBtnStyle{
width: 33px;
height: 33px;
@@ -609,7 +665,6 @@ main{
details{
width: 100%;
height: 100%;
cursor: copy;
overflow: hidden;
summary{
@@ -621,16 +676,32 @@ main{
box-sizing: border-box;
list-style-type: none;
padding: 16.1px;
background-color: var(--back-color);
cursor: url(../assets/cursor/default.png) 2 16 , auto;
}
&:not([open]) summary{
cursor: url(../assets/cursor/details.png) 2 16 , auto;
}
article{
width: 100%;
cursor: default;
text-transform: none;
}
}
summary:hover{
background-color: var(--main-color);
}
summary:focus{
filter: hue-rotate(180deg);
}
}
}
}
#webRingSection{
width: 100%;
@@ -643,14 +714,22 @@ main{
border-style: solid;
border-width: thin 0 0 0;
grid-template-columns: repeat(4, 1fr);
gap: 7.77px;
box-sizing: border-box;
gap: 13.12px;
a{
width: 100%;
height: 31px;
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
margin-top: 3.33px;
transition: 0.333s;
img{
width: 100%;
image-rendering: pixelated;
}
.needOutline{
@@ -660,6 +739,15 @@ main{
}
}
a:focus, a:hover{
margin-top: -4.44px;
}
a #reducedDNN{
visibility: collapse;
display: none;
}
}
}
+13 -1
View File
@@ -9,4 +9,16 @@
main aside #openMsg{
animation: none !important;
}
}
main #webRingSection{
a #reducedDNN{
visibility: visible;
display: inline;
}
a #flashDNN{
visibility: collapse;
display: none;
}
}
}
+17 -24
View File
@@ -173,6 +173,22 @@
left: unset;
right: 33px;
top: 33vh;
width: 444px;
.floatingWindow{
width: 444px;
.title{
font-size: 22px;
height: 50px;
.iconBtnStyle{
width: 36px;
height: 36px;
border-radius: 22px;
}
}
}
}
#openMsg{
@@ -185,19 +201,7 @@
width: auto;
}
dialog{
.title{
font-size: 22px;
height: 50px;
.iconBtnStyle{
width: 36px;
height: 36px;
border-radius: 22px;
}
}
}
}
#titleSection{
@@ -241,17 +245,6 @@
}
}
#adhesionSection{
width: 50%;
margin-left: 16.1px;
margin-bottom: 77px;
.textBtnStyle{
height: 44px;
font-size: 20px;
}
}
}
#statuSection{