Passage du site en v333 #3
+57
-39
@@ -1,10 +1,14 @@
|
||||
<!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="/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">
|
||||
@@ -14,7 +18,7 @@
|
||||
<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,22 +34,24 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="home-section">
|
||||
<video autoplay muted loop src="./assets/video/close.webm" class="background-video"></video>
|
||||
|
||||
<section class="solid-box">
|
||||
<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>
|
||||
<small><br>
|
||||
Lieu de réappropriation, <br>
|
||||
réparation & recyclage <br>
|
||||
des objets techniques <br>
|
||||
& technologiques
|
||||
</small>
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="hourSection" class="solidBox">
|
||||
<h3>Horaires d'ouverture</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Dim. <strong>15h → 23h</strong>
|
||||
@@ -58,13 +64,13 @@
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>Nocturne:</h3>
|
||||
<h3>Nocturne</h3>
|
||||
<ol>
|
||||
<li>Ven. <strong>21h → 5h</strong></li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<address>
|
||||
<address class="transparentBox">
|
||||
7 place Chazette<br>
|
||||
69001 Lyon<br>
|
||||
<br>
|
||||
@@ -72,8 +78,9 @@
|
||||
4° 50' 14.052" E
|
||||
</address>
|
||||
|
||||
<div class="access">
|
||||
<img src="./assets/plan.svg" id="plan">
|
||||
<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"/>
|
||||
@@ -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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hackerspace-org">
|
||||
<div id="extLinkSection" class="transparentBox">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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:
|
||||
</p>
|
||||
<p class="status-text">
|
||||
<a href="/status/">Vérifier si le local est ouvert →</a>
|
||||
  Un capteur sur la porte d'entrée indique<br>  si le local est ouvert:
|
||||
</p>
|
||||
</div>
|
||||
<h3 id="lolStatus">
|
||||
<small>
|
||||
Le local est actuellement
|
||||
</small>
|
||||
Fermé ...
|
||||
</h3>
|
||||
</section>
|
||||
|
||||
<section class="place-description">
|
||||
<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 et de bidouille anti-systèmes.
|
||||
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 !
|
||||
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,
|
||||
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 et de discrimination dans nos locaux.<br>
|
||||
Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie.
|
||||
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 class="place-events">
|
||||
<h2>Événements <small>à venir</small></h2>
|
||||
<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>
|
||||
@@ -339,11 +355,12 @@
|
||||
<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>
|
||||
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>
|
||||
@@ -423,6 +440,7 @@ Ramenez vos synthés audio et vidéo, vos ordis ou vos contre-basses, tout est p
|
||||
</script>
|
||||
-->
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</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