edit: version tel sans event + modif à faire + organisation des fichiers + css ouverture du local
This commit is contained in:
+365
-347
@@ -1,20 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="typo.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="affiches/perm.css">
|
||||
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
|
||||
<link rel="stylesheet" href="affiches/algorave.css">
|
||||
<link rel="stylesheet" href="/style/typo.css">
|
||||
<link rel="stylesheet" href="style/default.css">
|
||||
<link rel="stylesheet" href="style/common.css">
|
||||
<link rel="stylesheet" href="style/animation.css">
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<link rel="stylesheet" href="status/openStyle.css">
|
||||
<link rel="stylesheet" href="affiches/perm.css">
|
||||
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
|
||||
<link rel="stylesheet" href="affiches/algorave.css">
|
||||
<title>L(. O.)L — Laboratoire Ouvert Lyonnais</title>
|
||||
<link rel="icon" type="image/svg" href="./assets/favicon.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
<img id="logo" src="/assets/logo/logo-forme.svg" alt="">
|
||||
<img id="logo" src="./assets/logo/logo-forme.svg" alt="">
|
||||
<span aria-hidden="true" class="cool-name">L<span class="trans-symbol">⚧</span>L</span>
|
||||
<span class="plain-name">L.O.L.</span>
|
||||
</h1>
|
||||
@@ -30,399 +34,413 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="home-section">
|
||||
<video autoplay muted loop src="./assets/video/close.webm" class="background-video"></video>
|
||||
<section id="homeContent">
|
||||
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
|
||||
<video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
|
||||
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
|
||||
<section id="titleSection" class="solidBox">
|
||||
<h2>
|
||||
Hackerspace queer
|
||||
<small><br>
|
||||
Lieu de réappropriation, <br>
|
||||
réparation & recyclage <br>
|
||||
des objets techniques <br>
|
||||
& technologiques
|
||||
</small>
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section class="solid-box">
|
||||
<h2>
|
||||
Hackerspace queer
|
||||
<small>
|
||||
Lieu de réappropriation, <br>
|
||||
réparation & recyclage <br>
|
||||
des objets techniques <br>
|
||||
& technologiques
|
||||
</small>
|
||||
</h2>
|
||||
<section id="hourSection" class="solidBox">
|
||||
<h3>Horaires d'ouverture</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Dim. <strong>15h → 23h</strong>
|
||||
</li>
|
||||
<li>
|
||||
Lun. <strong>15h → 23h</strong>
|
||||
</li>
|
||||
<li>
|
||||
Mar. <strong>15h → 23h</strong>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
<h3>Nocturne</h3>
|
||||
<ol>
|
||||
<li>Ven. <strong>21h → 5h</strong></li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
Dim. <strong>15h → 23h</strong>
|
||||
</li>
|
||||
<li>
|
||||
Lun. <strong>15h → 23h</strong>
|
||||
</li>
|
||||
<li>
|
||||
Mar. <strong>15h → 23h</strong>
|
||||
</li>
|
||||
</ol>
|
||||
<address class="transparentBox">
|
||||
7 place Chazette<br>
|
||||
69001 Lyon<br>
|
||||
<br>
|
||||
45° 46' 23.698" N<br>
|
||||
4° 50' 14.052" E
|
||||
</address>
|
||||
|
||||
<h3>Nocturne:</h3>
|
||||
<ol>
|
||||
<li>Ven. <strong>21h → 5h</strong></li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<address>
|
||||
7 place Chazette<br>
|
||||
69001 Lyon<br>
|
||||
<br>
|
||||
45° 46' 23.698" N<br>
|
||||
4° 50' 14.052" E
|
||||
</address>
|
||||
|
||||
<div class="access">
|
||||
<img src="./assets/plan.svg" id="plan">
|
||||
<svg 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 class="hackerspace-org">
|
||||
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
|
||||
<img src="/assets/logo_hackerspaces_monde.png">
|
||||
</a>
|
||||
<div id="planSection" class="transparentBox">
|
||||
<div id="planContainer" class="transparentBox">
|
||||
<img src="./assets/plan.svg" id="plan" alt="Plan d'accès du local: sonnez à l'interphone Laboratoire Ouvert Lyonnais au 7 Place Chazette 69001, puis avancez tout droit, traversez la cour, et avancez encore, la porte se situe après l'ascenceur, sur la droite">
|
||||
<svg 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>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
</div>
|
||||
|
||||
<div id="extLinkSection" class="transparentBox">
|
||||
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
|
||||
<img src="./assets/logo_hackerspaces_monde.png">
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="statuSection" class="solidBox">
|
||||
<div id="statusDesc">
|
||||
<p>
|
||||
Le LOL est aussi ouvert entre les horaires définis.
|
||||
En fonction de nos envies et disponibilités.
|
||||
Le LOL peut ouvrir en dehors des horaires habituels.<br>
|
||||
En fonction de nos envies et disponibilités.<br> 
|
||||
</p>
|
||||
<p>
|
||||
Un capteur sur la porte d'entrée indique si le local est ouvert:
|
||||
  Un capteur sur la porte d'entrée indique<br>  si le local est ouvert:
