-
-
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
- 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.
- Un capteur sur la porte d'entrée indique si le local est ouvert:
+ Un capteur sur la porte d'entrée indique
-
- Vérifier si le local est ouvert →
-
-
+
+
+
+ Le local est actuellement
+
+ Fermé ...
+
+
-
-
- 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/status/openStyle.css b/status/openStyle.css
new file mode 100644
index 0000000..a9dda6a
--- /dev/null
+++ b/status/openStyle.css
@@ -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;
+}
diff --git a/style.css b/style.css
deleted file mode 100644
index 39dabbb..0000000
--- a/style.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/animation.css b/style/animation.css
similarity index 100%
rename from animation.css
rename to style/animation.css
diff --git a/style/common.css b/style/common.css
new file mode 100644
index 0000000..10896bc
--- /dev/null
+++ b/style/common.css
@@ -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;
+}
diff --git a/style/default.css b/style/default.css
new file mode 100644
index 0000000..15fac92
--- /dev/null
+++ b/style/default.css
@@ -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;
+}
diff --git a/style/main.css b/style/main.css
new file mode 100644
index 0000000..8871961
--- /dev/null
+++ b/style/main.css
@@ -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;
+ }
+ }
+
+}
diff --git a/style/typo.css b/style/typo.css
new file mode 100644
index 0000000..534d710
--- /dev/null
+++ b/style/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: '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;
+}
diff --git a/typo.css b/typo.css
deleted file mode 100644
index c783053..0000000
--- a/typo.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
+ 
-
- 
-
+ 
+
+