Merge branch 'REWORK' of git.labolyon.fr:vgaNAR6ta/LOLv333 into v333
This commit is contained in:
@@ -0,0 +1 @@
|
||||
status/index.html
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
@@ -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>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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" />
|
||||
<title>TEST EVENT</title>
|
||||
<style data-import="no-import">
|
||||
/*=========================== INFROMATIONS AFFICHES :
|
||||
|
||||
le style 'no-import' est filtrée
|
||||
ici on place les eléments qui entre en conflit avec
|
||||
la page principale
|
||||
|
||||
les suivant sont inclus
|
||||
|
||||
IMPORTANT : il faut nommer le <article> avec un id unique
|
||||
pour éviter les conflit avec les reste du site
|
||||
|
||||
====================================================*/
|
||||
|
||||
body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style media="screen">
|
||||
#testAffiche{
|
||||
width: 333px;
|
||||
height: 333px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#testAffiche p{
|
||||
color: black;
|
||||
font-size: 33px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<article id="testAffiche">
|
||||
<p>test affiche !</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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" href="./closedStyle.css">
|
||||
<link rel="stylesheet" href="../style/animation.css">
|
||||
<link rel="stylesheet" href="/style/typo.css">
|
||||
<title>TEST EVENT 333</title>
|
||||
<style data-import="no-import">
|
||||
/*=========================== INFROMATIONS AFFICHES :
|
||||
|
||||
la balise style data-import="no-import" est filtrée
|
||||
ici on place les eléments qui entre en conflit avec la page principale
|
||||
|
||||
les suivant sont inclus
|
||||
|
||||
IMPORTANT : il faut nommer le main avec un id unique pour éviter les conflit avec les reste du site
|
||||
|
||||
====================================================*/
|
||||
|
||||
body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style media="screen">
|
||||
#testAffiche333{
|
||||
width: 333px;
|
||||
height: 333px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#testAffiche333 p{
|
||||
color: black;
|
||||
font-size: 33px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<article id="testAffiche333">
|
||||
<p>test affiche 333 !</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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:#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:#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"
|
||||
r="16.613539" />
|
||||
</svg>
|
||||
|
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 |
@@ -0,0 +1,143 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
width="94.468437"
|
||||
height="67.160767"
|
||||
viewBox="0 0 94.468437 67.160767"
|
||||
sodipodi:docname="logo_picto.svg"
|
||||
inkscape:export-filename="/home/nwa/Documents/Lyon Open Lab/Collectif LOL/parallax and responsive/images/logo.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90">
|
||||
<metadata
|
||||
id="metadata8">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs6" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="691"
|
||||
id="namedview4"
|
||||
showgrid="false"
|
||||
inkscape:zoom="4.8680853"
|
||||
inkscape:cx="38.498621"
|
||||
inkscape:cy="32.522625"
|
||||
inkscape:current-layer="svg2"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:4.70173216;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4542"
|
||||
width="89.766708"
|
||||
height="62.459038"
|
||||
x="2.3508661"
|
||||
y="2.3508661" />
|
||||
<circle
|
||||
r="4.0235658"
|
||||
cy="44.207626"
|
||||
cx="68.418625"
|
||||
id="circle822"
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<rect
|
||||
ry="1.525695"
|
||||
y="40.821571"
|
||||
x="34.42173"
|
||||
height="6.7451782"
|
||||
width="11.456149"
|
||||
id="rect838"
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5829103;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="circle842"
|
||||
cx="54.284214"
|
||||
cy="44.207626"
|
||||
r="4.0235658" />
|
||||
<circle
|
||||
r="4.0235658"
|
||||
cy="44.207626"
|
||||
cx="26.015396"
|
||||
id="circle846"
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<rect
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect852"
|
||||
width="14.782129"
|
||||
height="6.7451782"
|
||||
x="57.660061"
|
||||
y="28.948668"
|
||||
ry="1.525695" />
|
||||
<rect
|
||||
ry="1.525695"
|
||||
y="28.948668"
|
||||
x="39.825947"
|
||||
height="6.7451782"
|
||||
width="14.782129"
|
||||
id="rect858"
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<rect
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.93398905;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect860"
|
||||
width="14.782129"
|
||||
height="6.7451782"
|
||||
x="21.991831"
|
||||
y="28.948668"
|
||||
ry="1.525695" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="circle862"
|
||||
cx="68.418625"
|
||||
cy="20.461821"
|
||||
r="4.0235658" />
|
||||
<rect
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5829103;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect864"
|
||||
width="11.456149"
|
||||
height="6.7451782"
|
||||
x="34.42173"
|
||||
y="17.075764"
|
||||
ry="1.525695" />
|
||||
<circle
|
||||
r="4.0235658"
|
||||
cy="20.461821"
|
||||
cx="54.284214"
|
||||
id="circle866"
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<circle
|
||||
style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:8.00809765;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="circle868"
|
||||
cx="26.015396"
|
||||
cy="20.461821"
|
||||
r="4.0235658" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
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 |
Binary file not shown.
Binary file not shown.
Binary file not shown.
+228
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="style/typo.css">
|
||||
<link rel="stylesheet" href="style/default.css">
|
||||
<link rel="stylesheet" href="style/common.css">
|
||||
<link rel="stylesheet" href="style/animation.css">
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
|
||||
<!--REPONSIVE-->
|
||||
<link rel="stylesheet" href="style/responsive.css">
|
||||
<!--REDUCED MOTION-->
|
||||
<link rel="stylesheet" href="style/reduced.css">
|
||||
|
||||
<title>Laboratoire Ouvert Lyonnais</title>
|
||||
|
||||
<!--OPEN GRAPHS-->
|
||||
<meta property="og:title" content="Laboratoire Ouvert Lyonnais">
|
||||
<meta property="og:description" content="Hackerspace Queer">
|
||||
<meta property="og:url" content="https://labolyon.fr/">
|
||||
<meta property="og:image" content="assets/logo/logo_picto.svg">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
|
||||
<link rel="icon" type="image/svg" href="assets/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
<img id="logo" src="assets/logo/logo-forme.svg" alt="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/index.ouvert.html" 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>
|
||||
<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>
|
||||
@@ -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
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
export async function loadEvents(){
|
||||
let eventList = document.querySelectorAll('#eventSection > article');
|
||||
//console.log("event list: ", eventList);
|
||||
|
||||
for (let event of eventList){
|
||||
let title = event.querySelector('h4');
|
||||
let date = event.querySelector('p.date');
|
||||
let posterLink = event.querySelector('a.iconBtnStyle').href;
|
||||
let posterHTML = await getPoster(posterLink);
|
||||
|
||||
let poster = posterHTML.querySelector('body > article');
|
||||
|
||||
let posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')
|
||||
|
||||
console.log('entry data :', title, date, poster, posterStyle);
|
||||
|
||||
let selectedEntry = createEntry(title, date, poster, posterStyle)
|
||||
|
||||
console.log('created new details :', selectedEntry);
|
||||
|
||||
event.replaceChildren(selectedEntry);
|
||||
}
|
||||
|
||||
/* let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
|
||||
|
||||
//console.log("source buttons : ", btnList)
|
||||
|
||||
let displayWindow = document.querySelector('#posterWindow');
|
||||
|
||||
let displayContainer = document.querySelector('#posterContainer');
|
||||
|
||||
let closeBtn = document.querySelector('#posterCloseBtn');
|
||||
|
||||
closeBtn.addEventListener('mousedown', () => {
|
||||
displayWindow.style.visibility = 'collapse';
|
||||
displayContainer.replaceChildren();
|
||||
})
|
||||
|
||||
closeBtn.addEventListener('touchstart', () => {
|
||||
displayWindow.style.visibility = 'collapse';
|
||||
displayContainer.replaceChildren();
|
||||
})
|
||||
|
||||
async function getPoster(src){
|
||||
let res = await fetch(src);
|
||||
if (res.ok){
|
||||
let html_text = await res.text()
|
||||
let html = new DOMParser().parseFromString(html_text, "text/html");
|
||||
return html
|
||||
} else{
|
||||
console.log('error 333');
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let eventList = [];
|
||||
|
||||
if( btnList.length > 0 ){
|
||||
for (let btn of btnList ){
|
||||
let link = btn.children[0];
|
||||
link.style.pointerEvents = 'none';
|
||||
|
||||
//console.log(link.href);
|
||||
|
||||
let posterPage = await getPoster(link.href);
|
||||
|
||||
//console.log('selected poster: ', posterPage)
|
||||
|
||||
let titleData = posterPage.querySelector('title');
|
||||
//console.log(titleData);
|
||||
|
||||
let styleList = Array.from(posterPage.querySelectorAll('head > style'));
|
||||
//console.log(styleList)
|
||||
|
||||
styleList.splice(0,1);
|
||||
//console.log(styleList)
|
||||
|
||||
eventList.push(
|
||||
{
|
||||
content: posterPage.querySelector('main'),
|
||||
title: titleData.innerText,
|
||||
stylesheet: styleList,
|
||||
sourceBtn: btn
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//console.log("event list : ", eventList);
|
||||
|
||||
if (eventList.length > 0){
|
||||
|
||||
eventList.forEach( (obj) =>{
|
||||
let btn = obj.sourceBtn;
|
||||
let content = obj.content;
|
||||
let title = obj.title;
|
||||
for (let style of obj.stylesheet){
|
||||
document.head.append(style);
|
||||
}
|
||||
btn.addEventListener( 'click', () => {
|
||||
//console.log("selection :", content)
|
||||
displayWindow.style.visibility = 'visible';
|
||||
let targetTitle = displayWindow.querySelector('h4');
|
||||
targetTitle.innerText = title;
|
||||
displayContainer.replaceChildren(content);
|
||||
})
|
||||
})
|
||||
} */
|
||||
}
|
||||
|
||||
async function getPoster(link){
|
||||
let res = await fetch(link);
|
||||
if (res.ok){
|
||||
let html_text = await res.text()
|
||||
let html = new DOMParser().parseFromString(html_text, "text/html");
|
||||
return html
|
||||
} else{
|
||||
console.log('error 333');
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function createEntry(title, date, html, style){
|
||||
let newEntry = document.createElement('details');
|
||||
let newSummary = document.createElement('summary');
|
||||
newSummary.append(title, date);
|
||||
|
||||
newEntry.append(newSummary);
|
||||
|
||||
newEntry.append(html);
|
||||
|
||||
newEntry.name = "eventList"
|
||||
|
||||
for(let el of style){
|
||||
document.head.append(el);
|
||||
}
|
||||
|
||||
return newEntry
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
export function makeItFloat(target){
|
||||
let 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 = '';
|
||||
})
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
async function importOuverture(){
|
||||
const res = await fetch("/status/index.html")
|
||||
if(!res.ok){
|
||||
throw new Error(`Server responded with status ${res.status} ${res.statusText}`)
|
||||
}
|
||||
let html_text = await res.text()
|
||||
let html = new DOMParser().parseFromString(html_text, "text/html");
|
||||
|
||||
for(let style of html.querySelectorAll("head > style")) {
|
||||
document.head.append(style)
|
||||
}
|
||||
|
||||
let textStatus = html.querySelector("#statusText").textContent;
|
||||
let statusBox = document.querySelector('#statusText');
|
||||
statusBox.textContent = textStatus;
|
||||
}
|
||||
|
||||
importOuverture()
|
||||
|
||||
for( let btn of document.querySelectorAll(".iconBtnStyle")){
|
||||
btn.style.visibility = 'visible';
|
||||
}
|
||||
+21
@@ -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("Status actuel du LOL", status);
|
||||
|
||||
let cuteTexture = initCuteTexture({
|
||||
shaderSource: status.shaderSource
|
||||
});
|
||||
|
||||
cuteTexture.target.style.visibility = "visible"
|
||||
});
|
||||
|
||||
// ======================================== floating message window
|
||||
|
||||
makeItFloat(document.querySelector('#msgWindow'));
|
||||
@@ -0,0 +1,32 @@
|
||||
import { getDocumentShaderSource } from './cuteTexture.js';
|
||||
|
||||
export async function loadStatus(){
|
||||
let res = await fetch('/status/index.html');
|
||||
|
||||
let html_text = await res.text()
|
||||
let html = new DOMParser().parseFromString(html_text, "text/html");
|
||||
|
||||
let shaderSource = getDocumentShaderSource(html);
|
||||
|
||||
let target = document.querySelector('#statuSection');
|
||||
|
||||
let hiddenBtn = target.querySelector('a');
|
||||
|
||||
hiddenBtn.style.visibility = 'collapse';
|
||||
|
||||
let status = html.querySelector('#lolStatus');
|
||||
console.log('current status:', status.innerText);
|
||||
|
||||
let isOpen = status.innerText.includes('ouvert');
|
||||
|
||||
let icon = html.querySelector('link[rel="icon"]');
|
||||
let style = html.querySelectorAll('link[rel="stylesheet"]')[0];
|
||||
//console.log("selected script: ", script);
|
||||
|
||||
document.head.append(icon);
|
||||
document.head.append(style);
|
||||
|
||||
target.appendChild(status);
|
||||
|
||||
return { open: isOpen, shaderSource };
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL :
|
||||
|
||||
>si possible écrire tous les noms de variables en camel Case (pas sur du nom maisUnTrucCommeCa), je trouve ça plus lisible
|
||||
|
||||
> à vérifier mais je pense que la version dégradée sans js fonctionne, il faudrait juste ajuster le contenu, et aussi pour le bouton "vérifier si le lieu est ouvert" voir dernière entrée (***)
|
||||
|
||||
> j'attends vos retours pour savoir qu'est ce qu'il faut rajouter/ modifier ?
|
||||
|
||||
|
||||
|
||||
> ajout du bouton plus pour les évènements => création d'event sur des pages séparées, importées avec js (remplacé par lien en version dégradé )
|
||||
|
||||
>(***) mise en place du statut sans le lien symbolique (devrait fonctionner si on l'ajoute mais jsep comment faire)
|
||||
modifier le lien vers le dossier au lieu de ''index.ouvert.html' dans la page principale
|
||||
changer le fetch dans status.js
|
||||
|
||||
> problème de gestion des évènement tactiles, rien ne marche ...
|
||||
|
||||
> problème import css directement dans main.css
|
||||
|
||||
* [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche
|
||||
|
||||
* [x] auto scale affiche dans son conteneur
|
||||
> problème à gérer dans la conception des affiches
|
||||
|
||||
* [x] message de bienvenue !!!
|
||||
|
||||
* [x] tester section event avec des vraies affiches !!!
|
||||
> problème de cohérence interface / contenu sur pc, le panneau event est très large et dois afficher des affiches format vertical donc très haut si rescale sur width ou très petit si rescale sur hauteur + si format aléatoire je sais pas comment scale
|
||||
|
||||
* [x] performance arrière plan avec un shader
|
||||
> OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg
|
||||
+ video noir & blanc au dessus en mix blend difference, opacité 0.777
|
||||
> FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg
|
||||
|
||||
* [x] désactiver la video pour les personnes qui veulent pas d'effets visuels
|
||||
|
||||
* [x] fond video en version dégradée + scale video un peu plus grand car bande noire en bas
|
||||
|
||||
* [x] réglages padding section statut
|
||||
|
||||
|
||||
# Démarrer un serveur de developpement
|
||||
|
||||
```
|
||||
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é
|
||||
|
||||
## Accessibilité
|
||||
|
||||
[x] alt sur les images fonctionnelle
|
||||
|
||||
[x] alt sur les boutons aussi
|
||||
|
||||
[x]checkup global accessibilité et sémantique
|
||||
|
||||
[x] open graphs !
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"api_compatibility": [
|
||||
"14",
|
||||
"15"
|
||||
],
|
||||
"space": "Laboratoire Ouvert Lyonnais",
|
||||
"logo": "https://labolyon.fr/images/logo_picto.svg",
|
||||
"url": "https://labolyon.fr/",
|
||||
"location": {
|
||||
"address": "7 Place Louis Chazette 69001 Lyon, France",
|
||||
"lon": 4.8372366,
|
||||
"lat": 45.7732494,
|
||||
"country_code": "FR",
|
||||
"timezone": "Europe/Paris"
|
||||
},
|
||||
"contact": {
|
||||
"irc": "ircs://irc.geeknode.org:6697/labolyon",
|
||||
"ml": "discussions@listes.labolyon.fr",
|
||||
"mastodon": "@labolyon@nerdculture.de",
|
||||
"matrix": "#lol-space:chat.labolyon.fr"
|
||||
},
|
||||
"state": {
|
||||
"icon": {
|
||||
"closed": "https://labolyon.fr/status/status.ferm%C3%A9.png",
|
||||
"open": "https://labolyon.fr/status/status.ouvert.png"
|
||||
},
|
||||
"open": false,
|
||||
"lastchange": 1788302721
|
||||
},
|
||||
"projects": [
|
||||
"https://git.labolyon.fr/",
|
||||
"https://wiki.labolyon.fr/"
|
||||
]
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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" href="status/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>
|
||||
|
||||
<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;
|
||||
|
||||
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;
|
||||
|
||||
highp vec4 baseColor = vec4(
|
||||
0.0,
|
||||
lum,
|
||||
lum,
|
||||
1.0
|
||||
);
|
||||
|
||||
highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<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" href="status/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>
|
||||
|
||||
<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;
|
||||
|
||||
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;
|
||||
|
||||
highp vec4 baseColor = vec4(
|
||||
0.0,
|
||||
lum,
|
||||
lum,
|
||||
1.0
|
||||
);
|
||||
|
||||
highp vec4 rotatedColor = hue_rotate(baseColor, 13.12);
|
||||
|
||||
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>
|
||||
@@ -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;
|
||||
}
|
||||
Executable
+24
@@ -0,0 +1,24 @@
|
||||
#!/bin/bash
|
||||
|
||||
if [ "$#" = "0" ]; then
|
||||
echo "Usage set-status.sh [new-status]"
|
||||
echo ""
|
||||
echo "[new-status] can be \"opened\" or \"closed\""
|
||||
echo ""
|
||||
exit 1
|
||||
fi
|
||||
|
||||
#SPACE_JSON=/var/www/html/spaceapi/space.json
|
||||
SPACE_JSON="$(dirname $0)/../spaceapi/space.json"
|
||||
|
||||
if [ "$1" = "opened" ]; then
|
||||
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
|
||||
fi
|
||||
|
||||
if [ "$1" = "closed" ]; then
|
||||
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
|
||||
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;
|
||||
}
|
||||
+619
@@ -0,0 +1,619 @@
|
||||
/*================ 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: 50px;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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,317 @@
|
||||
/*===========================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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*===========================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: 90vh;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
#aboutSection{
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@font-face {
|
||||
font-family: 'karrik';
|
||||
src: url('typo/Karrik-Italic.woff2') format('woff2');
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'karrik';
|
||||
src: url('typo/Karrik-Regular.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src: url('typo/Velvelyne-Book.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'avara';
|
||||
src: url('typo/Avara-Black.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pressStart';
|
||||
src: url('typo/PressStart2P-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src:url('typo/Velvelyne-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user