|
||||
</p>
|
||||
<p class="status-text">
|
||||
<a href="/status/">Vérifier si le local est ouvert →</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<h3 id="lolStatus">
|
||||
<small>
|
||||
Le local est actuellement
|
||||
</small>
|
||||
Fermé ...
|
||||
</h3>
|
||||
</section>
|
||||
|
||||
<section class="place-description">
|
||||
<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 et de bidouille anti-systèmes.
|
||||
</p>
|
||||
<p>
|
||||
Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
|
||||
Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, 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 !
|
||||
</p>
|
||||
<p>
|
||||
Nous revendiquons l'ouverture du code et des techniques,
|
||||
le partage des connaissances et l'autogestion,
|
||||
l'anti-capitalisme et l'anti-fascisme. <br><br>
|
||||
Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
|
||||
Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
|
||||
</p>
|
||||
</section>
|
||||
<section id="extraContent">
|
||||
<section id="aboutSection" class="solidBox">
|
||||
<p>
|
||||
Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tous·tes les passionné·es d'informatique, d'électronique et de technique,
|
||||
qui souhaitent réparer, recycler, et se réapproprier les objets et outils qui nous entourent.<br>
|
||||
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
|
||||
</p>
|
||||
<p>
|
||||
Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
|
||||
Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils, 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 !
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
<section id="eventSection" class="transparentBox">
|
||||
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
|
||||
<video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
|
||||
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
|
||||
<h3>Événements <small>à venir</small></h3>
|
||||
<!--
|
||||
<article class="event affiche-perm affiche" property="event" typeof="Event">
|
||||
<h1 property="name">Permanence du LOL</h1>
|
||||
|
||||
<section class="place-events">
|
||||
<h2>Événements <small>à venir</small></h2>
|
||||
<!--
|
||||
<article class="event affiche-perm affiche" property="event" typeof="Event">
|
||||
<h1 property="name">Permanence du LOL</h1>
|
||||
|
||||
<div property="description">
|
||||
<p>Venez chiller avec nous, partager un thé ou une biere.</p>
|
||||
<div property="description">
|
||||
<p>Venez chiller avec nous, partager un thé ou une biere.</p>
|
||||
|
||||
<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
|
||||
</div>
|
||||
<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
|
||||
</div>
|
||||
|
||||
<p class="event-hours"><strong><span property="eventSchedule" typeof="Schedule">
|
||||
Tous les <data property="byDay" content="Tuesday">mardis</data> à partir de <data property="startTime" content="19:00">19h</data>
|
||||
</span><br/>
|
||||
au <span property="location" href="https://labolyon.fr/">local du LOL</span></strong></p>
|
||||
<p class="event-hours"><strong><span property="eventSchedule" typeof="Schedule">
|
||||
Tous les <data property="byDay" content="Tuesday">mardis</data> à partir de <data property="startTime" content="19:00">19h</data>
|
||||
</span><br/>
|
||||
au <span property="location" href="https://labolyon.fr/">local du LOL</span></strong></p>
|
||||
|
||||
<p>Adhésion conseillée (prix libre)</p>
|
||||
</article>
|
||||
<p>Adhésion conseillée (prix libre)</p>
|
||||
</article>
|
||||
|
||||
<article class="event affiche affiche-drags-nerds-hackathon">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Press Start 2P";
|
||||
src: url("./affiches/dragsnerds/PressStart2P-Regular-DogiNJoF.ttf");
|
||||
font-weight: normal;
|
||||
}
|
||||
<article class="event affiche affiche-drags-nerds-hackathon">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Press Start 2P";
|
||||
src: url("./affiches/dragsnerds/PressStart2P-Regular-DogiNJoF.ttf");
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: velvelyne;
|
||||
src: url("./affiches/dragsnerds/Velvelyne-Light-C9f5yZCm.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: velvelyne;
|
||||
src: url("./affiches/dragsnerds/Velvelyne-Light-C9f5yZCm.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: velvelyne;
|
||||
src: url("./affiches/dragsnerds/Velvelyne-Bold-CR91h96S.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
}
|
||||
@font-face {
|
||||
font-family: velvelyne;
|
||||
src: url("./affiches/dragsnerds/Velvelyne-Bold-CR91h96S.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon {
|
||||
background: white;
|
||||
grid-row: span 2;
|
||||
color: black;
|
||||
padding: 0;
|
||||
border-color: white;
|
||||
line-height: 1.4;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon {
|
||||
background: white;
|
||||
grid-row: span 2;
|
||||
color: black;
|
||||
padding: 0;
|
||||
border-color: white;
|
||||
line-height: 1.4;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > h2 {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
font-family: velvelyne;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon > h2 {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
font-family: velvelyne;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > p,
|
||||
.affiche-drags-nerds-hackathon > ul {
|
||||
padding: 5px 15px;
|
||||
margin: 0;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon > p,
|
||||
.affiche-drags-nerds-hackathon > ul {
|
||||
padding: 5px 15px;
|
||||
margin: 0;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 7px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon > ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon li {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon li {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon li::marker {
|
||||
content: "> ";
|
||||
}
|
||||
.affiche-drags-nerds-hackathon li::marker {
|
||||
content: "> ";
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > img:first-of-type {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon > img:first-of-type {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon > p:first-of-type {
|
||||
background: black;
|
||||
color: white;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.affiche-drags-nerds-hackathon > p:first-of-type {
|
||||
background: black;
|
||||
color: white;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.affiche-drags-nerds-hackathon a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
.affiche-drags-nerds-hackathon a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="./affiches/dragsnerds/drags-nerds-hackathon-header.png" alt="Drags & Nerds #2: Une image en noir et blanc avec le titre de l'événement et des photos détourées de drag queens.">
|
||||
<img src="./affiches/dragsnerds/drags-nerds-hackathon-header.png" alt="Drags & Nerds #2: Une image en noir et blanc avec le titre de l'événement et des photos détourées de drag queens.">
|
||||
|
||||
<p>
|
||||
A tous·tes les drags, tous·tes les nerds et l'ensemble des personnes entre les deux.
|
||||
Vous êtes invité·es à la grande soirée Drags&Nerds du 22 mai 2026 au Grrrnd Zero !
|
||||
</p>
|
||||
<p>
|
||||
A tous·tes les drags, tous·tes les nerds et l'ensemble des personnes entre les deux.
|
||||
Vous êtes invité·es à la grande soirée Drags&Nerds du 22 mai 2026 au Grrrnd Zero !
|
||||
</p>
|
||||
|
||||
<h2>> Résidence et Hackathon</h2>
|
||||
<h2>> Résidence et Hackathon</h2>
|
||||
|
||||
<p>
|
||||
Pour se rencontrer et construire ensemble, une grande Résidence/Hackathon se déroulera du <strong><time datetime="2026-04-17T10:00:00">17</time> au <time datetime="2026-04-19T19:00:00">19 Avril 2026</time></strong>.
|
||||
<strong>Ça se passe au Laboratoire Ouvert Lyonnais</strong>, un Hackerspace queer de Lyon. 7 Place Louis Chazette 69001 Lyon.
|
||||
</p>
|
||||
<p>
|
||||
Pour se rencontrer et construire ensemble, une grande Résidence/Hackathon se déroulera du <strong><time datetime="2026-04-17T10:00:00">17</time> au <time datetime="2026-04-19T19:00:00">19 Avril 2026</time></strong>.
|
||||
<strong>Ça se passe au Laboratoire Ouvert Lyonnais</strong>, un Hackerspace queer de Lyon. 7 Place Louis Chazette 69001 Lyon.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
On construira nos performances, nos costumes, nos makeups, nos mises en scène...
|
||||
Tu as envie de faire du lip sync ? De jouer de ton synthé ? D'expérimenter de nouveaux sons ?
|
||||
Ou juste de donner un coup de pouce à des drags pour leurs show ?
|
||||
Il y a une place pour toi.
|
||||
</p>
|
||||
<p>
|
||||
On construira nos performances, nos costumes, nos makeups, nos mises en scène...
|
||||
Tu as envie de faire du lip sync ? De jouer de ton synthé ? D'expérimenter de nouveaux sons ?
|
||||
Ou juste de donner un coup de pouce à des drags pour leurs show ?
|
||||
Il y a une place pour toi.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Repas végétaliens le midi</li>
|
||||
<li>Outils pour souder, coudre, coder, couper, clouer et imprimer en 3D en libre service</li>
|
||||
<li>Masques FFP2 pour l'autodéfense sanitaire</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Repas végétaliens le midi</li>
|
||||
<li>Outils pour souder, coudre, coder, couper, clouer et imprimer en 3D en libre service</li>
|
||||
<li>Masques FFP2 pour l'autodéfense sanitaire</li>
|
||||
</ul>
|
||||
|
||||
<p style="text-align: center;">
|
||||
Inscrivez vous en envoyant un email à<br/><a href="mailto:drags-nerds@epickiwi.fr">drags‑nerds@epickiwi.fr</a><br/>
|
||||
Ou rendez vous sur <a href="https://drags-nerds.net/" target="_blank">drags‑nerds.net</a>
|
||||
</p>
|
||||
</article>
|
||||
<p style="text-align: center;">
|
||||
Inscrivez vous en envoyant un email à<br/><a href="mailto:drags-nerds@epickiwi.fr">drags‑nerds@epickiwi.fr</a><br/>
|
||||
Ou rendez vous sur <a href="https://drags-nerds.net/" target="_blank">drags‑nerds.net</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
|
||||
<style>
|
||||
.affiche-debian-release-party {
|
||||
|
||||
line-height: 1.4;
|
||||
grid-row: span 2;
|
||||
background: url("affiches/debian-background.png");
|
||||
background-size: cover;
|
||||
background-position: 50% 0;
|
||||
color: white;
|
||||
<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
|
||||
<style>
|
||||
.affiche-debian-release-party {
|
||||
|
||||
a {
|
||||
color: #c91043;
|
||||
font-weight: bold;
|
||||
}
|
||||
line-height: 1.4;
|
||||
grid-row: span 2;
|
||||
background: url("affiches/debian-background.png");
|
||||
background-size: cover;
|
||||
background-position: 50% 0;
|
||||
color: white;
|
||||
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
a {
|
||||
color: #c91043;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
font-style: italic;
|
||||
margin-top: 1ex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
<h1 property="name" style="text-shadow: 3px 0 0 #c91043; text-transform: uppercase; text-align: center;">Debian Trixie<br/>release party</h1>
|
||||
small {
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
font-style: italic;
|
||||
margin-top: 1ex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>
|
||||
<a href="https://www.debian.org/releases/trixie/index.fr.html">Debian Trixie</a> sort <a href="https://lists.debian.org/debian-devel-announce/2025/07/msg00003.html">samedi 9 Août</a> !
|
||||
Pour marquer le coup (et aussi pour ne pas manquer une bonne occasion de bidouiller des ordinateurs ensemble) on va s'organiser une release party ce <strong>Samedi 9 Août à partir de 17h au LOL</strong>.
|
||||
</p>
|
||||
<h1 property="name" style="text-shadow: 3px 0 0 #c91043; text-transform: uppercase; text-align: center;">Debian Trixie<br/>release party</h1>
|
||||
|
||||
<p>
|
||||
<a href="https://www.debian.org/">Debian</a> c'est l'une des distributions Linux les plus populaires. Un système exploitation alternatif qui remplace <a href="https://endof10.org/fr/">Windows</a>. Elle est basée sur Linux et (majoritairement) composée de logiciels libres.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://www.debian.org/releases/trixie/index.fr.html">Debian Trixie</a> sort <a href="https://lists.debian.org/debian-devel-announce/2025/07/msg00003.html">samedi 9 Août</a> !
|
||||
Pour marquer le coup (et aussi pour ne pas manquer une bonne occasion de bidouiller des ordinateurs ensemble) on va s'organiser une release party ce <strong>Samedi 9 Août à partir de 17h au LOL</strong>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Et <a href="https://www.debian.org/releases/trixie/index.fr.html">Trixie</a> c'est le petit nom de la nouvelle version stable de Debian. C'est pas tous les jours qu'une nouvelle version de Debian sort et ça représente un gros travail bénévole. Donc fêtons cette sortie !
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://www.debian.org/">Debian</a> c'est l'une des distributions Linux les plus populaires. Un système exploitation alternatif qui remplace <a href="https://endof10.org/fr/">Windows</a>. Elle est basée sur Linux et (majoritairement) composée de logiciels libres.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Il y aura des frites à prix libre proposés par l'<a href="https://wiki.labolyon.fr/doku.php?id=adelfrite">Adelfrite</a> aux alentours de 20h.
|
||||
</p>
|
||||
<p>
|
||||
Et <a href="https://www.debian.org/releases/trixie/index.fr.html">Trixie</a> c'est le petit nom de la nouvelle version stable de Debian. C'est pas tous les jours qu'une nouvelle version de Debian sort et ça représente un gros travail bénévole. Donc fêtons cette sortie !
|
||||
</p>
|
||||
|
||||
<ol style="list-style-type: disc;">
|
||||
<li>17h00 – <strong>Backup Tea Time</strong>. Il parait qu'il faut sauvegarder régulièrement ses données ? On va voir comment faire. <small>Apportez un support de stockage (Disque Dur externe, clé USB, etc...)</small></li>
|
||||
<li>19h00 – <strong>Install & full-upgrade Party</strong> On lance les installations (si vous voulez installer Debian) ou les mise à jour de nos machines vers Trixie. <small>Apportez vos laptops et vos serveurs !</small></li>
|
||||
</ol>
|
||||
<p>
|
||||
Il y aura des frites à prix libre proposés par l'<a href="https://wiki.labolyon.fr/doku.php?id=adelfrite">Adelfrite</a> aux alentours de 20h.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Vous pouvez venir avec un ordinateur Windows, un Linux ou même sans, juste pour voir.
|
||||
Il n'y a pas d'autre pré-requis que d'être curieux·euse et de savoir utiliser un clavier.
|
||||
</p>
|
||||
<ol style="list-style-type: disc;">
|
||||
<li>17h00 – <strong>Backup Tea Time</strong>. Il parait qu'il faut sauvegarder régulièrement ses données ? On va voir comment faire. <small>Apportez un support de stockage (Disque Dur externe, clé USB, etc...)</small></li>
|
||||
<li>19h00 – <strong>Install & full-upgrade Party</strong> On lance les installations (si vous voulez installer Debian) ou les mise à jour de nos machines vers Trixie. <small>Apportez vos laptops et vos serveurs !</small></li>
|
||||
</ol>
|
||||
|
||||
<p style="text-align: right; font-style: italic;">
|
||||
Rejoignez nous sur matrix:<br/>
|
||||
<code>#trixiereleaseparty-lyon:club1.fr</code>
|
||||
</p>
|
||||
</article>
|
||||
<p>
|
||||
Vous pouvez venir avec un ordinateur Windows, un Linux ou même sans, juste pour voir.
|
||||
Il n'y a pas d'autre pré-requis que d'être curieux·euse et de savoir utiliser un clavier.
|
||||
</p>
|
||||
|
||||
<article class="event affiche affiche-jamfetedelamusique" property="event" typeof="Event">
|
||||
<img src="/affiches/jamfetedelamusique.png" alt="Affiche de la jam ouverte du 21 Juin 2025 : Un motif abstrait généré de manière electronique." aria-labelledby="jam21062025-decription" />
|
||||
<div class="description" id="jam21062025-description">
|
||||
<h1 property="name">JAM OUVERTE</h1>
|
||||
<p property="description">La fête de la musique approche !
|
||||
C'est avec plaisir que nous vous invitons à venir bricoler, jouer, experimenter les sons, les images, les mélodies et le vacarme technique dans une JAM expérimentale et ouverte à tous·tes !
|
||||
Pour les novices, curieux, connaisseurs ou encore tous•tes celles et ceux qui veulent juste découvrir la musique et la vidéo décalée et experimentale, vous êtes les bienvenu•e•s !
|
||||
Rendez-vous 7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)
|
||||
La JAM se déroule de 14h à 18h, afin de laisser la soirée libre pour les nombreux événements de la ville en ce jour festif :)
|
||||
Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est permis pour cette après-midi festive que nous vous proposons !</p>
|
||||
<p property="location">7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)</p>
|
||||
<p>
|
||||
<time datetime="2025-06-21T14:00:00" content="2025-06-21T14:00:00" property="startDate">21 Juin 14h</time>
|
||||
-
|
||||
<time datetime="2025-06-21T18:00:00" content="2025-06-21T18:00:00" property="endDate">18h</time>
|
||||
</p>
|
||||
<p>Prix libre, No CB, adhésion libre</p>
|
||||
<p property="abstract">Experimentations visuelles et sonores ouverte</p>
|
||||
<p>poster by CCC</p>
|
||||
</div>
|
||||
</article>
|
||||
<p style="text-align: right; font-style: italic;">
|
||||
Rejoignez nous sur matrix:<br/>
|
||||
<code>#trixiereleaseparty-lyon:club1.fr</code>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="event affiche-jdll2024 affiche">
|
||||
<header>
|
||||
<img src="/assets/favicon.svg" alt="Favicon du LOL" />
|
||||
<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
|
||||
<article class="event affiche affiche-jamfetedelamusique" property="event" typeof="Event">
|
||||
<img src="/affiches/jamfetedelamusique.png" alt="Affiche de la jam ouverte du 21 Juin 2025 : Un motif abstrait généré de manière electronique." aria-labelledby="jam21062025-decription" />
|
||||
<div class="description" id="jam21062025-description">
|
||||
<h1 property="name">JAM OUVERTE</h1>
|
||||
<p property="description">La fête de la musique approche !
|
||||
C'est avec plaisir que nous vous invitons à venir bricoler, jouer, experimenter les sons, les images, les mélodies et le vacarme technique dans une JAM expérimentale et ouverte à tous·tes !
|
||||
Pour les novices, curieux, connaisseurs ou encore tous•tes celles et ceux qui veulent juste découvrir la musique et la vidéo décalée et experimentale, vous êtes les bienvenu•e•s !
|
||||
Rendez-vous 7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)
|
||||
La JAM se déroule de 14h à 18h, afin de laisser la soirée libre pour les nombreux événements de la ville en ce jour festif :)
|
||||
Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est permis pour cette après-midi festive que nous vous proposons !
|
||||
</p>
|
||||
<p property="location">7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)</p>
|
||||
<p>
|
||||
<time datetime="2025-06-21T14:00:00" content="2025-06-21T14:00:00" property="startDate">21 Juin 14h</time>
|
||||
-
|
||||
<time datetime="2025-06-21T18:00:00" content="2025-06-21T18:00:00" property="endDate">18h</time>
|
||||
</p>
|
||||
<p>Prix libre, No CB, adhésion libre</p>
|
||||
<p property="abstract">Experimentations visuelles et sonores ouverte</p>
|
||||
<p>poster by CCC</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<button>
|
||||
<img src="/affiches/jdll2024/reduire.png" alt="Reduire" />
|
||||
</button>
|
||||
<button>
|
||||
<img src="/affiches/jdll2024/agrandir.png" alt="Agrandir" />
|
||||
</button>
|
||||
<button>
|
||||
<img src="/affiches/jdll2024/fermer.png" alt="Fermer" />
|
||||
</button>
|
||||
</header>
|
||||
<nav>
|
||||
<button id="jdll-2024-back">
|
||||
<img src="/affiches/jdll2024/back.png" alt="Back" />
|
||||
Back
|
||||
</button>
|
||||
<button id="jdll-2024-forward">
|
||||
<img src="/affiches/jdll2024/forward.png" alt="Back" />
|
||||
Forward
|
||||
</button>
|
||||
<button id="jdll-2024-home">
|
||||
<img src="/affiches/jdll2024/home.png" alt="Home" />
|
||||
Home
|
||||
</button>
|
||||
<hr>
|
||||
<img src="/affiches/jdll2024/tux.png" alt="Tux" />
|
||||
</nav>
|
||||
<nav>
|
||||
<label for="jdll-2024-location">Location : </label>
|
||||
<input type="url" name="location" id="jdll-2024-location" value="/jdll2024/affiche.html"/>
|
||||
</nav>
|
||||
<iframe src="/affiches/jdll2024/affiche.html" id="jdll-2024-iframe" frameborder="0"></iframe>
|
||||
</article>
|
||||
<article class="event affiche-jdll2024 affiche">
|
||||
<header>
|
||||
<img src="/assets/favicon.svg" alt="Favicon du LOL" />
|
||||
<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const iframe = document.getElementById("jdll-2024-iframe");
|
||||
const initialValue = iframe.src;
|
||||
<button>
|
||||
<img src="/affiches/jdll2024/reduire.png" alt="Reduire" />
|
||||
</button>
|
||||
<button>
|
||||
<img src="/affiches/jdll2024/agrandir.png" alt="Agrandir" />
|
||||
</button>
|
||||
<button>
|
||||
<img src="/affiches/jdll2024/fermer.png" alt="Fermer" />
|
||||
</button>
|
||||
</header>
|
||||
<nav>
|
||||
<button id="jdll-2024-back">
|
||||
<img src="/affiches/jdll2024/back.png" alt="Back" />
|
||||
Back
|
||||
</button>
|
||||
<button id="jdll-2024-forward">
|
||||
<img src="/affiches/jdll2024/forward.png" alt="Back" />
|
||||
Forward
|
||||
</button>
|
||||
<button id="jdll-2024-home">
|
||||
<img src="/affiches/jdll2024/home.png" alt="Home" />
|
||||
Home
|
||||
</button>
|
||||
<hr>
|
||||
<img src="/affiches/jdll2024/tux.png" alt="Tux" />
|
||||
</nav>
|
||||
<nav>
|
||||
<label for="jdll-2024-location">Location : </label>
|
||||
<input type="url" name="location" id="jdll-2024-location" value="/jdll2024/affiche.html"/>
|
||||
</nav>
|
||||
<iframe src="/affiches/jdll2024/affiche.html" id="jdll-2024-iframe" frameborder="0"></iframe>
|
||||
</article>
|
||||
|
||||
iframe.addEventListener("load", () => {
|
||||
document.getElementById("jdll-2024-location").value = iframe.src
|
||||
document.getElementById("jdll-2024-title").textContent = iframe.contentWindow.document.title
|
||||
})
|
||||
<script>
|
||||
(() => {
|
||||
const iframe = document.getElementById("jdll-2024-iframe");
|
||||
const initialValue = iframe.src;
|
||||
|
||||
document.getElementById("jdll-2024-location").addEventListener("change", e => {
|
||||
iframe.src = e.target.value
|
||||
})
|
||||
iframe.addEventListener("load", () => {
|
||||
document.getElementById("jdll-2024-location").value = iframe.src
|
||||
document.getElementById("jdll-2024-title").textContent = iframe.contentWindow.document.title
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-back").addEventListener("click", () => {
|
||||
iframe.contentWindow.history.back()
|
||||
})
|
||||
document.getElementById("jdll-2024-location").addEventListener("change", e => {
|
||||
iframe.src = e.target.value
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-forward").addEventListener("click", () => {
|
||||
iframe.contentWindow.history.forward()
|
||||
})
|
||||
document.getElementById("jdll-2024-back").addEventListener("click", () => {
|
||||
iframe.contentWindow.history.back()
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-home").addEventListener("click", () => {
|
||||
iframe.src = initialValue
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
-->
|
||||
</section>
|
||||
document.getElementById("jdll-2024-forward").addEventListener("click", () => {
|
||||
iframe.contentWindow.history.forward()
|
||||
})
|
||||
|
||||
document.getElementById("jdll-2024-home").addEventListener("click", () => {
|
||||
iframe.src = initialValue
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
-->
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
:root {
|
||||
--back-color: #00FF44;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
.closedBackground{
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.openBackground{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.openBackground#texture{
|
||||
opacity: .5;
|
||||
z-index: -31;
|
||||
}
|
||||
|
||||
.openBackground#background{
|
||||
mix-blend-mode: difference;
|
||||
z-index: -30;
|
||||
filter: brightness(133%) saturate(33%) grayscale();
|
||||
transform: scale(1.5) rotate(180deg);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
:root{
|
||||
--back-color: #FFFF4D;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
/*====================Typo*/
|
||||
@import url("typo.css");
|
||||
|
||||
/*===================Animation*/
|
||||
@import url("animation.css");
|
||||
|
||||
/*=============Désact défault*/
|
||||
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{
|
||||
cursor: inherit;
|
||||
pointer-events: none !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/*=============Body & background*/
|
||||
html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scrollbar-color: var(--back-color) var(--main-color);
|
||||
background-color: var(--main-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/*============HEADER*/
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: var(--back-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 7.77px;
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
|
||||
.textBtnStyle{
|
||||
width: 117px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding-left: 13.12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16.1px;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-color: var(--main-color);
|
||||
|
||||
font-family: 'karrik';
|
||||
font-size: 16.1px;
|
||||
color: var(--main-color);
|
||||
margin-bottom: 3.33px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
gap: 13.12px;
|
||||
font-family: 'pressStart2P';
|
||||
font-size: 44px;
|
||||
color: var(--main-color);
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
strong{
|
||||
font-family: 'velvelyne';
|
||||
}
|
||||
|
||||
img{
|
||||
height: 77px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.plain-name{
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
z-index: -34;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
.textBtnStyle{
|
||||
display: flex;
|
||||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
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{
|
||||
cursor: inherit;
|
||||
pointer-events: none !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
+331
@@ -0,0 +1,331 @@
|
||||
/*================ GAMME COLOR ======================*/
|
||||
:root{
|
||||
--back-color: #FFFF4D;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
/*================ ANIMATION ======================*/
|
||||
@import url("/animation.css");
|
||||
|
||||
/*================ DESACT DEFAULT ======================*/
|
||||
@import url("/default.css");
|
||||
|
||||
/*================ BODY ======================*/
|
||||
html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scrollbar-color: var(--back-color) var(--main-color);
|
||||
background-color: var(--main-color);
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
}
|
||||
|
||||
/*================ CLASSES COMMUNES ======================*/
|
||||
@import url("/common.css");
|
||||
|
||||
/*================ STRUCTURE ======================*/
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
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: 'karrik';
|
||||
font-size: 50px;
|
||||
padding-top: 13.12px;
|
||||
|
||||
.trans-symbol{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.plain-name{
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
nav{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.textBtnStyle{
|
||||
border-radius: 0;
|
||||
width: 117px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
video{
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -30;
|
||||
}
|
||||
|
||||
.closedBackground{
|
||||
opacity: .5;
|
||||
mix-blend-mode: exclusion;
|
||||
}
|
||||
|
||||
.openBackground{
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
|
||||
main{
|
||||
position: relative;
|
||||
z-index: -33;
|
||||
|
||||
#homeContent{
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
position:relative;
|
||||
z-index: -33;
|
||||
display: grid;
|
||||
grid-template-columns: 2.5fr 2fr 1fr;
|
||||
grid-template-rows: 1fr 1.5fr;
|
||||
|
||||
#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%;
|
||||
padding-bottom: 13.12px;
|
||||
|
||||
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;
|
||||
|
||||
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-bottom: 7.77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
address{
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
width: 150%;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#planSection{
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2;
|
||||
color: var(--back-color);
|
||||
|
||||
#planContainer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 13.12px;
|
||||
margin-top: 33px;
|
||||
}
|
||||
|
||||
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: 133%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#statuSection{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: 16.1vh;
|
||||
|
||||
|
||||
#statusDesc{
|
||||
width: 150%;
|
||||
padding: 7.77px;
|
||||
padding-right: 13.12px;
|
||||
font-size: 13.12px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
h3{
|
||||
width: 77%;
|
||||
height: 50px;
|
||||
|
||||
font-family: 'karrik';
|
||||
text-transform: uppercase;
|
||||
font-size: 22px;
|
||||
line-height: 1em;
|
||||
|
||||
padding-left: 16.1px;
|
||||
padding-top: 13.12px;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
#aboutSection{
|
||||
padding: 13.12px;
|
||||
padding-right: 33px;
|
||||
font-size: 16.1px;
|
||||
line-height: 1.333em;
|
||||
}
|
||||
|
||||
#eventSection{
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@font-face {
|
||||
font-family: 'karrik';
|
||||
src: url('./assets/typo/Karrik-Italic.woff2') format('woff2');
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'karrik';
|
||||
src: url('./assets/typo/Karrik-Regular.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src: url('./assets/typo/Velvelyne-Book.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'avara';
|
||||
src: url('./assets/typo/Avara-Black.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pressStart';
|
||||
src: url('./assets/typo/PressStart2P-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src:url('./assets/typo/Velvelyne-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'karrik';
|
||||
src: url('/assets/typo/Karrik-Italic.woff2') format('woff2');
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'karrik';
|
||||
src: url('/assets/typo/Karrik-Regular.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src: url('/assets/typo/Velvelyne-Book.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'avara';
|
||||
src: url('/assets/typo/Avara-Black.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pressStart2P';
|
||||
src: url('/assets/typo/PressStart2P-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'velvelyne';
|
||||
src:url('/assets/typo/Velvelyne-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user