From b7b3497a0b1626cd2c4be5b09a49c7b5bbbe7d9b Mon Sep 17 00:00:00 2001 From: vgaNAR6ta Date: Sat, 25 Jul 2026 20:59:15 +0200 Subject: [PATCH] =?UTF-8?q?edit:=20version=20tel=20sans=20event=20+=20modi?= =?UTF-8?q?f=20=C3=A0=20faire=20+=20organisation=20des=20fichiers=20+=20cs?= =?UTF-8?q?s=20ouverture=20du=20local?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index-ferme.html => archives/index-ferme.html | 0 .../index-ouvert.html | 0 style.old.css => archives/style.old.css | 0 index.html | 712 +++++++++--------- status/openStyle.css | 26 + style.css | 127 ---- animation.css => style/animation.css | 0 style/common.css | 63 ++ style/default.css | 35 + style/main.css | 331 ++++++++ style/typo.css | 33 + typo.css | 33 - 12 files changed, 853 insertions(+), 507 deletions(-) rename index-ferme.html => archives/index-ferme.html (100%) rename index-ouvert.html => archives/index-ouvert.html (100%) rename style.old.css => archives/style.old.css (100%) create mode 100644 status/openStyle.css delete mode 100644 style.css rename animation.css => style/animation.css (100%) create mode 100644 style/common.css create mode 100644 style/default.css create mode 100644 style/main.css create mode 100644 style/typo.css delete mode 100644 typo.css diff --git a/index-ferme.html b/archives/index-ferme.html similarity index 100% rename from index-ferme.html rename to archives/index-ferme.html diff --git a/index-ouvert.html b/archives/index-ouvert.html similarity index 100% rename from index-ouvert.html rename to archives/index-ouvert.html diff --git a/style.old.css b/archives/style.old.css similarity index 100% rename from style.old.css rename to archives/style.old.css diff --git a/index.html b/index.html index 1113ce5..8e78e3f 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,24 @@ - + - - - - - + + + + + + + + + L(. O.)L — Laboratoire Ouvert Lyonnais

- + L.O.L.

@@ -30,399 +34,413 @@
-
- +
+ + + +
+

+ Hackerspace queer +
+ Lieu de réappropriation,
+ réparation & recyclage
+ des objets techniques
+ & technologiques + +

+
-
-

- Hackerspace queer - - Lieu de réappropriation,
- réparation & recyclage
- des objets techniques
- & technologiques - -

+
+

Horaires d'ouverture

+
    +
  1. + Dim. 15h → 23h +
    2. +
  2. + Lun. 15h → 23h +
    3. +
  3. + Mar. 15h → 23h +
    4. +
-
+

Nocturne

+
    +
  1. Ven. 21h → 5h
    2. +
+
-
    -
  1. - Dim. 15h → 23h -
    2. -
  2. - Lun. 15h → 23h -
    3. -
  3. - Mar. 15h → 23h -
    4. -
+
+ 7 place Chazette
+ 69001 Lyon
+
+ 45° 46' 23.698" N
+ 4° 50' 14.052" E +
-

Nocturne:

-
    -
  1. Ven. 21h → 5h
    2. -
-
- -
- 7 place Chazette
- 69001 Lyon
-
- 45° 46' 23.698" N
- 4° 50' 14.052" E -
- -
- - - - - - - - - - - - - - - - - - - - - -
- -
- +
+
+ 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 + + + + + + + + + + + + + + + + + + + +
-
- -
+ + + +
+ +
+

- 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.
+ En fonction de nos envies et disponibilités.
 

- Un capteur sur la porte d'entrée indique si le local est ouvert: +   Un capteur sur la porte d'entrée indique
  si le local est ouvert:

-

- 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.
- Le LOL est un lieu d'exploration des alternatives et de bidouille anti-systèmes. -

-

- 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.

- Nous condamnons donc toute forme de violence et de discrimination dans nos locaux.
- Tout comportement assimilé pourra, sur décision collective, vous mener à la sortie. -

-
+
+
+

+ 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.
+ Le LOL est un lieu d'exploration des alternatives
et de bidouille anti-systèmes. +

+

+ 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.

+ Nous condamnons donc toute forme de violence
et de discrimination dans nos locaux.
+ Tout comportement assimilé pourra, sur décision collective,
vous mener à la sortie. +

+
+
+ + + +

Événements à venir

+ -
+ document.getElementById("jdll-2024-forward").addEventListener("click", () => { + iframe.contentWindow.history.forward() + }) + + document.getElementById("jdll-2024-home").addEventListener("click", () => { + iframe.src = initialValue + }) + })() + + --> +
+
- \ 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