edit: version tel sans event + modif à faire + organisation des fichiers + css ouverture du local
This commit is contained in:
+57
-39
@@ -1,10 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="typo.css">
|
<link rel="stylesheet" href="/style/typo.css">
|
||||||
<link rel="stylesheet" href="style.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/perm.css">
|
||||||
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
|
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
|
||||||
<link rel="stylesheet" href="affiches/algorave.css">
|
<link rel="stylesheet" href="affiches/algorave.css">
|
||||||
@@ -14,7 +18,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>
|
<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 aria-hidden="true" class="cool-name">L<span class="trans-symbol">⚧</span>L</span>
|
||||||
<span class="plain-name">L.O.L.</span>
|
<span class="plain-name">L.O.L.</span>
|
||||||
</h1>
|
</h1>
|
||||||
@@ -30,22 +34,24 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="home-section">
|
<section id="homeContent">
|
||||||
<video autoplay muted loop src="./assets/video/close.webm" class="background-video"></video>
|
<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>
|
||||||
<section class="solid-box">
|
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
|
||||||
|
<section id="titleSection" class="solidBox">
|
||||||
<h2>
|
<h2>
|
||||||
Hackerspace queer
|
Hackerspace queer
|
||||||
<small>
|
<small><br>
|
||||||
Lieu de réappropriation, <br>
|
Lieu de réappropriation, <br>
|
||||||
réparation & recyclage <br>
|
réparation & recyclage <br>
|
||||||
des objets techniques <br>
|
des objets techniques <br>
|
||||||
& technologiques
|
& technologiques
|
||||||
</small>
|
</small>
|
||||||
</h2>
|
</h2>
|
||||||
|
</section>
|
||||||
|
|
||||||
<hr>
|
<section id="hourSection" class="solidBox">
|
||||||
|
<h3>Horaires d'ouverture</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>
|
<li>
|
||||||
Dim. <strong>15h → 23h</strong>
|
Dim. <strong>15h → 23h</strong>
|
||||||
@@ -58,13 +64,13 @@
|
|||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
<h3>Nocturne:</h3>
|
<h3>Nocturne</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Ven. <strong>21h → 5h</strong></li>
|
<li>Ven. <strong>21h → 5h</strong></li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<address>
|
<address class="transparentBox">
|
||||||
7 place Chazette<br>
|
7 place Chazette<br>
|
||||||
69001 Lyon<br>
|
69001 Lyon<br>
|
||||||
<br>
|
<br>
|
||||||
@@ -72,8 +78,9 @@
|
|||||||
4° 50' 14.052" E
|
4° 50' 14.052" E
|
||||||
</address>
|
</address>
|
||||||
|
|
||||||
<div class="access">
|
<div id="planSection" class="transparentBox">
|
||||||
<img src="./assets/plan.svg" id="plan">
|
<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">
|
<svg id="fleche" viewBox="0 0 4215.93 2604.36">
|
||||||
<g>
|
<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"/>
|
<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"/>
|
||||||
@@ -95,49 +102,58 @@
|
|||||||
<rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
|
<rect class="cls-1" x=".05" y=".05" width="4215.83" height="2604.26" rx="133.4" ry="133.4" fill="none"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="hackerspace-org">
|
<div id="extLinkSection" class="transparentBox">
|
||||||
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
|
<a href="https://www.hackerspaces.org/" id="hackerLogo" target="_blank">
|
||||||
<img src="/assets/logo_hackerspaces_monde.png">
|
<img src="./assets/logo_hackerspaces_monde.png">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section id="statuSection" class="solidBox">
|
||||||
|
<div id="statusDesc">
|
||||||
<p>
|
<p>
|
||||||
Le LOL est aussi ouvert entre les horaires définis.
|
Le LOL peut ouvrir en dehors des horaires habituels.<br>
|
||||||
En fonction de nos envies et disponibilités.
|
En fonction de nos envies et disponibilités.<br> 
|
||||||
</p>
|
</p>
|
||||||
<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>
|
</p>
|
||||||
|
</div>
|
||||||
|
<h3 id="lolStatus">
|
||||||
|
<small>
|
||||||
|
Le local est actuellement
|
||||||
|
</small>
|
||||||
|
Fermé ...
|
||||||
|
</h3>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="place-description">
|
<section id="extraContent">
|
||||||
|
<section id="aboutSection" class="solidBox">
|
||||||
<p>
|
<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,
|
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>
|
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.
|
Le LOL est un lieu d'exploration des alternatives<br>et de bidouille anti-systèmes.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Au LOL, nous expérimentons et créons autours du détournement, de la réutilisations d'objets en tout genre.
|
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.
|
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 !
|
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>
|
||||||
<p>
|
<p>
|
||||||
Nous revendiquons l'ouverture du code et des techniques,
|
Nous revendiquons l'ouverture du code et des techniques,<br>
|
||||||
le partage des connaissances et l'autogestion,
|
le partage des connaissances et l'autogestion,<br>
|
||||||
l'anti-capitalisme et l'anti-fascisme. <br><br>
|
l'anti-capitalisme et l'anti-fascisme. <br><br>
|
||||||
Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.<br>
|
Nous condamnons donc toute forme de violence<br>et de discrimination dans nos locaux.<br>
|
||||||
Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
|
Tout comportement assimilé pourra, sur décision collective,<br>vous mener à la sortie.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="eventSection" class="transparentBox">
|
||||||
<section class="place-events">
|
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
|
||||||
<h2>Événements <small>à venir</small></h2>
|
<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">
|
<article class="event affiche-perm affiche" property="event" typeof="Event">
|
||||||
<h1 property="name">Permanence du LOL</h1>
|
<h1 property="name">Permanence du LOL</h1>
|
||||||
@@ -339,11 +355,12 @@
|
|||||||
<div class="description" id="jam21062025-description">
|
<div class="description" id="jam21062025-description">
|
||||||
<h1 property="name">JAM OUVERTE</h1>
|
<h1 property="name">JAM OUVERTE</h1>
|
||||||
<p property="description">La fête de la musique approche !
|
<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 !
|
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 !
|
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)
|
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 :)
|
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>
|
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 property="location">7 Place Louis Chazette, proche de Croix-Paquet (Métro C) et Pont De Lattre RD (bus)</p>
|
||||||
<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-21T14:00:00" content="2025-06-21T14:00:00" property="startDate">21 Juin 14h</time>
|
||||||
@@ -423,6 +440,7 @@ Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est p
|
|||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</section>
|
</section>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</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