Passage du site en v333 #3
No files matched your search
@@ -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: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
+27
-26
@@ -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,7 +35,7 @@
|
||||
<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" >Git</a></li>
|
||||
<li><a href="https://wiki.labolyon.fr/" class="textBtnStyle" >Wiki</a></li>
|
||||
@@ -72,7 +72,7 @@
|
||||
Sam. <strong>14h → 20h</strong>
|
||||
</li>
|
||||
</ol>
|
||||
<!-- pour plus tard
|
||||
<!-- pour plus tard
|
||||
<h3>Nocturne</h3>
|
||||
<ol>
|
||||
<li>Ven. <strong>21h → 5h</strong></li>
|
||||
@@ -81,15 +81,15 @@
|
||||
</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">
|
||||
|
||||
<ul>
|
||||
<li> 🖷 Fax : <a href="tel:+33482533028">04 82 53 30 28</a></li>
|
||||
<li> ✆ Tel EPVPN : <a href="tel:5256">5256</a></li>
|
||||
<li> 🖷 Fax EPVPN : <a href="tel:5257">5257</a></li>
|
||||
@@ -97,7 +97,7 @@
|
||||
</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" 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>
|
||||
@@ -172,8 +172,8 @@
|
||||
<a href="status" class="textBtnStyle">Vérifier <br>si c'est<br> ouvert <br>→ → →</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.
|
||||
@@ -209,7 +209,7 @@
|
||||
<article class="solidBox">
|
||||
<h4>Permanences du LOL</h4>
|
||||
<p class="date">↻ Mardi & Samedi</p>
|
||||
<a href="/affiches/mardis/" class="iconBtnStyle" 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>
|
||||
@@ -219,7 +219,7 @@
|
||||
<article class="solidBox">
|
||||
<h4>Permanences du LOL</h4>
|
||||
<p class="date">↻ Mardi & Samedi</p>
|
||||
<a href="/affiches/mardis/" class="iconBtnStyle" 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>
|
||||
@@ -229,7 +229,7 @@
|
||||
<article class="solidBox">
|
||||
<h4>Permanences du LOL</h4>
|
||||
<p class="date">↻ Mardi & Samedi</p>
|
||||
<a href="/affiches/mardis/" class="iconBtnStyle" 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>
|
||||
@@ -239,7 +239,7 @@
|
||||
<article class="solidBox">
|
||||
<h4>Permanences du LOL</h4>
|
||||
<p class="date">↻ Mardi & Samedi</p>
|
||||
<a href="/affiches/mardis/" class="iconBtnStyle" 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>
|
||||
@@ -248,17 +248,18 @@
|
||||
|
||||
</section>
|
||||
</aside>
|
||||
<footer id="webRingSection" aria-label="les copaines du LOL">
|
||||
<a href="https://berthe.cc" 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" 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" 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/" aria-label="the 1312 media collective">
|
||||
<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>
|
||||
</footer>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
+9
-1
@@ -6,7 +6,7 @@ input {
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: url(../assets/cursor/lien.png) 2 2 auto;
|
||||
cursor: url(../assets/cursor/lien.png) 2 2 , auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -34,3 +34,11 @@ ul,ol {
|
||||
dialog{
|
||||
padding: 0;
|
||||
}
|
||||
dialog:focus{
|
||||
outline:none;
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
button:focus, a:focus, summary:focus{
|
||||
outline:none;
|
||||
}
|
||||
+53
-7
@@ -158,6 +158,10 @@ main{
|
||||
address {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
ul li a:focus{
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
aside{
|
||||
@@ -184,7 +188,7 @@ main{
|
||||
cursor: url(../assets/cursor/msg.png) 2 16 , auto;
|
||||
}
|
||||
|
||||
#openMsg:hover{
|
||||
#openMsg:hover, #openMsg:focus{
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@@ -373,6 +377,14 @@ main{
|
||||
}
|
||||
}
|
||||
|
||||
a:focus, a:hover{
|
||||
background-color: var(--back-color);
|
||||
img{
|
||||
filter: invert();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#adhesionSection{
|
||||
@@ -583,6 +595,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);
|
||||
@@ -595,6 +611,10 @@ main{
|
||||
margin-right: 16.1px;
|
||||
width: calc(100% - 32.2px);
|
||||
|
||||
summary{
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
article:first-of-type,
|
||||
@@ -652,13 +672,14 @@ 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;
|
||||
|
||||
cursor: url(../assets/cursor/details.png) 2 16 , auto;
|
||||
|
||||
}
|
||||
|
||||
&:not([open]) summary{
|
||||
cursor: url(../assets/cursor/default.png) 2 16 , auto;
|
||||
cursor: url(../assets/cursor/details.png) 2 16 , auto;
|
||||
}
|
||||
|
||||
article{
|
||||
@@ -666,8 +687,17 @@ main{
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
summary:hover{
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
summary:focus{
|
||||
filter: hue-rotate(180deg);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#webRingSection{
|
||||
width: 100%;
|
||||
@@ -680,15 +710,22 @@ main{
|
||||
border-style: solid;
|
||||
border-width: thin 0 0 0;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
box-sizing: border-box;
|
||||
gap: 7.77px;
|
||||
|
||||
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{
|
||||
@@ -698,6 +735,15 @@ main{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a:focus, a:hover{
|
||||
margin-top: -7.77px;
|
||||
}
|
||||
|
||||
a #reducedDNN{
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
+13
-1
@@ -9,4 +9,16 @@
|
||||
main aside #openMsg{
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
main #webRingSection{
|
||||
a #reducedDNN{
|
||||
visibility: visible;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a #flashDNN{
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user