Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.
+
+ Venez nous rencontrer, hacker ou bien discuter sur le stand.
+
+
\ No newline at end of file
diff --git a/affiches/jdll2024/agrandir.png b/affiches/jdll2024/agrandir.png
new file mode 100644
index 0000000..acc503b
Binary files /dev/null and b/affiches/jdll2024/agrandir.png differ
diff --git a/affiches/jdll2024/agrandir.svg b/affiches/jdll2024/agrandir.svg
new file mode 100644
index 0000000..e0d0f20
--- /dev/null
+++ b/affiches/jdll2024/agrandir.svg
@@ -0,0 +1,1825 @@
+
+
+
+
↑ ↑ ↑ Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1113ce5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,428 @@
+
+
+
+
+
+
+
+
+
+
+
L(. O.)L — Laboratoire Ouvert Lyonnais
+
+
+
+
+
+ L⚧ L
+ L.O.L.
+
+
+
+
+
+
+
+
+
+
+
+ Hackerspace queer
+
+ Lieu de réappropriation,
+
+
+
+
+ Dim. 15h → 23h
+
+
+ Lun. 15h → 23h
+
+
+ Mar. 15h → 23h
+
+
+
+ Nocturne:
+
+ Ven. 21h → 5h
+
+
+
+
+ 7 place Chazette
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Le LOL est aussi ouvert entre les horaires définis.
+ En fonction de nos envies et disponibilités.
+
+
+ Un capteur sur la porte d'entrée indique si le local est ouvert:
+
+
+ Vérifier si le local est ouvert →
+
+
+
+
+
+ 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.
+
+ 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 !
+
+
+ Nous revendiquons l'ouverture du code et des techniques,
+ le partage des connaissances et l'autogestion,
+ l'anti-capitalisme et l'anti-fascisme.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..ba91393
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,18 @@
+async function importOuverture(){
+ const res = await fetch("/status/index.html")
+ if(!res.ok){
+ throw new Error(`Server responded with status ${res.status} ${res.statusText}`)
+ }
+ let html_text = await res.text()
+ let html = new DOMParser().parseFromString(html_text, "text/html");
+
+ for(let style of html.querySelectorAll("head > style")) {
+ document.head.append(style)
+ }
+
+ let textStatus = html.querySelector("#statusText").textContent;
+ let statusBox = document.querySelector('#statusText');
+ statusBox.textContent = textStatus;
+}
+
+importOuverture()
\ No newline at end of file
diff --git a/status/index.fermé.html b/status/index.fermé.html
new file mode 100644
index 0000000..dec67ee
--- /dev/null
+++ b/status/index.fermé.html
@@ -0,0 +1 @@
+Fermé
\ No newline at end of file
diff --git a/status/index.html b/status/index.html
new file mode 100644
index 0000000..23e8277
--- /dev/null
+++ b/status/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
Le LOL est Ouvert
+
+
+
+ Ouvert !
+
+
+
\ No newline at end of file
diff --git a/status/index.ouvert.html b/status/index.ouvert.html
new file mode 100644
index 0000000..23e8277
--- /dev/null
+++ b/status/index.ouvert.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
Le LOL est Ouvert
+
+
+
+ Ouvert !
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
index a917fda..39dabbb 100644
--- a/style.css
+++ b/style.css
@@ -1,86 +1,13 @@
-:root[data-theme="closed"]{
+:root{
--back-color: #FFFF4D;
--main-color: #000000;
}
-:root[data-theme="open"]{
- --back-color: #00FF44;
- --main-color: #000000;
-}
-
/*====================Typo*/
-@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;
-}
+@import url("typo.css");
/*===================Animation*/
-@keyframes blink {
- 0% { color: var(--main-color);}
- 15% { color: var(--back-color);}
- 35% { color: var(--back-color);}
- 50% { color: var(--main-color);}
- 65% { color: var(--back-color);}
- 85% { color: var(--back-color);}
- 100% { color: var(--main-color);}
-}
-
-@keyframes blinkBack {
- 0% { background-color: var(--back-color);}
- 15% { background-color: var(--main-color);}
- 35% { background-color: var(--main-color);}
- 50% { background-color: var(--back-color);}
- 65% { background-color: var(--main-color);}
- 85% { background-color: var(--main-color);}
- 100% { background-color: var(--back-color);}
-}
-
-@keyframes blinkBorder {
- 0% { border-color: var(--main-color);}
- 15% { border-color: var(--accent-color);}
- 35% { border-color: var(--accent-color);}
- 50% { border-color: var(--main-color);}
- 65% { border-color: var(--accent-color);}
- 85% { border-color: var(--accent-color);}
- 100% { border-color: var(--main-color);}
-}
-
-@keyframes float {
- 0% { transform: translateY(0px); }
- 35% { transform: translateY(1px); }
- 50% { transform: translateY(-10px); }
- 65% { transform: translateY(1px); }
- 100% { transform: translateY(0px); }
-}
+@import url("animation.css");
/*=============Désact défault*/
input {
@@ -109,1365 +36,92 @@ a button{
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;
-
- background-color: var(--main-color);
- width: 100%;
- height:100%;
- position: fixed;
- inset: 0;
- overflow-x: hidden;
- overflow-y: scroll;
- display: block;
scrollbar-color: var(--back-color) var(--main-color);
- scrollbar-width: thin;
- z-index: -33;
-
+ background-color: var(--main-color);
+ min-height: 100vh;
}
-#texture{
- position: fixed;
- inset: 0;
- width: auto;
- height: 100vh;
- pointer-events: none;
- z-index: -2;
- opacity: .333;
- filter: saturate(333%);
-}
+/*============HEADER*/
-#anim{
- position: fixed;
- right: 0;
- bottom: 0;
- width: auto;
- height: 133vh;
- overflow: hidden;
- pointer-events: none;
- z-index: -1;
- opacity: 1;
- filter: contrast(200%) saturate(33%) grayscale();
- transform: rotate(180deg);
- mix-blend-mode: difference;
-
- @media(min-width: 700px){
- height: 200%;
- }
-}
-
-#mainContainer{
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
+header{
width: 100%;
height: auto;
- gap: 0;
-}
-
-/*=====================BUTTONS*/
-.textBtnStyle{
- font-family: 'karrik';
- font-size: 13.12px;
background-color: var(--back-color);
- color: var(--main-color);
- border-color: var(--main-color);
- border-style: solid;
- border-width: 1.75px;
- border-radius: 16.1px;
+
display: flex;
flex-direction: row;
- align-items: center;
- justify-content: space-around;
-}
-
-.textBtnStyle:hover{
- background-color: var(--main-color);
- color: var(--back-color);
- font-weight: bold;
-}
-
-.iconBtnStyle{
- background-color: var(--back-color);
- color: var(--main-color);
- border-color: var(--main-color);
- border-style: solid;
- border-width: thin;
- border-radius: 0;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
-}
-
-.iconBtnStyle:hover{
- background-color: var(--main-color);
- color: var(--back-color);
-}
-
-/*==============FENETRES*/
-.windowStyle{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- background-color: var(--back-color);
- border-style: solid;
- border-width: thin;
- border-radius: 16.1px;
- border-color: var(--main-color);
- overflow: hidden;
-}
-
-.zBase{
- z-index: 333;
-}
-
-.zFocus{
- z-index: revert;
- z-index: 1312;
-}
-
-.windowTitle{
- width:100%;
- height:50px;
- background-color: var(--main-color);
- border-radius: 0;
- font-family: 'velvelyne';
- font-weight: bold;
- text-transform: uppercase;
- font-size: 22px;
- color: var(--back-color);
- display: flex;
- flex-direction: row;
- align-items: center;
justify-content: space-between;
- box-sizing: border-box;
- padding-left: 10px;
- padding-right: 10px;
- cursor: move;
-}
-
-
-.windowTitleLower{
- font-family: 'velvelyne';
- font-weight: bold;
- font-size: 13.12px;
-}
-
-.closeBtn{
- color: var(--back-color);
- background-color: var(--main-color);
- border-style: solid;
- border-width: thin;
- border-radius: 16.1px;
- border-color: var(--back-color);
- width: 33px;
- height: 33px;
- align-items: center;
-}
-
-.closeBtn:hover{
- color: var(--main-color);
- background-color: var(--back-color);
-}
-
-.windowContent{
- height:77%;
- width:100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
-}
-
-/*=============INTERFACE*/
-.uiStyle{
- background-color: var(--back-color);
- border-color: var(--main-color);
- border-style: solid;
- border-width: thin;
-}
-
-.icon{
- height: 16.1px;
- width: auto;
- fill: currentColor;
- pointer-events: none;
-}
-
-#topBar{
- position: relative;
- top: 0;
- left: 0;
- width: 100vw;
- height: 55px;
- z-index: 333;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- color: var(--main-color);
- padding-left: 7.77px;
- padding-right: 16.1px;
- gap: 7.77px;
- box-sizing: border-box;
-
- p{
- font-family: 'pressStart2P';
- font-size: 40px;
- font-weight: bold;
- padding-top: 13.12px;
-
- strong{
- font-family: 'velvelyne';
- margin-top: -3.33px;
- font-size: 50px;
- }
-
- }
-
- #mainLogo{
- height: auto;
- width: 50px;
- }
-
- .left{
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- width: auto;
- gap: 7.77px;
- height: 100%;
- }
-
- .right{
- display: none;
- visibility: collapse;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- width:33%;
- height: 200px;
- position: absolute;
- top: 55px;
- right: 3.33px;
- z-index: 3;
-
- .textBtnStyle{
- width: 16.1%;
- min-width: 93px;
- height: 33px;
- text-transform: uppercase;
- }
-
- .textBtnStyle:hover{
- border-color: var(--back-color);
- }
- }
-
- .iconBtnStyle{
- width: 33px;
- height: 33px;
- }
-
- #menuBtn{
- .icon.rotated{
- transform: rotate(0);
- }
-
- .icon{
- transform: rotate(45deg);
- }
- }
-
- @media(min-width: 700px){
- #menuBtn{
- display: none;
- visibility: collapse;
- }
-
- .right{
- display: flex;
- visibility: visible;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- width:70%;
- height: 100%;
- position: relative;
- top: 0;
- left: 0;
- }
- }
-}
-
-#mainInfo{
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 2fr 1fr;
- grid-template-areas:
- "topL topR"
- "midL midR"
- "botL botR";
- box-sizing: border-box;
- width: 100vw;
- height: auto;
- align-items: stretch;
-
-
-
- .uiStyle{
- width:100%;
- height: auto;
- padding-left: 7.77px;
- box-sizing: border-box;
- font-family: 'velvelyne';
- font-size: 13.12px;
- font-weight: bold;
- }
-
- #planContainer{
- width: 200%;
- height: auto;
- color: var(--back-color);
- display: flex;
- flex-direction: column;
- align-items: center;
-
- #plan{
- position: relative;
- width: 90%;
-
- margin-bottom: 13.12px;
- }
- #fleche{
- position: absolute;
-
- width: 90%;
- fill: currentColor;
- z-index: -1;
- }
- @media(max-width: 700px){
- grid-row: 2;
- grid-column: 1 / 2;
- }
- }
-
- #title{
- grid-area: topL;
- font-size: 22px;
- line-height: .7;
- height: 100%;
-
- #desc{
- font-family: 'velvelyne';
- font-style: normal;
- font-size: 13.12px;
- line-height: 1em;
- text-transform: uppercase;
-
- }
- }
-
- #address{
- grid-area: topR;
- font-family: 'karrik';
- color: var(--back-color);
- font-style: normal;
- font-size: 13.12px;
- line-height: 1em;
- text-transform: uppercase;
- padding-left: 13.12px;
- mix-blend-mode: exclusion;
-
- #hackerLogo{
- width: 77px;
- height: 50px;
- display:inline-block;
- position: absolute;
- right: 13.12px;
- top: 117px;
- z-index: 33;
-
- img{
- width: 77px;
- height: auto;
- pointer-events: none;
- cursor: inherit;
- }
- }
-
- }
-
- #openingHours{
- grid-area: botL;
- text-align: right;
- padding-right: 13.12px;
- font-weight: normal;
- line-height: 1em;
- margin-top: -13.12px;
-
- strong{
- font-weight: bold;
- }
- }
-
- #lolOpener{
- grid-area: botR;
- font-weight: normal;
- padding-right: 7.77px;
- line-height: 1em;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- position: relative;
- gap: 0;
- height: auto;
-
- .lolStatus{
- width: 90%;
- height: 44px;
- background-color: var(--main-color);
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- border-radius: 22px;
- margin-right: 0;
- position: absolute;
- margin-top: -10vh;
-
- #openStatus{
- font-family: 'pressStart2P';
- font-size: 16.1px;
- color: var(--back-color);
- animation: blink 3.33s infinite;
- text-transform: uppercase;
- mix-blend-mode: screen;
- }
-
- #closedStatus{
- font-family: 'pressStart2P';
- font-size: 16.1px;
- color: var(--back-color);
- animation: none;
- text-transform: uppercase;
- mix-blend-mode: screen;
- }
-
- @media(min-width: 700px){
-
- width: 33%;
- margin-right: 77px;
- position: relative;
- margin-top: 0;
-
- }
- }
- }
-
- @media(min-width: 700px){
- grid-template-columns: 1fr 2fr;
- grid-template-rows: 161px 222px 77px;
- height: auto;
-
- .uiStyle{
- font-size: 16.1px;
- }
-
- #planContainer{
- height: 90%;
- width: auto;
- grid-row: 2;
- grid-column: 2;
- margin-left: 0;
- margin-top: -100px;
-
- #plan{
- width:90%;
- height: auto;
- margin-bottom: 0;
- max-height: 333px;
-
- }
- #fleche{
- width:60%;
- height: auto;
- box-sizing: border-box;
- max-height: 333px;
- }
- }
-
- #openingHours{
- grid-area: midL;
- height: 60%
- }
-
- #lolOpener{
- width: 300%;
- grid-column: 1 / 2;
- grid-row: 3;
- flex-direction: row;
- gap: 7.77px;
- align-items: center;
- justify-content: space-between;
- padding-left: 16.1px;
- height: 77px;
-
- #desc{
- width: 44%;
- box-sizing: border-box;
- }
- }
-
- #title{
- margin-bottom: 3.33px;
- font-size: 27px;
- line-height: 0;
-
- #desc{
- font-size: 16.1px;
- }
- }
-
- #address #hackerLogo{
- grid-area: midL;
- position: relative;
- top: 0;
- left: 7.77px;
- right: unset;
- }
- }
-
- @media(min-width: 1300px){
- grid-template-rows: 222px 500px 77px;
-
- .uiStyle{
- font-size: 16.1px;
- }
-
- #lolOpener{
- font-size: 22px;
- }
- #address{
- font-size: 22px;
-
- #hackerLogo{
- width: 117px;
- }
- }
- #openingHours{
- font-size: 33px;
- }
-
- #title{
- margin-bottom: 3.33px;
- font-size: 44px;
- line-height: 0;
-
- #desc{
- font-size: 22px;
- }
- :root[data-theme="closed"]{
- --back-color: #FFFF4D;
- --main-color: #000000;
- }
-
- :root[data-theme="open"]{
- --back-color: #00FF44;
- --main-color: #000000;
- }
-
- /*====================Typo*/
- @font-face {
- font-family: 'karrik';
- src: url('./typo/Karrik-Italic.woff2').format('woff2');
- font-style: italic;
- }
-
- @font-face {
- font-family: 'karrik';
- src: url('./typo/Karrik-Regular.woff2') format('woff2');
- font-style: normal;
- }
-
- @font-face {
- font-family: 'velvelyne';
- src: url('./typo/Velvelyne-Book.ttf') format('truetype');
- font-weight: normal;
- }
-
- @font-face {
- font-family: 'avara';
- src: url('./typo/Avara-Black.woff2') format('woff2');
- }
-
- @font-face {
- font-family: 'pressStart2P';
- src: url('./typo/PressStart2P-Regular.ttf') format('truetype');
- }
-
- @font-face {
- font-family: 'velvelyne';
- src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
- font-weight: bold;
- }
-
- /*===================Animation*/
- @keyframes blink {
- 0% { color: var(--back-color);}
- 15% { color: var(--main-color);}
- 35% { color: var(--main-color);}
- 50% { color: var(--back-color);}
- 65% { color: var(--main-color);}
- 85% { color: var(--main-color);}
- 100% { color: var(--back-color);}
- }
-
- @keyframes blinkBack {
- 0% { background-color: var(--back-color);}
- 15% { background-color: var(--main-color);}
- 35% { background-color: var(--main-color);}
- 50% { background-color: var(--back-color);}
- 65% { background-color: var(--main-color);}
- 85% { background-color: var(--main-color);}
- 100% { background-color: var(--back-color);}
- }
-
- @keyframes blinkBorder {
- 0% { border-color: var(--main-color);}
- 15% { border-color: var(--accent-color);}
- 35% { border-color: var(--accent-color);}
- 50% { border-color: var(--main-color);}
- 65% { border-color: var(--accent-color);}
- 85% { border-color: var(--accent-color);}
- 100% { border-color: var(--main-color);}
- }
-
- @keyframes float {
- 0% { transform: translateY(0px); }
- 35% { transform: translateY(1px); }
- 50% { transform: translateY(-10px); }
- 65% { transform: translateY(1px); }
- 100% { transform: translateY(0px); }
- }
-
- /*=============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;
- }
-
- .dg{
- display: none !important;
- height: 0;
- overflow: hidden;
- }
-
- /*==========================Moveable*/
- .moveable-control-box {
- display: none !important;
- }
-
- /*=============Body & background*/
- html, body{
- margin: 0;
- padding: 0;
-
- background-color: var(--main-color);
- width: 100%;
- height:100%;
- position: fixed;
- inset: 0;
- overflow-x: hidden;
- overflow-y: scroll;
- display: block;
- scrollbar-color: var(--back-color) var(--main-color);
- scrollbar-width: thin;
- z-index: -33;
-
- }
-
- #canvas{
- position: fixed;
- inset: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- mix-blend-mode: screen;
- z-index: -2;
- opacity: .25;
- filter: saturate(333%);
- }
-
- #background{
- position: fixed;
- right: 0;
- bottom: 0;
- width: auto;
- height: 133%;
- overflow: hidden;
- pointer-events: none;
- z-index: -1;
- opacity: 1;
- visibility: hidden;
- filter: contrast(200%) saturate(33%) grayscale();
- transform: rotate(180deg);
- mix-blend-mode: difference;
-
- @media(min-width: 700px){
- height: 200%;
- }
- }
-
- #mainContainer{
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- width: 100%;
- height: auto;
- gap: 0;
- }
-
- /*=====================BUTTONS*/
- .textBtnStyle{
- font-family: 'karrik';
- font-size: 13.12px;
- background-color: var(--back-color);
- color: var(--main-color);
- border-color: var(--main-color);
- border-style: solid;
- border-width: 1.75px;
- border-radius: 16.1px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- }
-
- .textBtnStyle:hover{
- background-color: var(--main-color);
- color: var(--back-color);
- font-weight: bold;
- }
-
- .iconBtnStyle{
- background-color: var(--back-color);
- color: var(--main-color);
- border-color: var(--main-color);
- border-style: solid;
- border-width: thin;
- border-radius: 0;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- }
-
- .iconBtnStyle:hover{
- background-color: var(--main-color);
- color: var(--back-color);
- }
-
- /*==============FENETRES*/
- .windowStyle{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- background-color: var(--back-color);
- border-style: solid;
- border-width: thin;
- border-radius: 16.1px;
- border-color: var(--main-color);
- overflow: hidden;
- }
-
- .zBase{
- z-index: 333;
- }
-
- .zFocus{
- z-index: revert;
- z-index: 1312;
- }
-
- .windowTitle{
- width:100%;
- height:50px;
- background-color: var(--main-color);
- border-radius: 0;
- font-family: 'velvelyne';
- font-weight: bold;
- text-transform: uppercase;
- font-size: 22px;
- color: var(--back-color);
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
- padding-left: 10px;
- padding-right: 10px;
- cursor: move;
- }
-
-
- .windowTitleLower{
- font-family: 'velvelyne';
- font-weight: bold;
- font-size: 13.12px;
- }
-
- .closeBtn{
- color: var(--back-color);
- background-color: var(--main-color);
- border-style: solid;
- border-width: thin;
- border-radius: 16.1px;
- border-color: var(--back-color);
- width: 33px;
- height: 33px;
- align-items: center;
- }
-
- .closeBtn:hover{
- color: var(--main-color);
- background-color: var(--back-color);
- }
-
- .windowContent{
- height:77%;
- width:100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- }
-
- /*=============INTERFACE*/
- .uiStyle{
- background-color: var(--back-color);
- border-color: var(--main-color);
- border-style: solid;
- border-width: thin;
- }
-
- .icon{
- height: 16.1px;
- width: auto;
- fill: currentColor;
- pointer-events: none;
- }
-
- #topBar{
- position: relative;
- top: 0;
- left: 0;
- width: 100vw;
- height: 50px;
- z-index: 333;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- color: var(--main-color);
- padding-left: 7.77px;
- padding-right: 16.1px;
- gap: 7.77px;
- box-sizing: border-box;
-
- p{
- font-family: 'velvelyne';
- font-size: 40px;
- font-weight: bold;
- padding-top: 7.77px;
- }
-
- #mainLogo{
- height: auto;
- width: 50px;
- }
-
- .left{
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- width: auto;
- gap: 7.77px;
- height: 100%;
- }
-
- .right{
- display: none;
- visibility: collapse;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- width:33%;
- height: 200px;
- position: absolute;
- top: 55px;
- right: 3.33px;
- z-index: 3;
-
- .textBtnStyle{
- width: 16.1%;
- min-width: 93px;
- height: 33px;
- text-transform: uppercase;
- }
-
- .textBtnStyle:hover{
- border-color: var(--back-color);
- }
- }
-
- .iconBtnStyle{
- width: 33px;
- height: 33px;
- }
-
- #menuBtn{
- .icon.rotated{
- transform: rotate(0);
- }
-
- .icon{
- transform: rotate(45deg);
- }
- }
-
- @media(min-width: 700px){
- #menuBtn{
- display: none;
- visibility: collapse;
- }
-
- .right{
- display: flex;
- visibility: visible;
- flex-direction: row;
- align-items: center;
- justify-content: space-around;
- width:70%;
- height: 100%;
- position: relative;
- top: 0;
- left: 0;
- }
- }
- }
-
- #mainInfo{
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 2fr 1fr;
- grid-template-areas:
- "topL topR"
- "midL midR"
- "botL botR";
- box-sizing: border-box;
- width: 100vw;
- height: auto;
- align-items: stretch;
-
-
-
- .uiStyle{
- width:100%;
- height: auto;
- padding-left: 7.77px;
- box-sizing: border-box;
- font-family: 'velvelyne';
- font-size: 13.12px;
- font-weight: bold;
- }
-
- #planContainer{
- width: 200%;
- height: auto;
- color: var(--back-color);
- display: flex;
- flex-direction: column;
- align-items: center;
-
- #plan{
- position: relative;
- width: 90%;
-
- margin-bottom: 13.12px;
- }
- #fleche{
- position: absolute;
-
- width: 90%;
- fill: currentColor;
- z-index: -1;
- }
- @media(max-width: 700px){
- grid-row: 2;
- grid-column: 1 / 2;
- }
- }
-
- #title{
- grid-area: topL;
- font-size: 22px;
- line-height: .7;
- height: 100%;
-
- #desc{
- font-family: 'velvelyne';
- font-style: normal;
- font-size: 13.12px;
- line-height: 1em;
- text-transform: uppercase;
-
- }
- }
-
- #address{
- grid-area: topR;
- font-family: 'karrik';
- color: var(--back-color);
- font-style: normal;
- font-size: 13.12px;
- line-height: 1em;
- text-transform: uppercase;
- padding-left: 13.12px;
- mix-blend-mode: exclusion;
-
- #hackerLogo{
- width: 77px;
- height: 50px;
- display:inline-block;
- position: absolute;
- right: 13.12px;
- top: 117px;
- z-index: 33;
-
- img{
- width: 77px;
- height: auto;
- pointer-events: none;
- cursor: inherit;
- }
- }
-
- }
-
- #openingHours{
- grid-area: botL;
- text-align: right;
- padding-right: 13.12px;
- font-weight: normal;
- line-height: 1em;
- margin-top: -13.12px;
-
- strong{
- font-weight: bold;
- }
- }
-
- #lolOpener{
- grid-area: botR;
- font-weight: normal;
- padding-right: 7.77px;
- line-height: 1em;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- position: relative;
- gap: 0;
- height: auto;
- }
-
- @media(min-width: 700px){
- grid-template-columns: 1fr 2fr;
- grid-template-rows: 161px 222px 77px;
- height: auto;
-
- .uiStyle{
- font-size: 16.1px;
- }
-
- #planContainer{
- height: 90%;
- width: auto;
- grid-row: 2;
- grid-column: 2;
- margin-left: 0;
- margin-top: -100px;
-
- #plan{
- width:90%;
- height: auto;
- margin-bottom: 0;
- max-height: 333px;
-
- }
- #fleche{
- width:60%;
- height: auto;
- box-sizing: border-box;
- max-height: 333px;
- }
- }
-
- #openingHours{
- grid-area: midL;
- height: 60%
- }
-
- #lolOpener{
- width: 300%;
- grid-column: 1 / 2;
- grid-row: 3;
- flex-direction: row;
- gap: 7.77px;
- align-items: center;
- justify-content: space-between;
- padding-left: 16.1px;
- height: 77px;
-
- #desc{
- width: 44%;
- box-sizing: border-box;
- }
- }
-
- #title{
- margin-bottom: 3.33px;
- font-size: 27px;
- line-height: 0;
-
- #desc{
- font-size: 16.1px;
- }
- }
-
- #address #hackerLogo{
- grid-area: midL;
- position: relative;
- top: 0;
- left: 7.77px;
- right: unset;
- }
- }
-
- @media(min-width: 1300px){
- grid-template-rows: 222px 500px 77px;
-
- .uiStyle{
- font-size: 16.1px;
- }
-
- #lolOpener{
- font-size: 22px;
- }
- #address{
- font-size: 22px;
-
- #hackerLogo{
- width: 117px;
- }
- }
- #openingHours{
- font-size: 33px;
- }
-
- #title{
- margin-bottom: 3.33px;
- font-size: 44px;
- line-height: 0;
-
- #desc{
- font-size: 22px;
- }
- }
-
- #planContainer {
- margin-top: -117px;
- margin-bottom: 77px;
-
- #fleche{
- width: 60%;
- max-height: 666px;
- }
-
- #plan{
- max-height: 666px;
- }
- }
- }
- }
-
- #aboutSection{
- position: relative;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- justify-content: flex-start;
- box-sizing: border-box;
- height: 50vh;
-
- #aboutText{
- width: 60%;
- height: auto;
- padding-left: 13.12px;
- padding-right: 13.12px;
- padding-bottom: 13.12px;
- overflow-y: scroll;
-
- @media(min-width: 700px){
- height: 60vh;
- }
- @media(min-width: 1300px){
- height: 50vh;
- padding-left: 33px;
- }
-
- p{
- font-family: 'velvelyne';
- font-weight: normal;
- font-size: 13.12px;
- color: var(--main-color);
-
- @media(min-width: 1300px){
- font-size: 20px;
- }
- }
- }
-
- #eventSection{
- width: 40%;
- height: 100%;
- position: relative;
-
- #title{
- height: 44px;
- padding-top: 7.77px;
- padding-left: 7.77px;
- box-sizing: border-box;
- font-family: 'karrik';
- font-style: italic;
- font-size: 13.12px;
- text-transform: uppercase;
- color: var(--main-color);
- pointer-events: none !important;
- cursor: inherit;
- }
- }
- }
- }
-
- #planContainer {
- margin-top: -117px;
- margin-bottom: 77px;
-
- #fleche{
- width: 60%;
- max-height: 666px;
- }
-
- #plan{
- max-height: 666px;
- }
- }
- }
-}
-
-#aboutSection{
- position: relative;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: row;
align-items: flex-start;
- justify-content: flex-start;
+ padding: 7.77px;
box-sizing: border-box;
- height: 50vh;
- #aboutText{
- width: 60%;
- height: auto;
+ 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;
- padding-right: 13.12px;
- padding-bottom: 13.12px;
- overflow-y: scroll;
+ box-sizing: border-box;
+ border-radius: 16.1px;
+ border-style: solid;
+ border-width: thin;
+ border-color: var(--main-color);
- @media(min-width: 700px){
- height: 60vh;
- }
- @media(min-width: 1300px){
- height: 50vh;
- padding-left: 33px;
- }
-
- p{
- font-family: 'velvelyne';
- font-weight: normal;
- font-size: 13.12px;
- color: var(--main-color);
-
- @media(min-width: 1300px){
- font-size: 20px;
- }
- }
+ font-family: 'karrik';
+ font-size: 16.1px;
+ color: var(--main-color);
+ margin-bottom: 3.33px;
+ text-transform: uppercase;
}
- #eventSection{
- width: 40%;
+ 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%;
- position: relative;
- #title{
- height: 44px;
- padding-top: 7.77px;
- padding-left: 7.77px;
- box-sizing: border-box;
- font-family: 'karrik';
- font-style: italic;
- font-size: 13.12px;
- text-transform: uppercase;
- color: var(--main-color);
- pointer-events: none !important;
- cursor: inherit;
- }
+ strong{
+ font-family: 'velvelyne';
+ }
+
+ img{
+ height: 77px;
+ width: auto;
+ }
}
-}
+
+
+ .plain-name{
+ position: relative;
+ opacity: 0;
+ z-index: -34;
+ }
+}
\ No newline at end of file
diff --git a/style.old.css b/style.old.css
new file mode 100644
index 0000000..8068baa
--- /dev/null
+++ b/style.old.css
@@ -0,0 +1,1233 @@
+:root{
+ --back-color: #FFFF4D;
+ --main-color: #000000;
+}
+
+/*====================Typo*/
+@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;
+}
+
+/*===================Animation*/
+@keyframes blink {
+ 0% { color: var(--main-color);}
+ 15% { color: var(--back-color);}
+ 35% { color: var(--back-color);}
+ 50% { color: var(--main-color);}
+ 65% { color: var(--back-color);}
+ 85% { color: var(--back-color);}
+ 100% { color: var(--main-color);}
+}
+
+@keyframes blinkBack {
+ 0% { background-color: var(--back-color);}
+ 15% { background-color: var(--main-color);}
+ 35% { background-color: var(--main-color);}
+ 50% { background-color: var(--back-color);}
+ 65% { background-color: var(--main-color);}
+ 85% { background-color: var(--main-color);}
+ 100% { background-color: var(--back-color);}
+}
+
+@keyframes blinkBorder {
+ 0% { border-color: var(--main-color);}
+ 15% { border-color: var(--accent-color);}
+ 35% { border-color: var(--accent-color);}
+ 50% { border-color: var(--main-color);}
+ 65% { border-color: var(--accent-color);}
+ 85% { border-color: var(--accent-color);}
+ 100% { border-color: var(--main-color);}
+}
+
+@keyframes float {
+ 0% { transform: translateY(0px); }
+ 35% { transform: translateY(1px); }
+ 50% { transform: translateY(-10px); }
+ 65% { transform: translateY(1px); }
+ 100% { transform: translateY(0px); }
+}
+
+/*=============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;
+}
+
+/*=============Body & background*/
+html, body{
+ margin: 0;
+ padding: 0;
+
+ background-color: var(--main-color);
+ width: 100%;
+ height:100%;
+ position: fixed;
+ inset: 0;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ display: block;
+ scrollbar-color: var(--back-color) var(--main-color);
+ scrollbar-width: thin;
+ z-index: -33;
+
+}
+
+#texture{
+ position: fixed;
+ inset: 0;
+ width: auto;
+ height: 100vh;
+ pointer-events: none;
+ z-index: -2;
+ opacity: .333;
+ filter: saturate(333%);
+}
+
+#anim{
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ width: auto;
+ height: 133vh;
+ overflow: hidden;
+ pointer-events: none;
+ z-index: -1;
+ opacity: 1;
+ filter: contrast(200%) saturate(33%) grayscale();
+ transform: rotate(180deg);
+ mix-blend-mode: difference;
+
+ @media(min-width: 700px){
+ height: 200%;
+ }
+}
+
+#mainContainer{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ width: 100%;
+ height: auto;
+ gap: 0;
+}
+
+/*=====================BUTTONS*/
+.textBtnStyle{
+ font-family: 'karrik';
+ font-size: 13.12px;
+ background-color: var(--back-color);
+ color: var(--main-color);
+ border-color: var(--main-color);
+ border-style: solid;
+ border-width: 1.75px;
+ border-radius: 16.1px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.textBtnStyle:hover{
+ background-color: var(--main-color);
+ color: var(--back-color);
+ font-weight: bold;
+}
+
+.iconBtnStyle{
+ background-color: var(--back-color);
+ color: var(--main-color);
+ border-color: var(--main-color);
+ border-style: solid;
+ border-width: thin;
+ border-radius: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.iconBtnStyle:hover{
+ background-color: var(--main-color);
+ color: var(--back-color);
+}
+
+/*==============FENETRES*/
+.windowStyle{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: var(--back-color);
+ border-style: solid;
+ border-width: thin;
+ border-radius: 16.1px;
+ border-color: var(--main-color);
+ overflow: hidden;
+}
+
+.zBase{
+ z-index: 333;
+}
+
+.zFocus{
+ z-index: revert;
+ z-index: 1312;
+}
+
+.windowTitle{
+ width:100%;
+ height:50px;
+ background-color: var(--main-color);
+ border-radius: 0;
+ font-family: 'velvelyne';
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 22px;
+ color: var(--back-color);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding-left: 10px;
+ padding-right: 10px;
+ cursor: move;
+}
+
+
+.windowTitleLower{
+ font-family: 'velvelyne';
+ font-weight: bold;
+ font-size: 13.12px;
+}
+
+.closeBtn{
+ color: var(--back-color);
+ background-color: var(--main-color);
+ border-style: solid;
+ border-width: thin;
+ border-radius: 16.1px;
+ border-color: var(--back-color);
+ width: 33px;
+ height: 33px;
+ align-items: center;
+}
+
+.closeBtn:hover{
+ color: var(--main-color);
+ background-color: var(--back-color);
+}
+
+.windowContent{
+ height:77%;
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+/*=============INTERFACE*/
+.uiStyle{
+ background-color: var(--back-color);
+ border-color: var(--main-color);
+ border-style: solid;
+ border-width: thin;
+}
+
+.icon{
+ height: 16.1px;
+ width: auto;
+ fill: currentColor;
+ pointer-events: none;
+}
+
+#topBar{
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 55px;
+ z-index: 333;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--main-color);
+ padding-left: 7.77px;
+ padding-right: 16.1px;
+ gap: 7.77px;
+ box-sizing: border-box;
+
+ p{
+ font-family: 'pressStart2P';
+ font-size: 40px;
+ font-weight: bold;
+ padding-top: 13.12px;
+
+ strong{
+ font-family: 'velvelyne';
+ margin-top: -3.33px;
+ font-size: 50px;
+ }
+
+ }
+
+ #mainLogo{
+ height: auto;
+ width: 50px;
+ }
+
+ .left{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ width: auto;
+ gap: 7.77px;
+ height: 100%;
+ }
+
+ .right{
+ display: none;
+ visibility: collapse;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ width:33%;
+ height: 200px;
+ position: absolute;
+ top: 55px;
+ right: 3.33px;
+ z-index: 3;
+
+ .textBtnStyle{
+ width: 16.1%;
+ min-width: 93px;
+ height: 33px;
+ text-transform: uppercase;
+ }
+
+ .textBtnStyle:hover{
+ border-color: var(--back-color);
+ }
+ }
+
+ .iconBtnStyle{
+ width: 33px;
+ height: 33px;
+ }
+
+ #menuBtn{
+ .icon.rotated{
+ transform: rotate(0);
+ }
+
+ .icon{
+ transform: rotate(45deg);
+ }
+ }
+
+ @media(min-width: 700px){
+ #menuBtn{
+ display: none;
+ visibility: collapse;
+ }
+
+ .right{
+ display: flex;
+ visibility: visible;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ width:70%;
+ height: 100%;
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ }
+}
+
+#mainInfo{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 2fr 1fr;
+ grid-template-areas:
+ "topL topR"
+ "midL midR"
+ "botL botR";
+ box-sizing: border-box;
+ width: 100vw;
+ height: auto;
+ align-items: stretch;
+
+
+
+ .uiStyle{
+ width:100%;
+ height: auto;
+ padding-left: 7.77px;
+ box-sizing: border-box;
+ font-family: 'velvelyne';
+ font-size: 13.12px;
+ font-weight: bold;
+ }
+
+ #planContainer{
+ width: 200%;
+ height: auto;
+ color: var(--back-color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ #plan{
+ position: relative;
+ width: 90%;
+
+ margin-bottom: 13.12px;
+ }
+ #fleche{
+ position: absolute;
+
+ width: 90%;
+ fill: currentColor;
+ z-index: -1;
+ }
+ @media(max-width: 700px){
+ grid-row: 2;
+ grid-column: 1 / 2;
+ }
+ }
+
+ #title{
+ grid-area: topL;
+ font-size: 22px;
+ line-height: .7;
+ height: 100%;
+
+ #desc{
+ font-family: 'velvelyne';
+ font-style: normal;
+ font-size: 13.12px;
+ line-height: 1em;
+ text-transform: uppercase;
+
+ }
+ }
+
+ #address{
+ grid-area: topR;
+ font-family: 'karrik';
+ color: var(--back-color);
+ font-style: normal;
+ font-size: 13.12px;
+ line-height: 1em;
+ text-transform: uppercase;
+ padding-left: 13.12px;
+ mix-blend-mode: exclusion;
+
+ #hackerLogo{
+ width: 77px;
+ height: 50px;
+ display:inline-block;
+ position: absolute;
+ right: 13.12px;
+ top: 117px;
+ z-index: 33;
+
+ img{
+ width: 77px;
+ height: auto;
+ pointer-events: none;
+ cursor: inherit;
+ }
+ }
+
+ }
+
+ #openingHours{
+ grid-area: botL;
+ text-align: right;
+ padding-right: 13.12px;
+ font-weight: normal;
+ line-height: 1em;
+ margin-top: -13.12px;
+
+ strong{
+ font-weight: bold;
+ }
+ }
+
+ #lolOpener{
+ grid-area: botR;
+ font-weight: normal;
+ padding-right: 7.77px;
+ line-height: 1em;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
+ gap: 0;
+ height: auto;
+
+ .lolStatus{
+ width: 90%;
+ height: 44px;
+ background-color: var(--main-color);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ border-radius: 22px;
+ margin-right: 0;
+ position: absolute;
+ margin-top: -10vh;
+
+ #openStatus{
+ font-family: 'pressStart2P';
+ font-size: 16.1px;
+ color: var(--back-color);
+ animation: blink 3.33s infinite;
+ text-transform: uppercase;
+ mix-blend-mode: screen;
+ }
+
+ #closedStatus{
+ font-family: 'pressStart2P';
+ font-size: 16.1px;
+ color: var(--back-color);
+ animation: none;
+ text-transform: uppercase;
+ mix-blend-mode: screen;
+ }
+
+ @media(min-width: 700px){
+
+ width: 33%;
+ margin-right: 77px;
+ position: relative;
+ margin-top: 0;
+
+ }
+ }
+ }
+
+ @media(min-width: 700px){
+ grid-template-columns: 1fr 2fr;
+ grid-template-rows: 161px 222px 77px;
+ height: auto;
+
+ .uiStyle{
+ font-size: 16.1px;
+ }
+
+ #planContainer{
+ height: 90%;
+ width: auto;
+ grid-row: 2;
+ grid-column: 2;
+ margin-left: 0;
+ margin-top: -100px;
+
+ #plan{
+ width:90%;
+ height: auto;
+ margin-bottom: 0;
+ max-height: 333px;
+
+ }
+ #fleche{
+ width:60%;
+ height: auto;
+ box-sizing: border-box;
+ max-height: 333px;
+ }
+ }
+
+ #openingHours{
+ grid-area: midL;
+ height: 60%
+ }
+
+ #lolOpener{
+ width: 300%;
+ grid-column: 1 / 2;
+ grid-row: 3;
+ flex-direction: row;
+ gap: 7.77px;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 16.1px;
+ height: 77px;
+
+ #desc{
+ width: 44%;
+ box-sizing: border-box;
+ }
+ }
+
+ #title{
+ margin-bottom: 3.33px;
+ font-size: 27px;
+ line-height: 0;
+
+ #desc{
+ font-size: 16.1px;
+ }
+ }
+
+ #address #hackerLogo{
+ grid-area: midL;
+ position: relative;
+ top: 0;
+ left: 7.77px;
+ right: unset;
+ }
+ }
+
+ @media(min-width: 1300px){
+ grid-template-rows: 222px 500px 77px;
+
+ .uiStyle{
+ font-size: 16.1px;
+ }
+
+ #lolOpener{
+ font-size: 22px;
+ }
+ #address{
+ font-size: 22px;
+
+ #hackerLogo{
+ width: 117px;
+ }
+ }
+ #openingHours{
+ font-size: 33px;
+ }
+
+ #title{
+ margin-bottom: 3.33px;
+ font-size: 44px;
+ line-height: 0;
+
+ #desc{
+ font-size: 22px;
+ }
+
+ #mainContainer{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ width: 100%;
+ height: auto;
+ gap: 0;
+ }
+
+ /*=====================BUTTONS*/
+ .textBtnStyle{
+ font-family: 'karrik';
+ font-size: 13.12px;
+ background-color: var(--back-color);
+ color: var(--main-color);
+ border-color: var(--main-color);
+ border-style: solid;
+ border-width: 1.75px;
+ border-radius: 16.1px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ }
+
+ .textBtnStyle:hover{
+ background-color: var(--main-color);
+ color: var(--back-color);
+ font-weight: bold;
+ }
+
+ .iconBtnStyle{
+ background-color: var(--back-color);
+ color: var(--main-color);
+ border-color: var(--main-color);
+ border-style: solid;
+ border-width: thin;
+ border-radius: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ }
+
+ .iconBtnStyle:hover{
+ background-color: var(--main-color);
+ color: var(--back-color);
+ }
+
+ /*==============FENETRES*/
+ .windowStyle{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ background-color: var(--back-color);
+ border-style: solid;
+ border-width: thin;
+ border-radius: 16.1px;
+ border-color: var(--main-color);
+ overflow: hidden;
+ }
+
+ .zBase{
+ z-index: 333;
+ }
+
+ .zFocus{
+ z-index: revert;
+ z-index: 1312;
+ }
+
+ .windowTitle{
+ width:100%;
+ height:50px;
+ background-color: var(--main-color);
+ border-radius: 0;
+ font-family: 'velvelyne';
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 22px;
+ color: var(--back-color);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding-left: 10px;
+ padding-right: 10px;
+ cursor: move;
+ }
+
+
+ .windowTitleLower{
+ font-family: 'velvelyne';
+ font-weight: bold;
+ font-size: 13.12px;
+ }
+
+ .closeBtn{
+ color: var(--back-color);
+ background-color: var(--main-color);
+ border-style: solid;
+ border-width: thin;
+ border-radius: 16.1px;
+ border-color: var(--back-color);
+ width: 33px;
+ height: 33px;
+ align-items: center;
+ }
+
+ .closeBtn:hover{
+ color: var(--main-color);
+ background-color: var(--back-color);
+ }
+
+ .windowContent{
+ height:77%;
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ /*=============INTERFACE*/
+ .uiStyle{
+ background-color: var(--back-color);
+ border-color: var(--main-color);
+ border-style: solid;
+ border-width: thin;
+ }
+
+ .icon{
+ height: 16.1px;
+ width: auto;
+ fill: currentColor;
+ pointer-events: none;
+ }
+
+ #topBar{
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 50px;
+ z-index: 333;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--main-color);
+ padding-left: 7.77px;
+ padding-right: 16.1px;
+ gap: 7.77px;
+ box-sizing: border-box;
+
+ p{
+ font-family: 'velvelyne';
+ font-size: 40px;
+ font-weight: bold;
+ padding-top: 7.77px;
+ }
+
+ #mainLogo{
+ height: auto;
+ width: 50px;
+ }
+
+ .left{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ width: auto;
+ gap: 7.77px;
+ height: 100%;
+ }
+
+ .right{
+ display: none;
+ visibility: collapse;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ width:33%;
+ height: 200px;
+ position: absolute;
+ top: 55px;
+ right: 3.33px;
+ z-index: 3;
+
+ .textBtnStyle{
+ width: 16.1%;
+ min-width: 93px;
+ height: 33px;
+ text-transform: uppercase;
+ }
+
+ .textBtnStyle:hover{
+ border-color: var(--back-color);
+ }
+ }
+
+ .iconBtnStyle{
+ width: 33px;
+ height: 33px;
+ }
+
+ #menuBtn{
+ .icon.rotated{
+ transform: rotate(0);
+ }
+
+ .icon{
+ transform: rotate(45deg);
+ }
+ }
+
+ @media(min-width: 700px){
+ #menuBtn{
+ display: none;
+ visibility: collapse;
+ }
+
+ .right{
+ display: flex;
+ visibility: visible;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ width:70%;
+ height: 100%;
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+
+ #mainInfo{
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 2fr 1fr;
+ grid-template-areas:
+ "topL topR"
+ "midL midR"
+ "botL botR";
+ box-sizing: border-box;
+ width: 100vw;
+ height: auto;
+ align-items: stretch;
+
+
+
+ .uiStyle{
+ width:100%;
+ height: auto;
+ padding-left: 7.77px;
+ box-sizing: border-box;
+ font-family: 'velvelyne';
+ font-size: 13.12px;
+ font-weight: bold;
+ }
+
+ #planContainer{
+ width: 200%;
+ height: auto;
+ color: var(--back-color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ #plan{
+ position: relative;
+ width: 90%;
+
+ margin-bottom: 13.12px;
+ }
+ #fleche{
+ position: absolute;
+
+ width: 90%;
+ fill: currentColor;
+ z-index: -1;
+ }
+ @media(max-width: 700px){
+ grid-row: 2;
+ grid-column: 1 / 2;
+ }
+ }
+
+ #title{
+ grid-area: topL;
+ font-size: 22px;
+ line-height: .7;
+ height: 100%;
+
+ #desc{
+ font-family: 'velvelyne';
+ font-style: normal;
+ font-size: 13.12px;
+ line-height: 1em;
+ text-transform: uppercase;
+
+ }
+ }
+
+ #address{
+ grid-area: topR;
+ font-family: 'karrik';
+ color: var(--back-color);
+ font-style: normal;
+ font-size: 13.12px;
+ line-height: 1em;
+ text-transform: uppercase;
+ padding-left: 13.12px;
+ mix-blend-mode: exclusion;
+
+ #hackerLogo{
+ width: 77px;
+ height: 50px;
+ display:inline-block;
+ position: absolute;
+ right: 13.12px;
+ top: 117px;
+ z-index: 33;
+
+ img{
+ width: 77px;
+ height: auto;
+ pointer-events: none;
+ cursor: inherit;
+ }
+ }
+
+ }
+
+ #openingHours{
+ grid-area: botL;
+ text-align: right;
+ padding-right: 13.12px;
+ font-weight: normal;
+ line-height: 1em;
+ margin-top: -13.12px;
+
+ strong{
+ font-weight: bold;
+ }
+ }
+
+ #lolOpener{
+ grid-area: botR;
+ font-weight: normal;
+ padding-right: 7.77px;
+ line-height: 1em;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
+ gap: 0;
+ height: auto;
+ }
+
+ @media(min-width: 700px){
+ grid-template-columns: 1fr 2fr;
+ grid-template-rows: 161px 222px 77px;
+ height: auto;
+
+ .uiStyle{
+ font-size: 16.1px;
+ }
+
+ #planContainer{
+ height: 90%;
+ width: auto;
+ grid-row: 2;
+ grid-column: 2;
+ margin-left: 0;
+ margin-top: -100px;
+
+ #plan{
+ width:90%;
+ height: auto;
+ margin-bottom: 0;
+ max-height: 333px;
+
+ }
+ #fleche{
+ width:60%;
+ height: auto;
+ box-sizing: border-box;
+ max-height: 333px;
+ }
+ }
+
+ #openingHours{
+ grid-area: midL;
+ height: 60%
+ }
+
+ #lolOpener{
+ width: 300%;
+ grid-column: 1 / 2;
+ grid-row: 3;
+ flex-direction: row;
+ gap: 7.77px;
+ align-items: center;
+ justify-content: space-between;
+ padding-left: 16.1px;
+ height: 77px;
+
+ #desc{
+ width: 44%;
+ box-sizing: border-box;
+ }
+ }
+
+ #title{
+ margin-bottom: 3.33px;
+ font-size: 27px;
+ line-height: 0;
+
+ #desc{
+ font-size: 16.1px;
+ }
+ }
+
+ #address #hackerLogo{
+ grid-area: midL;
+ position: relative;
+ top: 0;
+ left: 7.77px;
+ right: unset;
+ }
+ }
+
+ @media(min-width: 1300px){
+ grid-template-rows: 222px 500px 77px;
+
+ .uiStyle{
+ font-size: 16.1px;
+ }
+
+ #lolOpener{
+ font-size: 22px;
+ }
+ #address{
+ font-size: 22px;
+
+ #hackerLogo{
+ width: 117px;
+ }
+ }
+ #openingHours{
+ font-size: 33px;
+ }
+
+ #title{
+ margin-bottom: 3.33px;
+ font-size: 44px;
+ line-height: 0;
+
+ #desc{
+ font-size: 22px;
+ }
+ }
+
+ #planContainer {
+ margin-top: -117px;
+ margin-bottom: 77px;
+
+ #fleche{
+ width: 60%;
+ max-height: 666px;
+ }
+
+ #plan{
+ max-height: 666px;
+ }
+ }
+ }
+ }
+
+ #planContainer {
+ margin-top: -117px;
+ margin-bottom: 77px;
+
+ #fleche{
+ width: 60%;
+ max-height: 666px;
+ }
+
+ #plan{
+ max-height: 666px;
+ }
+ }
+ }
+}
+
+#aboutSection{
+ position: relative;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: flex-start;
+ box-sizing: border-box;
+ height: 50vh;
+
+ #aboutText{
+ width: 60%;
+ height: auto;
+ padding-left: 13.12px;
+ padding-right: 13.12px;
+ padding-bottom: 13.12px;
+ overflow-y: scroll;
+
+ @media(min-width: 700px){
+ height: 60vh;
+ }
+ @media(min-width: 1300px){
+ height: 50vh;
+ padding-left: 33px;
+ }
+
+ p{
+ font-family: 'velvelyne';
+ font-weight: normal;
+ font-size: 13.12px;
+ color: var(--main-color);
+
+ @media(min-width: 1300px){
+ font-size: 20px;
+ }
+ }
+ }
+
+ #eventSection{
+ width: 40%;
+ height: 100%;
+ position: relative;
+
+ #title{
+ height: 44px;
+ padding-top: 7.77px;
+ padding-left: 7.77px;
+ box-sizing: border-box;
+ font-family: 'karrik';
+ font-style: italic;
+ font-size: 13.12px;
+ text-transform: uppercase;
+ color: var(--main-color);
+ pointer-events: none !important;
+ cursor: inherit;
+ }
+ }
+}
diff --git a/typo.css b/typo.css
new file mode 100644
index 0000000..c783053
--- /dev/null
+++ b/typo.css
@@ -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: '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;
+}
\ No newline at end of file
+ 
+
+ 
+
+