Passage du site en v333 #3
@@ -1 +1 @@
|
||||
*.blend?
|
||||
status/index.html
|
||||
|
|
||||
@@ -1,9 +1,50 @@
|
||||
# Laboratoire Ouvert Lyonnais
|
||||
# Le site internet du LOL: labolyon.fr
|
||||
|
||||
Vous retrouverez la version en ligne du site du lol, il n'y a pas de bootstrap sur cette version.
|
||||
Il a été codé le plus simplement possible.
|
||||
|
||||
## TODO
|
||||
## Démarrer un serveur de developpement
|
||||
|
||||
Pouvoir mettre en quelques lignes les activités ou ateliers à venir avec une date.
|
||||
Est-ce le git pourrait nous permettre de faire ça ?
|
||||
```
|
||||
python3 -m http.server
|
||||
```
|
||||
|
||||
Et ensuite, le site est disponible sur http://localhost:8000/
|
||||
|
||||
### Tester sur son tel
|
||||
|
||||
Il faut démarrer le serveur avec la commande suivante:
|
||||
|
||||
```
|
||||
python3 -m http.server -b 0.0.0.0
|
||||
```
|
||||
|
||||
Ensuite il faut obtenir l'adresse IP de son ordinateur
|
||||
```
|
||||
ip a
|
||||
```
|
||||
|
||||
Dans notre cas c'est `10.0.0.165` (voir l'exemple ci-dessous).
|
||||
```
|
||||
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
|
||||
link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
|
||||
inet 127.0.0.1/8 scope host lo
|
||||
valid_lft forever preferred_lft forever
|
||||
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
|
||||
link/ether c4:9d:ed:15:78:cc brd ff:ff:ff:ff:ff:ff
|
||||
inet 10.0.0.165/24 brd 10.0.0.255 scope global dynamic noprefixroute mlan0
|
||||
valid_lft 5204sec preferred_lft 5204sec
|
||||
```
|
||||
|
||||
Sur son tel, on peut alors acceder a http://10.0.0.165:8000/.
|
||||
Si cela ne fonctionne pas, c'est peut être que le pare feu interdit la connexion depuis un autre ordinateur sur le port 8000.
|
||||
|
||||
## Lien symbolique et ouverture => comment preview pour dev
|
||||
|
||||
aller dans /status puis executer la commande en fonction du statut souhaité
|
||||
|
||||
./set-status.sh opened
|
||||
|
||||
> statut ouvert
|
||||
|
||||
./set-status.sh closed
|
||||
|
||||
> statut fermé
|
||||
|
After Width: | Height: | Size: 516 KiB |
|
After Width: | Height: | Size: 476 KiB |
|
After Width: | Height: | Size: 523 KiB |
@@ -0,0 +1,136 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Permanence du mardi soir</title>
|
||||
<link rel="stylesheet" href="/style/typo.css">
|
||||
<link rel="stylesheet" href="/style/default.css">
|
||||
<style data-import="no-import">
|
||||
html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: var(--mardi-back-color);
|
||||
}
|
||||
|
||||
body{
|
||||
height: 100%;
|
||||
max-width: 1000px;
|
||||
background-color: var(--mardi-accent-color);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
:root{
|
||||
--mardi-back-color: rgb(37, 1, 65);
|
||||
--mardi-main-color: rgb(255, 74, 231);
|
||||
--mardi-accent-color: rgb(0, 255, 21);
|
||||
}
|
||||
|
||||
.afficheMardis{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--mardi-main-color);
|
||||
|
||||
@container( width > 650px ){
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#imgContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
|
||||
width: 100%;
|
||||
max-height: 33vh;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
gap: 3.33px;
|
||||
padding-top: 3.33px;
|
||||
|
||||
img{
|
||||
max-width: 34%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#textContainer{
|
||||
padding: 13.12px;
|
||||
color: var(--mardi-back-color);
|
||||
|
||||
h4{
|
||||
font-family: 'karrik';
|
||||
text-transform: uppercase;
|
||||
font-size: 33px;
|
||||
margin-bottom: 3.33px;
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: 'velvelyne';
|
||||
font-family: 16.1px;
|
||||
margin-bottom: 7.77px;
|
||||
}
|
||||
|
||||
.event-hours{
|
||||
margin-left: 44px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
|
||||
span[property="location"]{
|
||||
font-size: 16.1px;
|
||||
margin-left: -22px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container( width < 650px ){
|
||||
.afficheMardis{
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<article class="afficheMardis" property="event" typeof="Event">
|
||||
<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">
|
||||
</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">
|
||||
<data property="byDay" content="Tuesday">Tous les mardis</data><br> à partir de <data property="startTime" content="17:00">17h</data><br>
|
||||
</span>
|
||||
<span property="eventSchedule" typeof="Schedule">
|
||||
<data property="byDay" content="Saturday"> Tous les samedis</data><br> à partir de <data property="startTime" content="14:00">14h</data>
|
||||
</span>
|
||||
<br>
|
||||
<span property="location" href="https://labolyon.fr/">au local du LOL<br>  → 7 Place Chazette, 69001 Lyon</span>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
@@ -61,14 +61,14 @@
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#ffff4d;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4542"
|
||||
width="88.88665"
|
||||
height="88.88665"
|
||||
x="2.7906749"
|
||||
y="2.7906749" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
style="opacity:1;fill:#ffff4d;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="circle868"
|
||||
cx="47.234001"
|
||||
cy="47.234001"
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
width="94.468002"
|
||||
height="94.468002"
|
||||
viewBox="0 0 94.468002 94.468003"
|
||||
sodipodi:docname="favicon.svg"
|
||||
inkscape:export-filename="logo.png"
|
||||
inkscape:export-xdpi="130.08"
|
||||
inkscape:export-ydpi="130.08"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<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="1341"
|
||||
inkscape:window-height="927"
|
||||
id="namedview4"
|
||||
showgrid="false"
|
||||
inkscape:zoom="4.8680853"
|
||||
inkscape:cx="38.824299"
|
||||
inkscape:cy="53.306379"
|
||||
inkscape:current-layer="svg2"
|
||||
inkscape:window-x="56"
|
||||
inkscape:window-y="50"
|
||||
inkscape:window-maximized="0"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#00ff44;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4542"
|
||||
width="88.88665"
|
||||
height="88.88665"
|
||||
x="2.7906749"
|
||||
y="2.7906749" />
|
||||
<circle
|
||||
style="opacity:1;fill:#00ff44;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="circle868"
|
||||
cx="47.234001"
|
||||
cy="47.234001"
|
||||
r="16.613539" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,31 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4215.93 2604.36">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: .1px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<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>
|
||||
<path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
|
||||
<path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
<path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
<path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
|
||||
<path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
|
||||
<path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
|
||||
<path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
|
||||
<path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
|
||||
<path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
|
||||
<path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
<path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
|
||||
<path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.1 99.94">
|
||||
<path d="M44.95,76.19h-10.74l-1.98,23.75H13.43l1.98-23.75H0v-18.8h17.1l1.41-16.96H0v-18.8h20.21L22.05,0h18.8l-1.84,21.63h10.74l1.84-21.63h18.8l-1.84,21.63h16.54v18.8h-18.24l-1.41,16.96h19.65v18.8h-21.35l-1.98,23.75h-18.8l1.98-23.75ZM46.65,57.39l1.41-16.96h-10.74l-1.41,16.96h10.74Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 433 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.81 117.86">
|
||||
<path d="M116.98,39.88c-4.56-7.84-10.78-14.04-18.67-18.59-7.83-4.52-16.53-6.79-26.11-6.83h0s-31.02,0-31.02,0V0L0,26.5v.2l41.18,26.4v-15.82h30.79c5.45,0,10.38,1.27,14.79,3.81,4.41,2.54,7.89,6.01,10.42,10.42,2.54,4.41,3.8,9.3,3.8,14.65s-1.27,10.24-3.8,14.65c-2.54,4.41-6.01,7.89-10.42,10.42-4.41,2.54-9.34,3.8-14.79,3.8h0s-67.74,0-67.74,0v22.82h67.79c9.66,0,18.42-2.29,26.3-6.83,7.89-4.56,14.11-10.75,18.67-18.59,4.56-7.84,6.83-16.6,6.83-26.27s-2.28-18.43-6.83-26.27Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 620 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.73 53.59">
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 304 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.29 109.29">
|
||||
<path d="M26.84,102.1c-8.31-4.79-14.87-11.36-19.66-19.72C2.4,74.02,0,64.76,0,54.58s2.4-19.42,7.19-27.74c4.79-8.31,11.34-14.86,19.66-19.66C35.16,2.4,44.44,0,54.71,0s19.42,2.4,27.73,7.19c8.31,4.79,14.86,11.34,19.66,19.66,4.79,8.31,7.19,17.56,7.19,27.74v42.75h-12.72v-7.89c-2.97,2.46-6.3,4.37-9.99,5.72-3.69,1.36-7.53,2.04-11.51,2.04-7.21,0-13.78-2.16-19.72-6.49l.64,18.45c-.34.08-.76.13-1.27.13-10.26,0-19.55-2.4-27.86-7.19ZM24.75,71.56c2.84,5.13,6.74,9.25,11.71,12.34,4.96,3.1,10.5,4.77,16.6,5.02-3.56-3.22-6.36-7.02-8.4-11.39-2.04-4.37-3.05-9.05-3.05-14.06,0-6.02,1.5-11.58,4.52-16.67,3.01-5.09,7.08-9.14,12.21-12.15,5.13-3.01,10.71-4.52,16.73-4.52.85,0,2.2.08,4.07.25-3.05-3.14-6.7-5.58-10.94-7.32-4.24-1.74-8.74-2.61-13.49-2.61-6.36,0-12.15,1.49-17.37,4.45-5.22,2.97-9.33,7.06-12.34,12.28-3.01,5.22-4.52,11.01-4.52,17.37s1.42,11.85,4.26,16.99ZM84.29,72.71c2.59-2.5,3.88-5.49,3.88-8.97s-1.29-6.59-3.88-9.1c-2.59-2.5-5.66-3.75-9.22-3.75s-6.57,1.25-9.03,3.75c-2.46,2.5-3.69,5.53-3.69,9.1s1.23,6.57,3.69,9.03c2.46,2.46,5.47,3.69,9.03,3.69s6.64-1.25,9.22-3.75Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
|
||||
<path d="M59.26,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM73.16,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM87.06,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45Z"/>
|
||||
<path d="M117.92,68.62h.54S94.78,0,94.78,0H0v103.19h118.5v-34.54l-.58-.03ZM94.6,87.19H16V16h68.44l17.71,51.84.35,19.35h-7.9Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 851 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
|
||||
<path d="M78.75,24.59c-1.86-.06-3.42-.72-4.65-1.99-1.3-1.33-1.95-2.97-1.95-4.9V0H10.95v24.59H0v78.6h118.5V24.59h-39.75ZM102.5,87.19H16v-46.29h11.55v-24.9h27.8v1.05c0,4.4,1.03,8.38,3.1,11.95,2.07,3.57,4.92,6.38,8.55,8.45,3.55,2.02,7.47,3.04,11.75,3.09v.05h23.75v46.6Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 420 B |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.76 100.65">
|
||||
<path d="M25.3,26.58c3.77,0,6.93-1.29,9.47-3.89,2.54-2.59,3.82-5.77,3.82-9.54s-1.3-6.66-3.89-9.26c-2.59-2.59-5.73-3.89-9.4-3.89s-6.69,1.32-9.33,3.96-3.96,5.7-3.96,9.19c0,3.77,1.32,6.95,3.96,9.54,2.64,2.59,5.75,3.89,9.33,3.89Z"/>
|
||||
<polygon points="36.19 77.18 36.19 57.25 36.19 33.79 13.57 33.79 0 33.79 0 57.25 13.57 57.25 13.57 77.18 0 77.18 0 100.65 49.76 100.65 49.76 77.18 36.19 77.18"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 543 B |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.15 105.63">
|
||||
<path d="M35.16,0h23.64L23.64,105.63H0L35.16,0Z"/>
|
||||
<path d="M74.51,0h23.64l-35.16,105.63h-23.64L74.51,0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 260 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" 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>
|
||||
|
After Width: | Height: | Size: 285 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
|
||||
<polygon points="24.73 0 24.73 17.46 0 17.46 0 35.64 24.73 35.64 24.73 53.1 80.03 26.6 80.03 26.4 24.73 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 257 B |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
|
||||
<path d="M5.28,0v16.63H0V0h5.28Z"/>
|
||||
<path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 228 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
|
||||
<path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 219 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.51 84.66">
|
||||
<path d="M18.91,0v49.74c-.47-.03-.94-.06-1.42-.06-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.35-3.41,5.02-7.6,5.02-12.56,0-.53-.03-1.05-.07-1.57V16h46.6v22.48c-.49-.04-.99-.07-1.49-.07-4.72,0-8.81,1.74-12.28,5.21-3.47,3.47-5.21,7.51-5.21,12.1,0,4.96,1.74,9.15,5.21,12.56,3.47,3.41,7.57,5.12,12.28,5.12,4.96,0,9.12-1.7,12.47-5.12,3.31-3.37,4.97-7.49,5.02-12.37h0V0H18.91Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 626 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
|
||||
<polygon points="55.3 53.1 55.3 35.64 80.03 35.64 80.03 17.46 55.3 17.46 55.3 0 0 26.5 0 26.7 55.3 53.1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 255 B |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.86 103.76">
|
||||
<path d="M110.86,57.31l-.12-.15-42.28.88,7.87,10.04c-1.67,2.55-3.76,4.81-6.28,6.77-5.14,4.01-11.14,6.01-18.02,6.01-5.47,0-10.41-1.27-14.84-3.82-4.43-2.54-7.92-6.03-10.46-10.46-2.55-4.43-3.82-9.33-3.82-14.7s1.27-10.27,3.82-14.7c2.54-4.43,6.03-7.92,10.46-10.46,4.43-2.55,9.38-3.82,14.84-3.82,6.88,0,12.89,2,18.02,6.01,5.14,4.01,8.5,9.21,10.11,15.62h23.32c-1.13-8.48-4.08-16.12-8.84-22.9-4.76-6.79-10.84-12.09-18.24-15.9-7.4-3.82-15.53-5.72-24.38-5.72-9.71,0-18.52,2.29-26.43,6.86-7.92,4.57-14.16,10.79-18.73,18.66C2.28,33.39,0,42.17,0,51.88s2.28,18.5,6.86,26.36c4.57,7.87,10.81,14.09,18.73,18.66,7.92,4.57,16.73,6.86,26.43,6.86,8.86,0,16.99-1.91,24.38-5.73,5.62-2.9,10.47-6.65,14.56-11.26l8.97,11.45,10.92-40.92Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 865 B |
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
|
||||
<g id="Calque_1-2" data-name="Calque 1">
|
||||
<path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 796.34 615.89">
|
||||
<path d="M629.11,403.48c-22.39,0-40.53,18.15-40.53,40.53s18.15,40.53,40.53,40.53,40.53-18.15,40.53-40.53-18.15-40.53-40.53-40.53Z"/>
|
||||
<path d="M629.11,212.41c22.38,0,40.53-18.15,40.53-40.53s-18.15-40.53-40.53-40.53-40.53,18.15-40.53,40.53,18.15,40.53,40.53,40.53Z"/>
|
||||
<path d="M493.71,212.41c22.39,0,40.53-18.15,40.53-40.53s-18.14-40.53-40.53-40.53-40.53,18.15-40.53,40.53,18.15,40.53,40.53,40.53Z"/>
|
||||
<rect x="316.89" y="267.34" width="162.12" height="81.06" rx="7.54" ry="7.54"/>
|
||||
<circle cx="493.71" cy="444.01" r="40.53"/>
|
||||
<path d="M256.51,403.48h147.04c4.16,0,7.54,3.38,7.54,7.54v65.97c0,4.16-3.38,7.54-7.54,7.54h-147.04c-4.16,0-7.54-3.38-7.54-7.54v-65.97c0-4.16,3.38-7.54,7.54-7.54Z"/>
|
||||
<path d="M661.65,348.4c4.17,0,7.54-3.38,7.54-7.54v-65.97c0-4.17-3.38-7.54-7.54-7.54h-147.04c-4.16,0-7.54,3.38-7.54,7.54v65.97c0,4.17,3.38,7.54,7.54,7.54h147.04Z"/>
|
||||
<path d="M0,0v615.89h796.34V0H0ZM765.52,585.07H30.82V30.82h734.69v554.25Z"/>
|
||||
<path d="M256.51,131.35h147.04c4.16,0,7.54,3.38,7.54,7.54v65.97c0,4.16-3.38,7.54-7.54,7.54h-147.04c-4.16,0-7.54-3.38-7.54-7.54v-65.97c0-4.16,3.38-7.54,7.54-7.54Z"/>
|
||||
<circle cx="167.24" cy="444.01" r="40.53"/>
|
||||
<rect x="126.71" y="267.34" width="162.12" height="81.06" rx="7.54" ry="7.54"/>
|
||||
<path d="M167.24,212.41c22.39,0,40.53-18.15,40.53-40.53s-18.14-40.53-40.53-40.53-40.53,18.15-40.53,40.53,18.14,40.53,40.53,40.53Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 766.54 578.27">
|
||||
<path d="M0,0v578.27h766.54V0H0ZM482.95,104.88c23.35,0,42.29,18.93,42.29,42.29s-18.93,42.29-42.29,42.29-42.29-18.93-42.29-42.29,18.93-42.29,42.29-42.29ZM658.17,246.77c4.35,0,7.87,3.52,7.87,7.87v68.83c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83c0-4.35,3.52-7.87,7.87-7.87h153.41ZM467.61,254.64v68.83c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87ZM227.6,112.75c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87v68.83c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83ZM142.32,104.88c23.35,0,42.29,18.93,42.29,42.29s-18.93,42.29-42.29,42.29-42.29-18.93-42.29-42.29,18.93-42.29,42.29-42.29ZM100.04,254.64c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87v68.83c0,4.35-3.52,7.87-7.87,7.87H107.91c-4.35,0-7.87-3.52-7.87-7.87v-68.83ZM142.32,473.39c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29ZM396.74,465.51c0,4.35-3.52,7.87-7.87,7.87h-153.41c-4.35,0-7.87-3.52-7.87-7.87v-68.83c0-4.35,3.52-7.87,7.87-7.87h153.41c4.35,0,7.87,3.52,7.87,7.87v68.83ZM482.95,473.39c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29ZM624.21,473.39c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29ZM624.21,189.46c-23.35,0-42.29-18.93-42.29-42.29s18.93-42.29,42.29-42.29,42.29,18.93,42.29,42.29-18.93,42.29-42.29,42.29Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.46 368.5">
|
||||
<g>
|
||||
<circle cx="42.29" cy="42.29" r="42.29"/>
|
||||
<circle cx="382.91" cy="42.29" r="42.29"/>
|
||||
<circle cx="524.18" cy="42.29" r="42.29"/>
|
||||
<rect x="127.56" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle cx="42.29" cy="326.22" r="42.29"/>
|
||||
<circle cx="382.91" cy="326.22" r="42.29"/>
|
||||
<circle cx="524.18" cy="326.22" r="42.29"/>
|
||||
<rect x="127.56" y="283.93" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
|
||||
</g>
|
||||
<rect x="198.43" y="141.89" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
|
||||
<rect y="141.89" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
|
||||
<rect x="396.85" y="141.89" width="169.15" height="84.57" rx="7.87" ry="7.87"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 849 B |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4215.93 2604.36">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #1d1d1b;
|
||||
stroke: #fff;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 7.77px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: .1px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<polygon class="cls-1" points="3658.74 491.76 2897.09 52.81 2897.09 597.3 3658.74 1036.25 3658.74 491.76"/>
|
||||
<polygon class="cls-1" points="3223.51 576.36 3223.51 1120.84 2897.09 1309.32 2897.09 764.83 3223.51 576.36"/>
|
||||
<polygon class="cls-1" points="1373.78 890.48 1228.71 806.72 1228.71 1351.2 1373.78 1309.32 1373.78 890.48"/>
|
||||
<polygon class="cls-1" points="2280.51 408.82 2135.44 325.05 2135.44 869.54 2280.51 953.31 2280.51 408.82"/>
|
||||
<polygon class="cls-1" points="249.44 2126.05 1446.32 1434.97 1446.32 890.48 249.44 1581.56 249.44 2126.05"/>
|
||||
<polygon class="cls-1" points="2280.51 953.31 2897.09 597.3 2897.09 52.81 2280.51 408.31 2280.51 953.31"/>
|
||||
<polygon class="cls-1" points="1301.25 806.72 2135.44 325.05 2135.44 869.54 1446.32 1267.44 1446.32 890.48 1301.25 806.72"/>
|
||||
<polygon class="cls-1" points="1736.48 1602.51 2461.86 2021.34 2461.86 1895.69 1736.48 1476.85 1736.48 1602.51"/>
|
||||
<polygon class="cls-1" points="2641.55 1161.6 2643.21 618.24 2897.09 764.83 2897.09 1309.32 2641.55 1161.6"/>
|
||||
<polygon class="cls-1" points="2643.21 618.24 2969.63 429.76 3223.51 576.36 2897.09 764.83 2643.21 618.24"/>
|
||||
<polygon class="cls-1" points="3223.51 1078.96 3187.24 1099.9 3332.32 1183.67 3368.59 1162.73 3223.51 1078.96"/>
|
||||
<polygon class="cls-1" points="3187.24 1070.94 3150.97 1091.89 3296.05 1175.65 3332.32 1154.71 3187.24 1070.94"/>
|
||||
<polygon class="cls-1" points="3150.97 1062.12 3114.7 1083.06 3259.78 1166.82 3296.05 1145.88 3150.97 1062.12"/>
|
||||
<polygon class="cls-1" points="3114.7 1054.91 3078.44 1075.85 3223.51 1159.62 3259.78 1138.68 3114.7 1054.91"/>
|
||||
<polygon class="cls-1" points="3078.44 1050 3042.17 1070.94 3187.24 1154.71 3223.51 1133.77 3078.44 1050"/>
|
||||
<polygon class="cls-1" points="3042.17 1041.99 3005.9 1062.93 3150.97 1146.7 3187.24 1125.75 3042.17 1041.99"/>
|
||||
<polygon class="cls-1" points="3005.9 1038.4 2969.63 1059.35 3114.7 1143.11 3150.97 1122.17 3005.9 1038.4"/>
|
||||
<polygon class="cls-1" points="2969.63 1029.06 2933.36 1050 3078.44 1133.77 3114.7 1112.83 2969.63 1029.06"/>
|
||||
<polygon class="cls-1" points="2933.36 1021.04 2897.09 1041.99 3042.17 1125.75 3078.44 1104.81 2933.36 1021.04"/>
|
||||
<polygon class="cls-1" points="2897.09 1016.13 2860.82 1037.08 3005.9 1120.84 3042.17 1099.9 2897.09 1016.13"/>
|
||||
<polygon class="cls-1" points="2860.82 1037.08 2860.82 1078.96 3005.9 1162.73 3005.9 1120.84 2860.82 1037.08"/>
|
||||
<path class="cls-1" d="M3005.9,1120.84l36.27-20.94v25.85s36.27-20.94,36.27-20.94v28.96s36.27-20.94,36.27-20.94v30.29s36.27-20.94,36.27-20.94v24.52s36.27-20.94,36.27-20.94v28.96s36.27-20.94,36.27-20.94v25.85s36.27-20.94,36.27-20.94v28.15s36.27-20.94,36.27-20.94v29.77s36.27-20.94,36.27-20.94v28.96s36.27-20.94,36.27-20.94v41.88s-36.27,20.94-36.27,20.94c0,0-325.51-60.05-326.42-62.83-.91-2.78,0-41.88,0-41.88Z"/>
|
||||
<polygon class="cls-1" points="3622.47 1057.67 3602.13 1046.27 3602.13 675.11 3622.47 681.07 3622.47 1057.67"/>
|
||||
<polygon class="cls-1" points="3368.59 1078.96 3348.24 1067.56 3348.24 648.38 3368.59 660.12 3368.59 1078.96"/>
|
||||
<polygon class="cls-1" points="3368.59 660.12 3368.59 1078.96 3042.17 1267.44 3042.17 1393.97 3368.59 1204.61 3441.13 1162.73 3441.13 785.77 3622.47 681.07 3622.47 1057.67 3695.01 1016.03 3695.01 471.55 3368.59 660.12"/>
|
||||
<polygon class="cls-1" points="2897.09 1309.32 3296.05 1539.3 3296.05 1413.65 2897.09 1183.67 2897.09 1309.32"/>
|
||||
<polygon class="cls-1" points="2462.85 2021.34 3314.19 1531.11 3313.98 1403.68 2462.85 1895.69 2462.85 2021.34"/>
|
||||
<polygon class="cls-1" points="3313.98 1403.68 3296.05 1393.09 3296.05 1393.09 3063.02 1255.4 3368.59 1078.96 3348.24 1067.56 3044.87 1244.68 2919.1 1172 2897.09 1183.67 3024.03 1256.84 3042.17 1267.44 3042.29 1267.37 3278.27 1403.4 2462.85 1874.75 1736.48 1455.91 558.65 2137.05 558.65 2156.93 1736.48 1476.85 2456.45 1892.57 2461.86 1895.69 2461.86 1895.69 2461.86 1895.69 2461.86 1895.69 3313.98 1403.68"/>
|
||||
<path class="cls-1" d="M2897.09,10.93l-616.58,356.01-145.08-83.77s-905.93,521.27-906.73,523.55c-.8,2.27,145.08,83.77,145.08,83.77L212.65,1560.22l36.87,21.3-.08.05,290.15,167.53v544.49l1196.88-691.08v-125.65l-1177.83,680.08v-418.85l-285.59-170.16,1173.26-677.44-145.08-83.77,834.19-481.66,145.08,83.77L2897.09,52.81l740.91,427-35.88,20.87-253.88,147.7,20.34,11.75,290.15-168.36,36.27-20.11L2897.09,10.93Z"/>
|
||||
<rect class="cls-2" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4"/>
|
||||
<polygon class="cls-1" points="285.71 2146.57 302.22 2137.04 302.22 1713.23 285.71 1727.73 285.71 2146.57"/>
|
||||
<polygon class="cls-1" points="212.65 2104.7 285.71 2146.99 285.71 1728.16 467.06 1832.87 467.06 2251.7 539.59 2293.59 539.59 1749.1 212.65 1560.22 212.65 2104.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 992 B |
|
Before Width: | Height: | Size: 133 KiB |
@@ -1,51 +0,0 @@
|
||||
.affiche-algorave {
|
||||
grid-row: span 2;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover .description,
|
||||
&:active .description {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.description {
|
||||
opacity: 0;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
text-align: justify;
|
||||
|
||||
flex: 1;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: inline
|
||||
}
|
||||
|
||||
ul li:not(:last-child)::after {
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 8.4 KiB |
@@ -1,47 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="4.6079388mm"
|
||||
height="3.1703224mm"
|
||||
viewBox="0 0 4.6079388 3.1703224"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xml:space="preserve"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs2"><linearGradient
|
||||
id="linearGradient22086"><stop
|
||||
style="stop-color:#ffffff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop22082" /><stop
|
||||
style="stop-color:#d4d4d4;stop-opacity:1;"
|
||||
offset="1"
|
||||
id="stop22084" /></linearGradient><linearGradient
|
||||
xlink:href="#linearGradient22086"
|
||||
id="linearGradient22088"
|
||||
x1="24.94607"
|
||||
y1="37.351017"
|
||||
x2="25.431881"
|
||||
y2="37.910633"
|
||||
gradientUnits="userSpaceOnUse" /><linearGradient
|
||||
xlink:href="#linearGradient22086"
|
||||
id="linearGradient22096"
|
||||
x1="27.680107"
|
||||
y1="37.517262"
|
||||
x2="28.045597"
|
||||
y2="37.891655"
|
||||
gradientUnits="userSpaceOnUse" /></defs><g
|
||||
id="layer4"
|
||||
transform="translate(-24.106776,-36.438155)"><g
|
||||
id="g18540"
|
||||
style="display:inline;fill:#bdbdbd;fill-opacity:1"><path
|
||||
style="fill:url(#linearGradient22088);fill-opacity:1;stroke:#07077d;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 24.297671,37.95924 1.296798,-1.216447 0.0019,0.646007 1.376938,0.0036 -0.01322,1.089295 -1.296188,-0.01308 -0.0089,0.827227 z"
|
||||
id="path14411" /><circle
|
||||
style="opacity:1;fill:url(#linearGradient22096);fill-opacity:1;stroke:#07077d;stroke-width:0.210988;stroke-linejoin:round;stroke-miterlimit:10.5;stroke-opacity:1;paint-order:markers fill stroke"
|
||||
id="path14465"
|
||||
cx="28.041388"
|
||||
cy="37.955338"
|
||||
r="0.56783295" /></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 171 KiB |
@@ -1,147 +0,0 @@
|
||||
.affiche-jdll2024 {
|
||||
border-top-color: #fafaf5ff;
|
||||
border-left-color: #fafaf5ff;
|
||||
border-bottom-color: #868381ff;
|
||||
border-right-color: #868381ff;
|
||||
border-style: solid;
|
||||
border-width: 4px;
|
||||
background-color: #d3cfc9ff;
|
||||
padding: 0;
|
||||
color: black;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 iframe {
|
||||
flex: 1;
|
||||
border-bottom-color: #fafaf5ff;
|
||||
border-right-color: #fafaf5ff;
|
||||
border-top-color: #868381ff;
|
||||
border-left-color: #868381ff;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 button {
|
||||
border-top-color: #fafaf5ff;
|
||||
border-left-color: #fafaf5ff;
|
||||
border-bottom-color: #868381ff;
|
||||
border-right-color: #868381ff;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
background-color: #d3cfc9ff;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 header {
|
||||
height: 25px;
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
background: linear-gradient(to right, #112160ff, #a6c6f2ff);
|
||||
padding: 2px 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
column-gap: 4px;
|
||||
|
||||
border-bottom: solid 2px #d3cfc9ff;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 > :not(header) {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 header h1 {
|
||||
flex: 1;
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 header > img {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 header > button {
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 button img {
|
||||
height: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav {
|
||||
padding: 2px;
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
border-bottom: groove 2px #fafaf5ff;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav:first-of-type {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav button {
|
||||
height: 100%;
|
||||
font-size: 0.6rem;
|
||||
width: 50px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav button img {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav hr {
|
||||
flex: 1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav > img {
|
||||
height: 100%;
|
||||
border-bottom-color: #fafaf5ff;
|
||||
border-right-color: #fafaf5ff;
|
||||
border-top-color: #868381ff;
|
||||
border-left-color: #868381ff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav input {
|
||||
flex: 1;
|
||||
border-bottom-color: #fafaf5ff;
|
||||
border-right-color: #fafaf5ff;
|
||||
border-top-color: #868381ff;
|
||||
border-left-color: #868381ff;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav label {
|
||||
font-size: 0.7rem;
|
||||
margin-right: 1ex;
|
||||
}
|
||||
|
||||
.affiche-jdll2024 nav:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Arvo";
|
||||
src: url("./Arvo-Bold.ttf");
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.affiche-perm {
|
||||
background: black url("../../images/affiches/perm-bg.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.affiche-perm h1 {
|
||||
font-size: 1.8em;
|
||||
margin-top: 50px;
|
||||
font-weight: normal;
|
||||
font-family: "Arvo", sans-serif;
|
||||
}
|
||||
|
||||
.affiche-perm .event-hours {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 1.2em;
|
||||
font-family: "Arvo";
|
||||
}
|
||||
|
Before Width: | Height: | Size: 933 B |
|
Before Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 169 KiB |
@@ -1,67 +0,0 @@
|
||||
/* Computer */
|
||||
.grid_1 { width: 6.5%; }
|
||||
.grid_2 { width: 15%; }
|
||||
.grid_3 { width: 23.5%; }
|
||||
.grid_4 { width: 32%; }
|
||||
.grid_5 { width: 40.5%; }
|
||||
.grid_6 { width: 49%; }
|
||||
.grid_7 { width: 57.5%; }
|
||||
.grid_8 { width: 66%; }
|
||||
.grid_9 { width: 74.5%; }
|
||||
.grid_10 { width: 83%; }
|
||||
.grid_11 { width: 91.5%; }
|
||||
.grid_12 { width: 100%; }
|
||||
|
||||
.grid_1,
|
||||
.grid_2,
|
||||
.grid_3,
|
||||
.grid_4,
|
||||
.grid_5,
|
||||
.grid_6,
|
||||
.grid_7,
|
||||
.grid_8,
|
||||
.grid_9,
|
||||
.grid_10,
|
||||
.grid_11,
|
||||
.grid_12 {
|
||||
margin: 0 2% 1% 0;
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alpha{margin-left:0;}
|
||||
.omega{margin-right:0;}
|
||||
|
||||
.container{
|
||||
width: 90%; /*width: 1000px;*/
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile */
|
||||
@media screen and (max-width : 480px) {
|
||||
|
||||
.grid_1,
|
||||
.grid_2,
|
||||
.grid_3,
|
||||
.grid_4,
|
||||
.grid_5,
|
||||
.grid_6,
|
||||
.grid_7,
|
||||
.grid_8,
|
||||
.grid_9,
|
||||
.grid_10,
|
||||
.grid_11,
|
||||
.grid_12 {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,351 +0,0 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,416 +0,0 @@
|
||||
html {
|
||||
font-family: 'arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
color: #cfcfcf;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
background: url("../images/world_network.muted.jpg");
|
||||
background-color: black;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
/* global items */
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: yellow;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:yellow;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#main-header {
|
||||
display: grid;
|
||||
grid-template-columns: 95px 1fr 400px;
|
||||
grid-template-rows: min-content;
|
||||
align-items: center;
|
||||
|
||||
gap: 15px;
|
||||
|
||||
padding: 50px 10px 10px;
|
||||
position: relative;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#main-header > * {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#main-header h1 {
|
||||
line-height: 25px;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-family: monospace;
|
||||
color: yellow;
|
||||
|
||||
flex: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#main-header nav {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-header {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
#main-header img {
|
||||
grid-column: 1;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#main-header h1 {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#main-header #main-nav {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* main area */
|
||||
|
||||
#homepage {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
grid-auto-rows: min-content;
|
||||
row-gap: 15px;
|
||||
column-gap: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 15vh;
|
||||
}
|
||||
|
||||
main #main-info {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
main #events {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 3;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: min-content;
|
||||
column-gap: 15px;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
main #description {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#homepage .toolbar {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 889px){
|
||||
#homepage {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 50px;
|
||||
}
|
||||
|
||||
main #main-info {
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
main #events {
|
||||
grid-column: 1;
|
||||
grid-row: 5;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
main #description {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
main .toolbar {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* status page */
|
||||
|
||||
.status-page main {
|
||||
width: 90%;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 15vh;
|
||||
margin-bottom: 15vh;
|
||||
}
|
||||
|
||||
/* status block */
|
||||
|
||||
.status-container {
|
||||
text-align: left;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(min-content, 75px) 1fr;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
|
||||
border: solid 1px currentColor;
|
||||
background: black;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.status-container.no-icon {
|
||||
grid-template-columns: min-content 1fr;
|
||||
}
|
||||
|
||||
.status-container > * {
|
||||
grid-column: span 2;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.status-container > *:first-child:not(img) {
|
||||
grid-column: 2;
|
||||
text-align: left;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.status-container.no-icon > *:first-child:not(img) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-container .status-icon {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Join steps */
|
||||
|
||||
#join-steps {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
text-align: left;
|
||||
|
||||
counter-reset: join-step;
|
||||
}
|
||||
|
||||
#join-steps li {
|
||||
position: relative;
|
||||
counter-increment: join-step;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#join-steps li::before {
|
||||
content: counter(join-step) ".";
|
||||
font-size: 1.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#join-steps li:nth-child(2)::before {
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
|
||||
#homepage .toolbar button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#homepage .toolbar button img {
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#homepage .toolbar button img[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* description */
|
||||
|
||||
#description {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#description > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl.definitions > * {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dl.definitions > dt:not(:first-child)::before {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
dl.definitions > dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hackerspace-logo {
|
||||
float: right;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#description marquee {
|
||||
height:25px;
|
||||
max-width:400px;
|
||||
background-color:none;
|
||||
font-family:arial;
|
||||
font-size:12pt;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
/* side */
|
||||
|
||||
main > aside {
|
||||
grid-column: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main-info address {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#main-info > * {
|
||||
margin: 1.33em 0;
|
||||
font-weight: bold;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 889px){
|
||||
#main-info {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* background */
|
||||
|
||||
.fullscreen-background {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.fullscreen-background img, .fullscreen-background video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.fullscreen-background video {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.fullscreen-background img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: linear 1s opacity;
|
||||
}
|
||||
|
||||
.fullscreen-background img[hidden]{
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fullscreen-background::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to top, black, rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
/* nav */
|
||||
|
||||
#main-nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main-nav > *:not(:last-child)::after {
|
||||
content: " | ";
|
||||
content: " | " / "";
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
#main-nav > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Affiches */
|
||||
|
||||
.affiche {
|
||||
border: solid 1px currentColor;
|
||||
padding: 10px;
|
||||
background: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.affiche .credits {
|
||||
font-size: 0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.affiche .credits, .affiche .credits * {
|
||||
color: inherit;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 738 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 341 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,54 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<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"
|
||||
height="48"
|
||||
viewBox="0 -960 960 960"
|
||||
width="48"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="pause.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="987"
|
||||
inkscape:window-height="931"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="14"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="24"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="m 555,-200 v -560 h 175 v 560 z m -325,0 v -560 h 175 v 560 z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.999999" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 910 KiB |
@@ -1,54 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<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"
|
||||
height="48"
|
||||
viewBox="0 -960 960 960"
|
||||
width="48"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="play.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="987"
|
||||
inkscape:window-height="931"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="14"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="24"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="23"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="m 320,-203 v -560 l 440,280 z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.999999" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 93 KiB |
@@ -1,398 +1,239 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="fr" vocab="http://schema.org/">
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="/images/favicon.svg" type="image/svg+xml">
|
||||
<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
|
||||
<link rel="me" href="https://nerdculture.de/@labolyon" />
|
||||
<title>Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<style>
|
||||
.fullscreen-background {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<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">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
<!--REPONSIVE-->
|
||||
<link rel="stylesheet" href="style/responsive.css">
|
||||
<!--REDUCED MOTION-->
|
||||
<link rel="stylesheet" href="style/reduced.css">
|
||||
|
||||
<link rel="stylesheet" href="css/affiches/perm.css">
|
||||
<link rel="stylesheet" href="css/affiches/jdll2024.css">
|
||||
<link rel="stylesheet" href="css/affiches/algorave.css">
|
||||
<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 typeof="Organization Place" resource="https://labolyon.fr/">
|
||||
|
||||
<div class="fullscreen-background" aria-hidden="true">
|
||||
<video muted loop poster="images/world_network.jpg" id="background-video">
|
||||
<source src="videos/background.webm" type="video/webm" />
|
||||
<source src="videos/background.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="/images/world_network.muted.jpg" id="background-poster"/>
|
||||
</div>
|
||||
|
||||
<header id="main-header">
|
||||
<img property="logo" class="logo" src="images/logo_picto.svg" alt="Logo du laboratoire ouvert lyonnais : un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." />
|
||||
|
||||
<h1 property="name">Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
|
||||
|
||||
<nav id="main-nav">
|
||||
<link property="url" href="https://labolyon.fr/">
|
||||
<a property="url" href="https://git.labolyon.fr/explore/repos">Dépots Git</a>
|
||||
<a property="url" href="https://wiki.labolyon.fr/">Wiki</a>
|
||||
<a property="url" href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
|
||||
<a property="url" href="https://nerdculture.de/@labolyon">Fédiverse</a>
|
||||
<a property="url" href="https://matrix.to/#/#general:chat.labolyon.fr">Salon Matrix</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="homepage">
|
||||
|
||||
<section id="description">
|
||||
|
||||
<dl class="definitions">
|
||||
<dt>Hackerspace</dt>
|
||||
<dd><em>n.m.</em> : 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><em>n.</em> : 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>
|
||||
</dl>
|
||||
|
||||
<hr>
|
||||
|
||||
<div property="abstract">
|
||||
|
||||
<p>Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique.
|
||||
Le LOL est un lieu d'exploration des alternatives et de bidouille.</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 techniques qui nous entourent.</p>
|
||||
|
||||
<p>Nous revendiquons l'ouverture du code et des techniques.
|
||||
Le partage des connaissances et l'autogestion.</p>
|
||||
|
||||
<p>
|
||||
<a href="https://www.hackerspaces.org/" class="hackerspace-logo" target="_blank"><img class="icons" src="images/logo_hackerspaces_monde.png" alt="Hackerspaces.org"></a>
|
||||
<marquee direction="left" behavior="scroll" scrollamount="3">none of us is smarter than all of us - nul n'est plus intelligent·e que nous tou·tes réunis</marquee>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside id="main-info">
|
||||
|
||||
<address property="address"><a href="geo:45.7732495,4.8372366">
|
||||
7 Place Louis Chazette 69001 Lyon<br/>
|
||||
45° 46' 23.698" N 4° 50' 14.052" E
|
||||
</a></address>
|
||||
|
||||
<p> Ouvert tous les mardis à partir de 19h</p>
|
||||
|
||||
<section class="status-section">
|
||||
<a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
|
||||
<script src="/js/status.js"></script>
|
||||
</section>
|
||||
|
||||
<ol id="join-steps">
|
||||
<li>Sonnez à l’interphone</li>
|
||||
<li><img src="/images/plan-d-access.png" alt="Plan d'acces au locaux du LOL : En entrant depuis la place, tout au bout en traversant une cour. Sur la droite avant les escaliers" title="En entrant depuis la place, tout au bout en traversant une cour. Sur la droite avant les escaliers" /></li>
|
||||
</ol>
|
||||
</aside>
|
||||
|
||||
<section id="events">
|
||||
|
||||
<article class="event affiche-perm affiche" property="event" typeof="Event">
|
||||
<h1 property="name">Permanence du LOL</h1>
|
||||
|
||||
<div property="description">
|
||||
<p>Venez chiller avec nous, partager un thé ou une biere.</p>
|
||||
|
||||
<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
|
||||
</div>
|
||||
|
||||
<p class="event-hours"><strong><span property="eventSchedule" typeof="Schedule">
|
||||
Tous les <data property="byDay" content="Tuesday">mardis</data> à partir de <data property="startTime" content="19:00">19h</data>
|
||||
</span><br/>
|
||||
au <span property="location" href="https://labolyon.fr/">local du LOL</span></strong></p>
|
||||
|
||||
<p>Adhésion conseillée (prix libre)</p>
|
||||
</article>
|
||||
|
||||
<!--<article class="event affiche affiche-drags-nerds-hackathon">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Press Start 2P";
|
||||
src: url("./css/affiches/PressStart2P-Regular-DogiNJoF.ttf");
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: velvelyne;
|
||||
src: url("./css/affiches/Velvelyne-Light-C9f5yZCm.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: velvelyne;
|
||||
src: url("./css/affiches/Velvelyne-Bold-CR91h96S.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon {
|
||||
background: white;
|
||||
grid-row: span 2;
|
||||
color: black;
|
||||
padding: 0;
|
||||
border-color: white;
|
||||
line-height: 1.4;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > h2 {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
font-family: velvelyne;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > p,
|
||||
.affiche-drags-nerds-hackathon > ul {
|
||||
padding: 5px 15px;
|
||||
margin: 0;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon li {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon li::marker {
|
||||
content: "> ";
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > img:first-of-type {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > p:first-of-type {
|
||||
background: black;
|
||||
color: white;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="./images/affiches/drags-nerds-hackathon-header.png" alt="Drags & Nerds #2: Une image en noir et blanc avec le titre de l'événement et des photos détourées de drag queens.">
|
||||
|
||||
<p>
|
||||
A tous·tes les drags, tous·tes les nerds et l'ensemble des personnes entre les deux.
|
||||
Vous êtes invité·es à la grande soirée Drags&Nerds du 22 mai 2026 au Grrrnd Zero !
|
||||
</p>
|
||||
|
||||
<h2>> Résidence et Hackathon</h2>
|
||||
|
||||
<p>
|
||||
Pour se rencontrer et construire ensemble, une grande Résidence/Hackathon se déroulera du <strong><time datetime="2026-04-17T10:00:00">17</time> au <time datetime="2026-04-19T19:00:00">19 Avril 2026</time></strong>.
|
||||
<strong>Ça se passe au Laboratoire Ouvert Lyonnais</strong>, un Hackerspace queer de Lyon. 7 Place Louis Chazette 69001 Lyon.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
On construira nos performances, nos costumes, nos makeups, nos mises en scène...
|
||||
Tu as envie de faire du lip sync ? De jouer de ton synthé ? D'expérimenter de nouveaux sons ?
|
||||
Ou juste de donner un coup de pouce à des drags pour leurs show ?
|
||||
Il y a une place pour toi.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Repas végétaliens le midi</li>
|
||||
<li>Outils pour souder, coudre, coder, couper, clouer et imprimer en 3D en libre service</li>
|
||||
<li>Masques FFP2 pour l'autodéfense sanitaire</li>
|
||||
</ul>
|
||||
|
||||
<p style="text-align: center;">
|
||||
Inscrivez vous en envoyant un email à<br/><a href="mailto:drags-nerds@epickiwi.fr">drags‑nerds@epickiwi.fr</a><br/>
|
||||
Ou rendez vous sur <a href="https://drags-nerds.net/" target="_blank">drags‑nerds.net</a>
|
||||
</p>
|
||||
</article>-->
|
||||
|
||||
<!--<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
|
||||
<style>
|
||||
.affiche-debian-release-party {
|
||||
|
||||
line-height: 1.4;
|
||||
grid-row: span 2;
|
||||
background: url("images/affiches/debian-background.png");
|
||||
background-size: cover;
|
||||
background-position: 50% 0;
|
||||
|
||||
a {
|
||||
color: #c91043;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
font-style: italic;
|
||||
margin-top: 1ex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 property="name" style="text-shadow: 3px 0 0 #c91043; text-transform: uppercase; text-align: center;">Debian Trixie<br/>release party</h1>
|
||||
|
||||
<p>
|
||||
<a href="https://www.debian.org/releases/trixie/index.fr.html">Debian Trixie</a> sort <a href="https://lists.debian.org/debian-devel-announce/2025/07/msg00003.html">samedi 9 Août</a> !
|
||||
Pour marquer le coup (et aussi pour ne pas manquer une bonne occasion de bidouiller des ordinateurs ensemble) on va s'organiser une release party ce <strong>Samedi 9 Août à partir de 17h au LOL</strong>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="https://www.debian.org/">Debian</a> c'est l'une des distributions Linux les plus populaires. Un système exploitation alternatif qui remplace <a href="https://endof10.org/fr/">Windows</a>. Elle est basée sur Linux et (majoritairement) composée de logiciels libres.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Et <a href="https://www.debian.org/releases/trixie/index.fr.html">Trixie</a> c'est le petit nom de la nouvelle version stable de Debian. C'est pas tous les jours qu'une nouvelle version de Debian sort et ça représente un gros travail bénévole. Donc fêtons cette sortie !
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Il y aura des frites à prix libre proposés par l'<a href="https://wiki.labolyon.fr/doku.php?id=adelfrite">Adelfrite</a> aux alentours de 20h.
|
||||
</p>
|
||||
|
||||
<ol style="list-style-type: disc;">
|
||||
<li>17h00 – <strong>Backup Tea Time</strong>. Il parait qu'il faut sauvegarder régulièrement ses données ? On va voir comment faire. <small>Apportez un support de stockage (Disque Dur externe, clé USB, etc...)</small></li>
|
||||
<li>19h00 – <strong>Install & full-upgrade Party</strong> On lance les installations (si vous voulez installer Debian) ou les mise à jour de nos machines vers Trixie. <small>Apportez vos laptops et vos serveurs !</small></li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Vous pouvez venir avec un ordinateur Windows, un Linux ou même sans, juste pour voir.
|
||||
Il n'y a pas d'autre pré-requis que d'être curieux·euse et de savoir utiliser un clavier.
|
||||
</p>
|
||||
|
||||
<p style="text-align: right; font-style: italic;">
|
||||
Rejoignez nous sur matrix:<br/>
|
||||
<code>#trixiereleaseparty-lyon:club1.fr</code>
|
||||
</p>
|
||||
</article>-->
|
||||
|
||||
<!--<article class="event affiche affiche-jamfetedelamusique" property="event" typeof="Event">
|
||||
<img src="./images/affiches/jamfetedelamusique.png" alt="Affiche de la jam ouverte du 21 Juin 2025 : Un motif abstrait généré de manière electronique." aria-labelledby="jam21062025-decription" />
|
||||
<div class="description" id="jam21062025-description">
|
||||
<h1 property="name">JAM OUVERTE</h1>
|
||||
<p property="description">La fête de la musique approche !
|
||||
C'est avec plaisir que nous vous invitons à venir bricoler, jouer, experimenter les sons, les images, les mélodies et le vacarme technique dans une JAM expérimentale et ouverte à tous·tes !
|
||||
Pour les novices, curieux, connaisseurs ou encore tous•tes celles et ceux qui veulent juste découvrir la musique et la vidéo décalée et experimentale, vous êtes les bienvenu•e•s !
|
||||
Rendez-vous 7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)
|
||||
La JAM se déroule de 14h à 18h, afin de laisser la soirée libre pour les nombreux événements de la ville en ce jour festif :)
|
||||
Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est permis pour cette après-midi festive que nous vous proposons !</p>
|
||||
<p property="location">7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)</p>
|
||||
<p>
|
||||
<time datetime="2025-06-21T14:00:00" content="2025-06-21T14:00:00" property="startDate">21 Juin 14h</time>
|
||||
-
|
||||
<time datetime="2025-06-21T18:00:00" content="2025-06-21T18:00:00" property="endDate">18h</time>
|
||||
</p>
|
||||
<p>Prix libre, No CB, adhésion libre</p>
|
||||
<p property="abstract">Experimentations visuelles et sonores ouverte</p>
|
||||
<p>poster by CCC</p>
|
||||
</div>
|
||||
</article>-->
|
||||
|
||||
<!--<article class="event affiche-jdll2024 affiche">
|
||||
<header>
|
||||
<img src="/images/favicon.png" alt="Favicon du LOL" />
|
||||
<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
|
||||
|
||||
<button>
|
||||
<img src="/css/affiches/reduire.png" alt="Reduire" />
|
||||
</button>
|
||||
<button>
|
||||
<img src="/css/affiches/agrandir.png" alt="Agrandir" />
|
||||
</button>
|
||||
<button>
|
||||
<img src="/css/affiches/fermer.png" alt="Fermer" />
|
||||
</button>
|
||||
</header>
|
||||
<nav>
|
||||
<button id="jdll-2024-back">
|
||||
<img src="/css/affiches/back.png" alt="Back" />
|
||||
Back
|
||||
</button>
|
||||
<button id="jdll-2024-forward">
|
||||
<img src="/css/affiches/forward.png" alt="Back" />
|
||||
Forward
|
||||
</button>
|
||||
<button id="jdll-2024-home">
|
||||
<img src="/css/affiches/home.png" alt="Home" />
|
||||
Home
|
||||
</button>
|
||||
<hr>
|
||||
<img src="/css/affiches/tux.png" alt="Tux" />
|
||||
</nav>
|
||||
<nav>
|
||||
<label for="jdll-2024-location">Location : </label>
|
||||
<input type="url" name="location" id="jdll-2024-location" value="/jdll2024/affiche.html"/>
|
||||
</nav>
|
||||
<iframe src="/jdll2024/affiche.html" id="jdll-2024-iframe" frameborder="0"></iframe>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const iframe = document.getElementById("jdll-2024-iframe");
|
||||
const initialValue = iframe.src;
|
||||
|
||||
iframe.addEventListener("load", () => {
|
||||
document.getElementById("jdll-2024-location").value = iframe.src
|
||||
document.getElementById("jdll-2024-title").textContent = iframe.contentWindow.document.title
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-location").addEventListener("change", e => {
|
||||
iframe.src = e.target.value
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-back").addEventListener("click", () => {
|
||||
iframe.contentWindow.history.back()
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-forward").addEventListener("click", () => {
|
||||
iframe.contentWindow.history.forward()
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-home").addEventListener("click", () => {
|
||||
iframe.src = initialValue
|
||||
})
|
||||
})()
|
||||
</script> -->
|
||||
</section>
|
||||
|
||||
<div class="toolbar">
|
||||
<button id="play-background" hidden>
|
||||
<img src="/images/play.svg" alt="Play" class="play" title="Play" />
|
||||
<img src="/images/pause.svg" alt="Pause" class="pause" hidden title="Pause" />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="js/background.js"></script>
|
||||
<body>
|
||||
<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">LOL</span>
|
||||
<span class="plain-name">LOL</span>
|
||||
</h1>
|
||||
|
||||
<nav aria-label="outils numériques du LOL">
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="homeContent">
|
||||
|
||||
<section id="titleSection" class="solidBox">
|
||||
<h2>
|
||||
Hackerspace
|
||||
</h2>
|
||||
<p>
|
||||
<br>
|
||||
Lieu autogéré <br>
|
||||
de réappropriation, <br>
|
||||
réparation & recyclage <br>
|
||||
des objets techniques <br>
|
||||
& technologiques
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="hourSection" class="solidBox">
|
||||
<h3>Horaires d'ouverture</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Mar. <strong>17h → 23h</strong>
|
||||
</li>
|
||||
<li>
|
||||
Sam. <strong>14h → 20h</strong>
|
||||
</li>
|
||||
</ol>
|
||||
<!-- pour plus tard
|
||||
<h3>Nocturne</h3>
|
||||
<ol>
|
||||
<li>Ven. <strong>21h → 5h</strong></li>
|
||||
</ol>
|
||||
-->
|
||||
</section>
|
||||
|
||||
<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> 🖷 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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="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>
|
||||
<path d="M3957.03,1272.8c-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
|
||||
<path d="M3886.4,1232.02c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.28,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
<path d="M3836.35,1260.92c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
<path d="M3878.4,1294.69c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
|
||||
<path d="M3906.98,1301.7c-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0,8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0Z"/>
|
||||
<path d="M3873.65,1320.95l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0Z"/>
|
||||
<path d="M3948.69,1254.1c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0l54.35-31.38Z"/>
|
||||
<path d="M3575.35,1320.96l227.65,131.45,294.35-169.96-227.65-131.45-294.35,169.96ZM4074.57,1282.45l-271.56,156.8-204.87-118.29,271.56-156.8,204.87,118.29Z"/>
|
||||
<path d="M3748.68,1311.55l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
|
||||
<path d="M3816.27,1388.68c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
<path d="M3753.75,1366.66l54.35-31.38c1.54-.89,1.54-2.33,0-3.22l-24.39-14.08c-1.54-.89-4.04-.89-5.58,0l-54.35,31.38c-1.54.89-1.54,2.33,0,3.22l24.39,14.08c1.54.89,4.04.89,5.58,0Z"/>
|
||||
<path d="M3715.68,1330.6c8.27-4.78,8.27-12.52,0-17.3-8.27-4.78-21.69-4.78-29.96,0-8.27,4.78-8.27,12.52,0,17.3,8.27,4.78,21.69,4.78,29.96,0Z"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
|
||||
</svg>
|
||||
</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="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</h4>
|
||||
|
||||
<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>
|
||||
<section id="statuSection" class="solidBox">
|
||||
<div id="statusDesc">
|
||||
<h3>
|
||||
Le LOL peut ouvrir en dehors des horaires habituels.
|
||||
En fonction de nos envies et disponibilités.
|
||||
</h3>
|
||||
<p>
|
||||
<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>→ → →</a>
|
||||
</section>
|
||||
<aside id="extraContent">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</footer>
|
||||
<noscript>
|
||||
<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 aria-hidden="true"></video>
|
||||
<canvas class="cute-texture" aria-hidden="true"></canvas>
|
||||
</main>
|
||||
<!-- SCRIPT PRINCIPAL -->
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Le LOL aux JDLL 2024</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Le LOL sera aux <a href="https://jdll.org/">JDLL 2024</a> !</h1>
|
||||
|
||||
<p>C'est le 25 et le 26 mai à l'<a href="https://www.openstreetmap.org/?mlat=45.73257&mlon=4.83185#map=19/45.73257/4.83185" target="_blank">ENS</a> ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.</p>
|
||||
|
||||
<p>Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.<br/>
|
||||
Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.</p>
|
||||
|
||||
<p>Venez nous rencontrer, hacker ou bien discuter sur le stand.</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
(function(){
|
||||
|
||||
var btn = document.getElementById("play-background");
|
||||
/** @type {HTMLVideoElement} */
|
||||
var video = document.getElementById("background-video");
|
||||
var poster = document.getElementById("background-poster");
|
||||
|
||||
btn.hidden = false
|
||||
|
||||
btn.addEventListener("click", function(e) {
|
||||
e.preventDefault()
|
||||
|
||||
if(btn.classList.contains("playing")) {
|
||||
video.pause();
|
||||
} else {
|
||||
video.play()
|
||||
}
|
||||
})
|
||||
|
||||
video.addEventListener("pause", function(e) {
|
||||
btn.querySelector(".play").hidden = false;
|
||||
btn.querySelector(".pause").hidden = true;
|
||||
btn.classList.remove("playing")
|
||||
})
|
||||
|
||||
video.addEventListener("play", function(e) {
|
||||
btn.querySelector(".play").hidden = true;
|
||||
btn.querySelector(".pause").hidden = false;
|
||||
poster.hidden = true;
|
||||
btn.classList.add("playing")
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,348 @@
|
||||
const DEFAULT_VERTEX_SHADER = `
|
||||
attribute float aVertexIndex;
|
||||
varying highp vec2 vTextureCoord;
|
||||
|
||||
// This vertex shader produces the following, when drawn using indices 0..3:
|
||||
//
|
||||
// 1 | 0-----x.....2
|
||||
// 0 | | s | . ´
|
||||
// -1 | x_____x´
|
||||
// -2 | : .´
|
||||
// -3 | 1´
|
||||
// +---------------
|
||||
// -1 0 1 2 3
|
||||
//
|
||||
// The axes are clip-space x and y. The region marked s is the visible region.
|
||||
// The digits in the corners of the right-angled triangle are the vertex
|
||||
// indices.
|
||||
//
|
||||
// The top-left has UV 0,0, the bottom-left has 0,2, and the top-right has 2,0.
|
||||
// This means that the UV gets interpolated to 1,1 at the bottom-right corner
|
||||
// of the clip-space rectangle that is at 1,-1 in clip space.
|
||||
|
||||
void main() {
|
||||
vec2 uv = vec2(floor(aVertexIndex / 2.0), floor(mod(aVertexIndex, 2.0))) * 2.0;
|
||||
gl_Position = vec4(uv * vec2(2.0, -2.0) + vec2(-1.0, 1.0), 0.0, 1.0);
|
||||
vTextureCoord = uv;
|
||||
}
|
||||
`
|
||||
|
||||
const FRAGMENT_SHADER_UTILITIES = `
|
||||
highp float noise1(highp vec2 co){
|
||||
return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
|
||||
}
|
||||
|
||||
// Color spaces from https://github.com/tobspr/GLSL-Color-Spaces/blob/master/ColorSpaces.inc.glsl
|
||||
|
||||
const highp float HCV_EPSILON = 1e-10;
|
||||
const highp float HSL_EPSILON = 1e-10;
|
||||
|
||||
highp vec3 hue_to_rgb(highp float hue)
|
||||
{
|
||||
highp float R = abs(hue * 6.0 - 3.0) - 1.0;
|
||||
highp float G = 2.0 - abs(hue * 6.0 - 2.0);
|
||||
highp float B = 2.0 - abs(hue * 6.0 - 4.0);
|
||||
return clamp(vec3(R,G,B), vec3(0), vec3(1));
|
||||
}
|
||||
|
||||
// Converts from HSL to linear RGB
|
||||
highp vec3 hsl_to_rgb(highp vec3 hsl)
|
||||
{
|
||||
highp vec3 rgb = hue_to_rgb(hsl.x);
|
||||
highp float C = (1.0 - abs(2.0 * hsl.z - 1.0)) * hsl.y;
|
||||
return (rgb - 0.5) * C + hsl.z;
|
||||
}
|
||||
|
||||
// Converts a value from linear RGB to HCV (Hue, Chroma, Value)
|
||||
highp vec3 rgb_to_hcv(highp vec3 rgb)
|
||||
{
|
||||
// Based on work by Sam Hocevar and Emil Persson
|
||||
highp vec4 P = (rgb.g < rgb.b) ? vec4(rgb.bg, -1.0, 2.0/3.0) : vec4(rgb.gb, 0.0, -1.0/3.0);
|
||||
highp vec4 Q = (rgb.r < P.x) ? vec4(P.xyw, rgb.r) : vec4(rgb.r, P.yzx);
|
||||
highp float C = Q.x - min(Q.w, Q.y);
|
||||
highp float H = abs((Q.w - Q.y) / (6.0 * C + HCV_EPSILON) + Q.z);
|
||||
return vec3(H, C, Q.x);
|
||||
}
|
||||
|
||||
// Converts from linear rgb to HSL
|
||||
highp vec3 rgb_to_hsl(highp vec3 rgb)
|
||||
{
|
||||
highp vec3 HCV = rgb_to_hcv(rgb);
|
||||
highp float L = HCV.z - HCV.y * 0.5;
|
||||
highp float S = HCV.y / (1.0 - abs(L * 2.0 - 1.0) + HSL_EPSILON);
|
||||
return vec3(HCV.x, S, L);
|
||||
}
|
||||
|
||||
highp vec4 hue_rotate(highp vec4 rgb_input, highp float amount) {
|
||||
highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
|
||||
hsl.x = mod(hsl.x+amount,1.0);
|
||||
return vec4(hsl_to_rgb(hsl), rgb_input.w);
|
||||
}
|
||||
|
||||
highp vec4 grayscale(highp vec4 rgb_input, highp float amount) {
|
||||
highp vec3 hsl = rgb_to_hsl(rgb_input.xyz);
|
||||
hsl.y = 1.0 - amount;
|
||||
return vec4(hsl_to_rgb(hsl), rgb_input.w);
|
||||
}
|
||||
`
|
||||
|
||||
const FRAGMENT_SHADER_UTILITIES_N_LINES = FRAGMENT_SHADER_UTILITIES.split(/\n/g).length
|
||||
|
||||
const DEFAULT_FRAGMENT_SHADER = `
|
||||
// Some random values computed for each frame
|
||||
uniform highp vec4 uRandom;
|
||||
// Size (in logical pixel) of current CuteTexture canvas
|
||||
uniform lowp 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;
|
||||
// Size (in pixels) of current video frame in uVideo
|
||||
uniform lowp vec2 uVideoSize;
|
||||
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
|
||||
varying highp vec2 vTextureCoord;
|
||||
|
||||
void main() {
|
||||
gl_FragColor = vec4(vTextureCoord.x, vTextureCoord.y, 0.0, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
/**
|
||||
* Initialise un canvas d'arrière plan "CuteTexture" avec les options données
|
||||
*/
|
||||
export function initCuteTexture(options){
|
||||
let shaderSourceOption = options?.shaderSource;
|
||||
|
||||
/** @type {HTMLCanvasElement} */
|
||||
const targetCanvas = document.querySelector("canvas[data-cute-texture]") || document.querySelector("canvas.cute-texture") || document.querySelector("canvas");
|
||||
if(!targetCanvas)
|
||||
throw new Error(`Aucun élément <canvas> trouvé sur la page`)
|
||||
|
||||
{
|
||||
let computedStyle = getComputedStyle(targetCanvas)
|
||||
let elementWidth = parseFloat(computedStyle.width)
|
||||
let elementHeight = parseFloat(computedStyle.height)
|
||||
targetCanvas.width = elementWidth
|
||||
targetCanvas.height = elementHeight
|
||||
}
|
||||
|
||||
const ctx = targetCanvas.getContext("webgl");
|
||||
if(ctx == null)
|
||||
throw new Error("WebGL n'ext pas supporté sur votre machine")
|
||||
|
||||
let mainShader = initMainShader(ctx, {
|
||||
shaderSource: shaderSourceOption
|
||||
})
|
||||
//console.log("Shader CuteTexture initialisé", mainShader)
|
||||
|
||||
const initTime = Date.now()
|
||||
|
||||
function startRender(){
|
||||
renderCuteTexture(targetCanvas, mainShader, initTime)
|
||||
requestAnimationFrame(startRender)
|
||||
}
|
||||
|
||||
startRender()
|
||||
|
||||
return {
|
||||
target: targetCanvas,
|
||||
initTime,
|
||||
resize: function(width, height) {
|
||||
targetCanvas.width = width
|
||||
targetCanvas.height = height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {WebGLRenderingContext} ctx
|
||||
*/
|
||||
function initMainShader(ctx, options){
|
||||
let fragmentShaderCode = options?.shaderSource;
|
||||
|
||||
const vertexShader = ctx.createShader(ctx.VERTEX_SHADER)
|
||||
ctx.shaderSource(vertexShader, DEFAULT_VERTEX_SHADER)
|
||||
ctx.compileShader(vertexShader)
|
||||
|
||||
if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
|
||||
throw new Error(`Le vertex shader n'a pas pu être compilé: ${ctx.getShaderInfoLog(vertexShader)}`)
|
||||
ctx.deleteShader(vertexShader)
|
||||
return null
|
||||
}
|
||||
|
||||
if(!fragmentShaderCode){
|
||||
fragmentShaderCode = getDocumentShaderSource(document);
|
||||
}
|
||||
|
||||
if(!fragmentShaderCode){
|
||||
fragmentShaderCode = DEFAULT_FRAGMENT_SHADER
|
||||
}
|
||||
|
||||
const fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER)
|
||||
ctx.shaderSource(fragmentShader, FRAGMENT_SHADER_UTILITIES+fragmentShaderCode)
|
||||
ctx.compileShader(fragmentShader)
|
||||
|
||||
if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) {
|
||||
let error = ctx.getShaderInfoLog(fragmentShader)
|
||||
|
||||
let errorLine = error.match(/\d+:(\d+):/)
|
||||
if(errorLine) {
|
||||
let lineNum = parseInt(errorLine[1])
|
||||
let lineNumeWithoutUtils = lineNum-FRAGMENT_SHADER_UTILITIES_N_LINES;
|
||||
if(lineNumeWithoutUtils >= 0){
|
||||
error = `Ligne ${lineNumeWithoutUtils}: ${error}`
|
||||
}
|
||||
}
|
||||
|
||||
ctx.deleteShader(fragmentShader)
|
||||
throw new Error(`Le fragment shader n'a pas pu être compilé: ${error}`)
|
||||
}
|
||||
|
||||
const shaderProgram = ctx.createProgram()
|
||||
ctx.attachShader(shaderProgram, vertexShader)
|
||||
ctx.attachShader(shaderProgram, fragmentShader)
|
||||
ctx.linkProgram(shaderProgram)
|
||||
|
||||
if (!ctx.getProgramParameter(shaderProgram, ctx.LINK_STATUS)) {
|
||||
throw new Error(`Le shader n'a pas pu être linké: ${ctx.getProgramInfoLog(shaderProgram)}`)
|
||||
ctx.deleteShader(vertexShader)
|
||||
ctx.deleteShader(fragmentShader)
|
||||
ctx.deleteProgram(shaderProgram)
|
||||
return null
|
||||
}
|
||||
|
||||
let videoElement, videoTexture = null;
|
||||
if(ctx.getUniformLocation(shaderProgram, "uVideo") != null){
|
||||
videoElement = document.querySelector("video[data-cute-texture-video]") || document.querySelector("video");
|
||||
if(!videoElement){
|
||||
console.warn("Aucune vidéo avec l'attribut [data-cute-texture-video] n'a été trouvé sur la page");
|
||||
} else {
|
||||
videoTexture = ctx.createTexture();
|
||||
ctx.bindTexture(ctx.TEXTURE_2D, videoTexture)
|
||||
ctx.texImage2D(
|
||||
ctx.TEXTURE_2D,
|
||||
0,
|
||||
ctx.RGBA,
|
||||
1, 1,
|
||||
0,
|
||||
ctx.RGBA,
|
||||
ctx.UNSIGNED_BYTE,
|
||||
new Uint8Array([0, 0, 0, 255])
|
||||
)
|
||||
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
|
||||
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
|
||||
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
|
||||
}
|
||||
}
|
||||
|
||||
const vertexIndexBuffer = ctx.createBuffer()
|
||||
ctx.bindBuffer(ctx.ARRAY_BUFFER, vertexIndexBuffer)
|
||||
ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array([0, 1, 2]), ctx.STATIC_DRAW)
|
||||
|
||||
return {
|
||||
program: shaderProgram,
|
||||
vertexShader,
|
||||
fragmentShader,
|
||||
videoElement,
|
||||
videoTexture,
|
||||
aVertexIndex: ctx.getAttribLocation(shaderProgram, "aVertexIndex"),
|
||||
uRandom: ctx.getUniformLocation(shaderProgram, "uRandom"),
|
||||
uCanvasSize: ctx.getUniformLocation(shaderProgram, "uCanvasSize"),
|
||||
uTime: ctx.getUniformLocation(shaderProgram, "uTime"),
|
||||
uVideo: ctx.getUniformLocation(shaderProgram, "uVideo"),
|
||||
uVideoSize: ctx.getUniformLocation(shaderProgram, "uVideoSize"),
|
||||
vertexIndexBuffer,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLCanvasElement} target
|
||||
* @param {*} mainShader
|
||||
*/
|
||||
function renderCuteTexture(target, mainShader, initTime){
|
||||
let ctx = target.getContext("webgl")
|
||||
|
||||
ctx.clearColor(0, 0, 0, 0)
|
||||
ctx.clearDepth(1.0)
|
||||
ctx.enable(ctx.DEPTH_TEST)
|
||||
ctx.depthFunc(ctx.LEQUAL)
|
||||
|
||||
ctx.clear(ctx.COLOR_BUFFER_BIT)
|
||||
|
||||
ctx.bindBuffer(ctx.ARRAY_BUFFER, mainShader.vertexIndexBuffer)
|
||||
ctx.vertexAttribPointer(
|
||||
mainShader.aVertexIndex, // location
|
||||
1, // pull out 1 value per iteration
|
||||
ctx.FLOAT, // the data in the buffer is 32bit floats
|
||||
false, // don't normalize
|
||||
0, // how many bytes to get from one set of values to the next
|
||||
0 // how many bytes inside the buffer to start from
|
||||
)
|
||||
ctx.enableVertexAttribArray(mainShader.aVertexIndex)
|
||||
|
||||
ctx.useProgram(mainShader.program)
|
||||
if(mainShader.uRandom){
|
||||
ctx.uniform4f(
|
||||
mainShader.uRandom,
|
||||
Math.random(),
|
||||
Math.random(),
|
||||
Math.random(),
|
||||
Math.random()
|
||||
)
|
||||
}
|
||||
|
||||
if(mainShader.uCanvasSize){
|
||||
ctx.uniform2f(
|
||||
mainShader.uCanvasSize,
|
||||
target.width,
|
||||
target.height
|
||||
)
|
||||
}
|
||||
|
||||
if(mainShader.uTime){
|
||||
ctx.uniform1f(
|
||||
mainShader.uTime,
|
||||
(Date.now() - initTime)/1000
|
||||
)
|
||||
}
|
||||
|
||||
if(mainShader.uVideo){
|
||||
ctx.activeTexture(ctx.TEXTURE0);
|
||||
ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
|
||||
ctx.uniform1i(
|
||||
mainShader.uVideo,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
if(mainShader.uVideo && mainShader.videoElement && mainShader.videoTexture){
|
||||
ctx.activeTexture(ctx.TEXTURE0);
|
||||
ctx.bindTexture(ctx.TEXTURE_2D, mainShader.videoTexture);
|
||||
ctx.texImage2D(
|
||||
ctx.TEXTURE_2D,
|
||||
0,
|
||||
ctx.RGBA,
|
||||
ctx.RGBA,
|
||||
ctx.UNSIGNED_BYTE,
|
||||
mainShader.videoElement,
|
||||
);
|
||||
ctx.uniform1i(
|
||||
mainShader.uVideo,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
if(mainShader.uVideoSize && mainShader.videoElement) {
|
||||
ctx.uniform2f(
|
||||
mainShader.uVideoSize,
|
||||
mainShader.videoElement.videoWidth,
|
||||
mainShader.videoElement.videoHeight
|
||||
)
|
||||
}
|
||||
|
||||
ctx.drawArrays(ctx.TRIANGLE_STRIP, 0, 3);
|
||||
}
|
||||
|
||||
export function getDocumentShaderSource(doc=document){
|
||||
return doc.querySelector(`script[type="x-shader/glsl+fragment"]`)?.innerHTML
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
export async function loadEvents(){
|
||||
const eventList = document.querySelectorAll('#eventSection > article');
|
||||
//console.log("event list: ", eventList);
|
||||
|
||||
for (const event of eventList){
|
||||
const title = event.querySelector('h4');
|
||||
const date = event.querySelector('p.date');
|
||||
const posterLink = event.querySelector('a.iconBtnStyle').href;
|
||||
const posterHTML = await getPoster(posterLink);
|
||||
|
||||
const poster = posterHTML.querySelector('body > article');
|
||||
|
||||
const posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')
|
||||
|
||||
//console.log('entry data :', title, date, poster, posterStyle);
|
||||
|
||||
const selectedEntry = createEntry(title, date, poster, posterStyle)
|
||||
|
||||
//console.log('created new details :', selectedEntry);
|
||||
|
||||
event.replaceChildren(selectedEntry);
|
||||
}
|
||||
}
|
||||
|
||||
async function getPoster(link){
|
||||
const res = await fetch(link);
|
||||
if (res.ok){
|
||||
const html_text = await res.text()
|
||||
const html = new DOMParser().parseFromString(html_text, "text/html");
|
||||
return html
|
||||
} else{
|
||||
console.log('error 333: something went wrong with this poster...');
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function createEntry(title, date, html, style){
|
||||
const newEntry = document.createElement('details');
|
||||
const newSummary = document.createElement('summary');
|
||||
newSummary.append(title, date);
|
||||
|
||||
newEntry.append(newSummary);
|
||||
|
||||
newEntry.append(html);
|
||||
|
||||
newEntry.name = "eventList"
|
||||
|
||||
for(const el of style){
|
||||
document.head.append(el);
|
||||
}
|
||||
|
||||
return newEntry
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
export function makeItFloat(target){
|
||||
const startTarget = target.querySelector('.title');
|
||||
|
||||
//console.log('selected target :', startTarget);
|
||||
|
||||
let startX, startY;
|
||||
let clicked = false;
|
||||
let selectedPointer;
|
||||
|
||||
startTarget.addEventListener('pointerdown', (event) => {
|
||||
selectedPointer = event.pointerId;
|
||||
startX = event.pageX;
|
||||
startY = event.pageY;
|
||||
//console.log('clicking...')
|
||||
})
|
||||
|
||||
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;
|
||||
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('pointerup', () => {
|
||||
//console.log('STOP !')
|
||||
selectedPointer = null;
|
||||
document.querySelector('html').style.overflow = '';
|
||||
})
|
||||
|
||||
document.addEventListener('pointercancel', () => {
|
||||
//console.log('STOP !')
|
||||
selectedPointer = null;
|
||||
document.querySelector('html').style.overflow = '';
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { loadEvents } from '/js/events.js'
|
||||
import { loadStatus } from '/js/status.js'
|
||||
import { initCuteTexture } from '/js/cuteTexture.js'
|
||||
import { makeItFloat } from '/js/floating.js';
|
||||
|
||||
// ======================================== events & statut d'ouverture
|
||||
loadEvents();
|
||||
loadStatus()
|
||||
.then((status) => {
|
||||
console.log("is LOL open ???", status.open);
|
||||
|
||||
let cuteTexture = initCuteTexture({
|
||||
shaderSource: status.shaderSource
|
||||
});
|
||||
|
||||
cuteTexture.target.style.visibility = "visible"
|
||||
});
|
||||
|
||||
// ======================================== floating message window
|
||||
|
||||
makeItFloat(document.querySelector('#msgWindow'));
|
||||
@@ -1,43 +1,42 @@
|
||||
/**
|
||||
* Fetch status content and insert main content into provided container
|
||||
* @param {Element} containerEl Container to insert status into
|
||||
*/
|
||||
async function insertStatus(containerEl){
|
||||
import { getDocumentShaderSource } from './cuteTexture.js';
|
||||
|
||||
const baseUrl = containerEl.href;
|
||||
const res = await fetch(baseUrl, {cache:"no-cache"});
|
||||
|
||||
if(!res.ok){
|
||||
console.info(`Network error requesting status : ${res.status} ${res.statusText}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const dom = new DOMParser().parseFromString(await res.text(), "text/html");
|
||||
export async function loadStatus(){
|
||||
const uri = new URL('/status', document.baseURI);
|
||||
|
||||
|
||||
let base = dom.createElement("base");
|
||||
base.href = containerEl.href;
|
||||
dom.head.append(base);
|
||||
const html = await (await fetch(uri, {cache: 'no-store'})).text();
|
||||
|
||||
const main = dom.querySelector("main");
|
||||
const remoteDoc = new DOMParser().parseFromString(html, "text/html");
|
||||
|
||||
if(!main)
|
||||
throw new Error("Status page does not contain a <main> element");
|
||||
const base = remoteDoc.createElement('base');
|
||||
base.href = uri.toString();
|
||||
remoteDoc.head.prepend(base);
|
||||
|
||||
for(let it of main.querySelectorAll("[href],[src]")){
|
||||
if(it.hasAttribute("href")){
|
||||
it.href = it.href
|
||||
} else {
|
||||
it.src = it.src
|
||||
}
|
||||
}
|
||||
//console.log('selected file:', remoteDoc);
|
||||
|
||||
containerEl.innerHTML = "";
|
||||
for(let node of main.childNodes){
|
||||
containerEl.append(document.importNode(node, true));
|
||||
}
|
||||
containerEl.className = main.className;
|
||||
containerEl.setAttribute("style", main.getAttribute("style"))
|
||||
let shaderSource = getDocumentShaderSource(remoteDoc);
|
||||
|
||||
let target = document.querySelector('#statuSection');
|
||||
|
||||
let hiddenBtn = target.querySelector('a');
|
||||
|
||||
hiddenBtn.style.visibility = 'collapse';
|
||||
|
||||
let status = remoteDoc.querySelector('#lolStatus');
|
||||
//console.log('current status:', status);
|
||||
|
||||
let isOpen = status.innerText.includes('ouvert');
|
||||
|
||||
let icon = remoteDoc.querySelector('link[rel="icon"]');
|
||||
let style = remoteDoc.querySelector('link[data-import="status-style"]');
|
||||
let styleFile = style.href.split('/').at(-1);
|
||||
style.href = uri + '/' + styleFile;
|
||||
|
mirsal
commented
```js
const newStyle = document.createElement('style');
newStyle.href = new URL(style.getAttribute("href"), uri).href;
newStyle.rel = "stylesheet";
if (style.media) newStyle.media = style.media;
if (style.crossOrigin) newStyle.crossOrigin = style.crossOrigin;
document.head.append(newStyle);
|
||||
//console.log("selected style: ", style.href);
|
||||
|
||||
document.head.append(icon);
|
||||
document.head.append(style);
|
||||
|
||||
target.appendChild(status);
|
||||
|
||||
return { open: isOpen, shaderSource };
|
||||
}
|
||||
|
||||
insertStatus(document.getElementById("status"))
|
||||
@@ -1,76 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="fr" vocab="http://schema.org/">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="/images/favicon.svg" type="image/svg+xml">
|
||||
<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
|
||||
<link rel="me" href="https://nerdculture.de/@labolyon" />
|
||||
<title>Présentation - Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
|
||||
|
||||
<style>
|
||||
.fullscreen-background {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
</head>
|
||||
|
||||
<body typeof="Organization Place" resource="https://labolyon.fr/">
|
||||
|
||||
<div class="fullscreen-background" aria-hidden="true">
|
||||
<video muted loop poster="images/world_network.jpg" id="background-video">
|
||||
<source src="videos/background.webm" type="video/webm" />
|
||||
<source src="videos/background.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="/images/world_network.muted.jpg" id="background-poster"/>
|
||||
</div>
|
||||
|
||||
<header id="main-header">
|
||||
<img property="logo" class="logo" src="images/logo_picto.svg" alt="Logo du laboratoire ouvert lyonnais : un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." />
|
||||
|
||||
<h1 property="name">Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
|
||||
|
||||
<nav id="main-nav">
|
||||
<link property="url" href="https://labolyon.fr/">
|
||||
<a property="url" href="https://git.labolyon.fr/explore/repos">Dépots Git</a>
|
||||
<a property="url" href="https://wiki.labolyon.fr/">Wiki</a>
|
||||
<a property="url" href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
|
||||
<a property="url" href="https://nerdculture.de/@labolyon">Fédiverse</a>
|
||||
<a property="url" href="https://matrix.to/#/#general:chat.labolyon.fr">Salon Matrix</a>
|
||||
<a property="url" href="/presentation.html">Présentation</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="homepage">
|
||||
|
||||
<section id="description">
|
||||
|
||||
<div property="abstract">
|
||||
|
||||
<p>Le Laboratoire Ouvert Lyonnais (L.O.L) est une association de loi 1901 destinéee à être un lieu d'échanges et d'expérimentations pour toute personne passionnée de technologie et/ou d'informatique.
|
||||
Nous sommes centrés sur la réutilisation, le recyclage et le bidouillage de matériels dans le but de comprendre leur fonctionnement et de les utiliser dans un but bienveillant et éducatif.</p>
|
||||
|
||||
<p>Nous aimons expérimenter et trouver de nouveaux usages à des objets. Nous sommes une communauté tournée vers le partage et l'apprentissage et nous hébergeons également nos propres services, par nos propres moyens.
|
||||
Nous recyclons également du matériel informatique, afin d'aider les personnes à obtenir des ressources pour appendre et de continuer à fournir nos services de manière bénévole. Toute personne peut emprunter ou récupérer du matériel, quelle que soit sa situation.</p>
|
||||
|
||||
<p>Nous sommes installé dans un local au 7 place Louis Chazette 69001 Lyon. Nous travaillons en collaboration avec l'assocation LALIS, dont nous aidons à héberger le site web et divers services internes.</p>
|
||||
|
||||
<p>Numéro RNA : W691079861</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="toolbar">
|
||||
<button id="play-background" hidden>
|
||||
<img src="/images/play.svg" alt="Play" class="play" title="Play" />
|
||||
<img src="/images/pause.svg" alt="Pause" class="pause" hidden title="Pause" />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="js/background.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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/",
|
||||
@@ -14,7 +17,7 @@
|
||||
"irc": "ircs://irc.geeknode.org:6697/labolyon",
|
||||
"ml": "discussions@listes.labolyon.fr",
|
||||
"mastodon": "@labolyon@nerdculture.de",
|
||||
"matrix": "#general:chat.labolyon.fr"
|
||||
"matrix": "#lol-space:chat.labolyon.fr"
|
||||
},
|
||||
"state": {
|
||||
"icon": {
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
|
||||
</head>
|
||||
|
||||
<body class="status-page">
|
||||
|
||||
<header id="main-header">
|
||||
<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
|
||||
</header>
|
||||
|
||||
<main id="content" class="status-container closed no-icon" style="color: crimson">
|
||||
<p>Le Laboratoire Ouvert Lyonnais<br/>n’ouvrira pas le 24 et le 31 décembre</p>
|
||||
|
||||
<p>De retour en 2025</p>
|
||||
</main>
|
||||
|
||||
<nav>
|
||||
<a href="..">🠔 Retour au site</a>
|
||||
</nav>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
:root {
|
||||
--back-color: #FFFF4D;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
/*======================= Page Statut LOL fermé ===*/
|
||||
#lolIsClosed {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--main-color);
|
||||
|
||||
#closedContainer {
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cute-texture {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
#closedContainer{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-radius: 33px;
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
section{
|
||||
width: 333px;
|
||||
height: 117px;
|
||||
background-color: var(--back-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 33px;
|
||||
|
||||
margin-top: -77px;
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
font-size: 22px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
h3{
|
||||
width: 277px;
|
||||
height: 50px;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 33px;
|
||||
font-family: 'karrik';
|
||||
font-weight: normal;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: 7.77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,33 +1,60 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="icon" type="image/svg" href="../assets/favicon.svg" />
|
||||
<link rel="stylesheet" data-import="status-style" href="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 Fermé ...</title>
|
||||
</head>
|
||||
<body id="lolIsClosed">
|
||||
<canvas data-cute-texture class="cute-texture"></canvas>
|
||||
<main id="closedContainer">
|
||||
<section>
|
||||
<p>Le LOL est actuellement</p>
|
||||
<h3 id="lolStatus">fermé ...</h3>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<body class="status-page">
|
||||
<script type="x-shader/glsl+fragment">
|
||||
// Some random values computed for each frame
|
||||
uniform highp vec4 uRandom;
|
||||
// Size (in logical pixel) of current CuteTexture canvas
|
||||
uniform highp vec2 uCanvasSize;
|
||||
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
|
||||
varying highp vec2 vTextureCoord;
|
||||
|
||||
<header id="main-header">
|
||||
<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
|
||||
</header>
|
||||
void main() {
|
||||
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;
|
||||
|
||||
<main id="content" class="status-container closed">
|
||||
<p>Le local du LOL est actuellement <strong>Fermé</strong></p>
|
||||
highp vec4 baseColor = vec4(
|
||||
0.0,
|
||||
lum,
|
||||
lum,
|
||||
1.0
|
||||
);
|
||||
|
||||
<img class="status-icon" src="/status/status.fermé.png" alt="Cercle rouge indiquant que le local est fermé"
|
||||
title="Le local est fermé" />
|
||||
highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
|
||||
|
||||
<p>Venez pendant les horaires de permanence ou envoyez nous un petit message ;)</p>
|
||||
</main>
|
||||
|
||||
<nav>
|
||||
<a href="..">🠔 Retour au site</a>
|
||||
</nav>
|
||||
gl_FragColor = vec4(
|
||||
rotatedColor.x*opacity,
|
||||
rotatedColor.y*opacity,
|
||||
rotatedColor.z*opacity,
|
||||
1.0
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import {initCuteTexture} from "../js/cuteTexture.js"
|
||||
initCuteTexture()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
index.fermé.html
|
||||
|
mirsal
commented
Suppression accidentelle du lien symbolique? Suppression accidentelle du lien symbolique?
|
||||
@@ -1,31 +1,71 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ouverture du local • Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="stylesheet" href="/css/normalize.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
|
||||
<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" />
|
||||
|
mirsal marked this conversation as resolved
Outdated
mirsal
commented
href relatif à remplacer par un lien absolu ou ajouter href relatif à remplacer par un lien absolu ou ajouter `../`, par ex: `href="/status/closedStyle.css"` ou `href="../status/closedStyle.css"`
|
||||
<link rel="stylesheet" data-import="status-style" href="openStyle.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>
|
||||
</head>
|
||||
<body id="lolIsOpen">
|
||||
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
|
||||
<canvas data-cute-texture class="cute-texture"></canvas>
|
||||
<main id="openContainer">
|
||||
<section>
|
||||
<p>Le LOL est actuellement</p>
|
||||
<h3 id="lolStatus">ouvert !</h3>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<body class="status-page">
|
||||
<script type="x-shader/glsl+fragment">
|
||||
// Some random values computed for each frame
|
||||
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;
|
||||
|
||||
<header id="main-header">
|
||||
<img class="logo" src="/images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
|
||||
</header>
|
||||
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;
|
||||
|
||||
<main id="content" class="status-container opened">
|
||||
<p>Le local du LOL est actuellement <strong>Ouvert</strong> !</p>
|
||||
gl_FragColor = vec4(
|
||||
0.0,
|
||||
lum,
|
||||
0.0,
|
||||
1.0
|
||||
);
|
||||
|
||||
<img class="status-icon" src="/status/status.ouvert.png" alt="Cercle vert indiquant que le local est ouvert"
|
||||
title="Le local est ouvert" />
|
||||
</main>
|
||||
gl_FragColor = vec4(
|
||||
gl_FragColor.rgb * opacity,
|
||||
1.0
|
||||
);
|
||||
|
||||
<nav>
|
||||
<a href="..">🠔 Retour au site</a>
|
||||
</nav>
|
||||
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>
|
||||
|
||||
<script type="module">
|
||||
import {initCuteTexture} from "../js/cuteTexture.js"
|
||||
initCuteTexture()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--back-color: #00FF44;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
.closedBackground{
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.openBackground{
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: -20
|
||||
}
|
||||
|
||||
.openBackground#texture{
|
||||
z-index: -30;
|
||||
}
|
||||
|
||||
.openBackground#background{
|
||||
mix-blend-mode: difference;
|
||||
filter: brightness(133%) saturate(33%) grayscale();
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
margin-top: -9%;
|
||||
height: 120%;
|
||||
opacity: .777;
|
||||
}
|
||||
|
||||
/*======================= Page Statut LOL ouvert ===*/
|
||||
|
||||
#lolIsOpen {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--main-color);
|
||||
|
||||
#openContainer {
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cute-texture, .cute-texture-video {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
#openContainer{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-radius: 33px;
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
section{
|
||||
width: 333px;
|
||||
height: 117px;
|
||||
background-color: var(--back-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 33px;
|
||||
|
||||
margin-top: -77px;
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
font-size: 22px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
h3{
|
||||
width: 277px;
|
||||
height: 50px;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 33px;
|
||||
font-family: 'karrik';
|
||||
font-weight: normal;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: 7.77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#lolStatus{
|
||||
animation: blink 3.33s infinite;
|
||||
}
|
||||
@@ -8,16 +8,17 @@ 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" "/var/www/html/status/index.html"
|
||||
ln -sf "index.ouvert.html" "$(dirname $0)/index.html"
|
||||
jq "setpath([\"state\", \"open\"]; true) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
|
||||
mv -f $SPACE_JSON.new $SPACE_JSON
|
||||
mv -f $SPACE_JSON.new $SPACE_JSON
|
||||
fi
|
||||
|
||||
if [ "$1" = "closed" ]; then
|
||||
ln -sf "index.fermé.html" "/var/www/html/status/index.html"
|
||||
ln -sf "index.fermé.html" "$(dirname $0)/index.html"
|
||||
jq "setpath([\"state\", \"open\"]; false) | setpath([\"state\", \"lastchange\"]; $(date +%s))" < $SPACE_JSON > $SPACE_JSON.new &&
|
||||
mv -f $SPACE_JSON.new $SPACE_JSON
|
||||
mv -f $SPACE_JSON.new $SPACE_JSON
|
||||
fi
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
@keyframes blink {
|
||||
0% { color: var(--main-color);}
|
||||
15% { color: var(--back-color);}
|
||||
35% { color: var(--back-color);}
|
||||
50% { color: var(--main-color);}
|
||||
65% { color: var(--back-color);}
|
||||
85% { color: var(--back-color);}
|
||||
100% { color: var(--main-color);}
|
||||
}
|
||||
|
||||
@keyframes blinkBack {
|
||||
0% { background-color: var(--back-color);}
|
||||
15% { background-color: var(--main-color);}
|
||||
35% { background-color: var(--main-color);}
|
||||
50% { background-color: var(--back-color);}
|
||||
65% { background-color: var(--main-color);}
|
||||
85% { background-color: var(--main-color);}
|
||||
100% { background-color: var(--back-color);}
|
||||
}
|
||||
|
||||
@keyframes blinkBorder {
|
||||
0% { border-color: var(--main-color);}
|
||||
15% { border-color: var(--accent-color);}
|
||||
35% { border-color: var(--accent-color);}
|
||||
50% { border-color: var(--main-color);}
|
||||
65% { border-color: var(--accent-color);}
|
||||
85% { border-color: var(--accent-color);}
|
||||
100% { border-color: var(--main-color);}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
35% { transform: translateY(1px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
65% { transform: translateY(1px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
.textBtnStyle{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
border-radius: 16.1px;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
padding: 3.33px;
|
||||
padding-left: 7.77px;
|
||||
|
||||
|
||||
font-family: 'karrik';
|
||||
font-size: 16.1px;
|
||||
text-transform: uppercase;
|
||||
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
background-color: var(--back-color);
|
||||
}
|
||||
|
||||
.textBtnStyle:hover{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
.iconBtnStyle{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
|
||||
border-radius: 16.1px;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
background-color: var(--back-color);
|
||||
}
|
||||
.icon{
|
||||
height: 16.1px;
|
||||
width: auto;
|
||||
fill: currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.iconBtnStyle:hover{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-color: var(--back-color);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@media(min-width: 1300px){
|
||||
.textBtnStyle{
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.iconBtnStyle{
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.solidBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
padding: 7.77px;
|
||||
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
background-color: var(--back-color);
|
||||
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size: 16.1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.transparentBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
padding: 7.77px;
|
||||
|
||||
color: var(--back-color);
|
||||
background-color: transparent;
|
||||
|
||||
font-family: 'karrik';
|
||||
text-transform: uppercase;
|
||||
font-size: 16.1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.borderBox{
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: medium;
|
||||
padding: 7.77px;
|
||||
padding-right: 13.12px;
|
||||
|
||||
border-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
background-color: transparent;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.floatingWindow{
|
||||
position: relative;
|
||||
z-index: 3333;
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
background-color: var(--back-color);
|
||||
border-color: var(--main-color);
|
||||
border-radius: 16.1px;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.title{
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
|
||||
text-transform: none;
|
||||
font-size: 15px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
padding-left: 16.1px;
|
||||
padding-right: 7.77px;
|
||||
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
|
||||
h4{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.iconBtnStyle{
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
pointer-events: all;
|
||||
|
||||
.icon{
|
||||
height: 13.12px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
input {
|
||||
-webkit-appearance: none !important;
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: alias;
|
||||
}
|
||||
|
||||
button{
|
||||
cursor: cell;
|
||||
}
|
||||
|
||||
a p{
|
||||
cursor:inherit;
|
||||
}
|
||||
|
||||
a button{
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
p,h1,h2,h3,h4{
|
||||
cursor: inherit;
|
||||
pointer-events: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
dialog{
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,663 @@
|
||||
/*================ GAMME COLOR ======================*/
|
||||
:root{
|
||||
--back-color: #FFFF4D;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
/*================ BODY ======================*/
|
||||
html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scrollbar-color: var(--back-color) var(--main-color);
|
||||
background-color: var(--main-color);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*================ STRUCTURE ======================*/
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
height: 93px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top:0;
|
||||
z-index: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 0 0 1.61px 0;
|
||||
|
||||
border-color: var(--main-color);
|
||||
background-color: var(--back-color);
|
||||
|
||||
h1{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 13.12px;
|
||||
padding-left: 13.12px;
|
||||
margin-bottom: 13.12px;
|
||||
img{
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cool-name{
|
||||
font-family: 'pressStart';
|
||||
font-size: 50px;
|
||||
padding-top: 13.12px;
|
||||
|
||||
|
||||
.trans-symbol{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.plain-name{
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav > ul{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-right: 7.77px;
|
||||
margin-top: 13.12px;
|
||||
|
||||
.textBtnStyle{
|
||||
border-radius: 0;
|
||||
width: 117px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
noscript > video{
|
||||
height: 110%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -32;
|
||||
}
|
||||
|
||||
.cute-texture-video{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -33;
|
||||
}
|
||||
|
||||
.cute-texture{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -33;
|
||||
}
|
||||
|
||||
.openBackground{
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
|
||||
main{
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
overflow: hidden;
|
||||
|
||||
#homeContent{
|
||||
height: 66vh;
|
||||
width: 100%;
|
||||
position:relative;
|
||||
z-index: 0;
|
||||
display: grid;
|
||||
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: 27px;
|
||||
|
||||
address {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
aside{
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
color: var(--main-color);
|
||||
position: relative;
|
||||
|
||||
z-index: 33;
|
||||
|
||||
margin-bottom: 13.12px;
|
||||
margin-right: 13.12px;
|
||||
|
||||
#openMsg{
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
animation: float 1.61s infinite;
|
||||
box-sizing: border-box;
|
||||
|
||||
border-radius: 13.12px;
|
||||
}
|
||||
|
||||
#openMsg:hover{
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#msgWindow{
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
position: fixed;
|
||||
top: 117px;
|
||||
left: 33px;
|
||||
animation: none;
|
||||
z-index: 1312;
|
||||
margin: 0;
|
||||
|
||||
.floatingWindow{
|
||||
width: 277px;
|
||||
height: auto;
|
||||
margin-top: 33px;
|
||||
|
||||
text-transform: none;
|
||||
font-size: 15px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
padding-bottom: 13.12px;
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#msgWindow::backdrop{
|
||||
background-color: var(--back-color);
|
||||
opacity: .333;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#titleSection{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
h2{
|
||||
text-transform: uppercase;
|
||||
font-family: 'karrik';
|
||||
font-size: 22px;
|
||||
line-height: 1em;
|
||||
}
|
||||
small{
|
||||
text-transform: none;
|
||||
font-size: 15px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
line-height: 0.3em;
|
||||
padding-left: 7.77px;
|
||||
}
|
||||
}
|
||||
|
||||
#hourSection{
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
width: 100%;
|
||||
height: 77%;
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
padding: 0;
|
||||
|
||||
h3{
|
||||
width: 100%;
|
||||
margin-bottom: 16.1px;
|
||||
|
||||
font-family: 'karrik';
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
|
||||
padding: 3.33px;
|
||||
margin-bottom: 3.33px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
ol{
|
||||
padding-left: 3.33px;
|
||||
|
||||
font-family: 'karrik';
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
|
||||
strong{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
li{
|
||||
margin-top: 16.1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#planSection{
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2;
|
||||
color: var(--back-color);
|
||||
justify-self: end;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
#planContainer{
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
margin-left: 13.12px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img{
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
svg{
|
||||
fill: currentColor;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
top: 4.44px;
|
||||
left: -1.61px;
|
||||
}
|
||||
}
|
||||
|
||||
#extLinkSection{
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
width: 77%;
|
||||
height: 122%;
|
||||
justify-self: end;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 16.1px;
|
||||
margin-top: 7.77px;
|
||||
gap: 13.12px;
|
||||
|
||||
a{
|
||||
cursor: alias;
|
||||
img{
|
||||
width: auto;
|
||||
height: 55px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#adhesionSection{
|
||||
visibility: collapse;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.textBtnStyle{
|
||||
position: relative;
|
||||
z-index: 33;
|
||||
width: 90%;
|
||||
height: 33px;
|
||||
font-size: 13.12px;
|
||||
margin-top: 13.12px;
|
||||
}
|
||||
|
||||
#addUserWindow{
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
position: fixed;
|
||||
top: 77px;
|
||||
left: 16.1px;
|
||||
animation: none;
|
||||
z-index: 1312;
|
||||
margin: 0;
|
||||
|
||||
.floatingWindow{
|
||||
width: 333px;
|
||||
height: auto;
|
||||
margin-top: 33px;
|
||||
|
||||
text-transform: none;
|
||||
font-size: 15px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
padding-bottom: 13.12px;
|
||||
border-width: 3.33px;
|
||||
border-style: double solid solid;
|
||||
|
||||
p{
|
||||
padding: 7.77px;
|
||||
padding-right: 16.1px;
|
||||
|
||||
strong{
|
||||
font-family: 'karrik';
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#addUserWindow::backdrop{
|
||||
background-color: var(--back-color);
|
||||
opacity: .333;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#statuSection{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
height: 20vh;
|
||||
|
||||
.textBtnStyle{
|
||||
width: 66px;
|
||||
font-size: 11px;
|
||||
margin-right: 7.77px;
|
||||
}
|
||||
|
||||
#statusDesc{
|
||||
width: 77%;
|
||||
padding: 7.77px;
|
||||
padding-right: 33px;
|
||||
font-size: 16.1px;
|
||||
line-height: 1.1em;
|
||||
|
||||
small{
|
||||
font-size: 13.12px;
|
||||
line-height: 0.333em;
|
||||
}
|
||||
}
|
||||
|
||||
#lolStatus{
|
||||
position: relative;
|
||||
z-index: 33;
|
||||
width: 40%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
font-family: 'karrik';
|
||||
text-transform: uppercase;
|
||||
font-size: 22px;
|
||||
line-height: 1em;
|
||||
|
||||
padding-left: 16.1px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 22px 0 0 22px;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
|
||||
small{
|
||||
font-size: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#extraContent{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
font-size: 16.1px;
|
||||
line-height: 1.333em;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#eventSection{
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
padding-bottom: 16.1px;
|
||||
padding-right: 16.1px;
|
||||
|
||||
overflow-y: scroll;
|
||||
|
||||
h3{
|
||||
position: relative;
|
||||
margin-bottom: 7.77px;
|
||||
}
|
||||
|
||||
|
||||
article{
|
||||
h4{
|
||||
padding: 16.1px;
|
||||
}
|
||||
|
||||
h4:hover{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
a{
|
||||
margin-right: 33px;
|
||||
}
|
||||
|
||||
.date{
|
||||
padding: 16.1px;
|
||||
}
|
||||
}
|
||||
|
||||
.solidBox{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.solidBox:hover{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
.solidBox:has(details[open]){
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-color: var(--back-color);
|
||||
border-radius: 16.1px;
|
||||
margin-top: 7.77px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 7.77px;
|
||||
|
||||
details{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.iconBtnStyle{
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
|
||||
.icon{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
details{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: copy;
|
||||
overflow: hidden;
|
||||
|
||||
summary{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
list-style-type: none;
|
||||
padding: 16.1px;
|
||||
}
|
||||
|
||||
article{
|
||||
width: 100%;
|
||||
cursor: default;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#webRingSection{
|
||||
width: 100%;
|
||||
padding: 13.12px;
|
||||
padding-bottom: 16.1px;
|
||||
min-height: 44px;
|
||||
display: grid;
|
||||
background-color: var(--back-color);
|
||||
border-color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin 0 0 0;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 7.77px;
|
||||
|
||||
a{
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.needOutline{
|
||||
border-color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
noscript > video,
|
||||
.cute-texture,
|
||||
.cute-texture-video{
|
||||
visibility: collapse !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
main aside #openMsg{
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
/*===========================Moyen format : Tablette et petite fenêtres PC ===*/
|
||||
@media(min-width: 650px){
|
||||
header{
|
||||
height: 60px;
|
||||
|
||||
h1{
|
||||
margin-bottom: 5px;
|
||||
|
||||
img{
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
nav > ul{
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
margin-top: 16.1px;
|
||||
margin-right: 13.12px;
|
||||
min-width: 444px;
|
||||
box-sizing: border-box;
|
||||
|
||||
li{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
border-radius: 0;
|
||||
width: 93px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main{
|
||||
#homeContent{
|
||||
height: 77vh;
|
||||
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;
|
||||
margin-right: 33px;
|
||||
|
||||
#msgWindow{
|
||||
left: unset;
|
||||
right: 77px;
|
||||
top: 161px;
|
||||
}
|
||||
}
|
||||
|
||||
#titleSection{
|
||||
height: 110%;
|
||||
h2{
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#hourSection{
|
||||
grid-column: 1;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
address{
|
||||
padding-top: 16.1px;
|
||||
}
|
||||
|
||||
#planSection{
|
||||
grid-column: 2 / 4;
|
||||
#planContainer{
|
||||
width: 110%;
|
||||
height: auto;
|
||||
margin-left: -88px;
|
||||
margin-top: -50px;
|
||||
|
||||
@media(min-width: 800px){
|
||||
margin-top: -88px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#extLinkSection{
|
||||
justify-content: flex-start;
|
||||
padding-top: 33px;
|
||||
}
|
||||
|
||||
#adhesionSection{
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
margin-bottom: 33px;
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
}
|
||||
#statuSection{
|
||||
.textBtnStyle{
|
||||
font-size: 16.1px;
|
||||
width: 117px;
|
||||
margin-right: 33px;
|
||||
}
|
||||
|
||||
#statusDesc{
|
||||
font-size: 16.1px;
|
||||
padding-left: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
#extraContent{
|
||||
|
||||
|
||||
#aboutSection{
|
||||
|
||||
}
|
||||
|
||||
#eventSection{
|
||||
#eventContent{
|
||||
li{
|
||||
.iconBtnStyle{
|
||||
right: 3.33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#webRingSection{
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
min-height: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*===========================Grand format : écrans larges et grands ===*/
|
||||
@media(min-width: 1300px){
|
||||
header{
|
||||
nav > ul{
|
||||
|
||||
font-size: 27px;
|
||||
|
||||
li{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
padding-left: 16.1px;
|
||||
width: 133px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main{
|
||||
#homeContent{
|
||||
aside{
|
||||
margin-bottom: 77px;
|
||||
margin-right: 77px;
|
||||
|
||||
#msgWindow{
|
||||
left: unset;
|
||||
right: 33px;
|
||||
top: 33vh;
|
||||
}
|
||||
|
||||
#openMsg{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.icon{
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
dialog{
|
||||
|
||||
.title{
|
||||
font-size: 22px;
|
||||
height: 50px;
|
||||
|
||||
.iconBtnStyle{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#titleSection{
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#hourSection{
|
||||
height: 77%;
|
||||
width: 44%;
|
||||
|
||||
h3{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
ol{
|
||||
font-size: 16.1px;
|
||||
padding-left: 16.1px;
|
||||
strong{
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
address{
|
||||
font-size: 22px;
|
||||
margin-top: 13.12px;
|
||||
}
|
||||
|
||||
#planSection{
|
||||
#planContainer{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: -88px;
|
||||
margin-top: -133px;
|
||||
}
|
||||
}
|
||||
|
||||
#extLinkSection{
|
||||
a img{
|
||||
height: 77px;
|
||||
}
|
||||
}
|
||||
|
||||
#adhesionSection{
|
||||
width: 50%;
|
||||
margin-left: 16.1px;
|
||||
margin-bottom: 77px;
|
||||
|
||||
.textBtnStyle{
|
||||
height: 44px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#statuSection{
|
||||
#statusDesc{
|
||||
padding-left: 77px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#lolStatus{
|
||||
font-size: 33px;
|
||||
height: 77px;
|
||||
width: 50%;
|
||||
border-radius: 33px 0 0 33px;
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
font-size: 22px;
|
||||
margin-right: 33px;
|
||||
padding-left: 16.1px;
|
||||
}
|
||||
}
|
||||
|
||||
#extraContent{
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
#aboutSection{
|
||||
font-size: 22px;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
#eventSection{
|
||||
#eventContent{
|
||||
li{
|
||||
.iconBtnStyle{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
right: 1.61%;
|
||||
}
|
||||
|
||||
.icon{
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
details{
|
||||
summary{
|
||||
.title{
|
||||
font-size: 22px;
|
||||
|
||||
h4{
|
||||
font-size: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.resume{
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
.description{
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#webRingSection{
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
min-height: 77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Attention, si on enlève ce lien symbolique, l'affichage ouvert / fermé sera cassé à chaque déploiement du site jusqu'à ce que le local ouvre ou ferme.