L(. O.)L

commit 1d622924fb6db742af0a3eda84f16964db1cd896 Author: vgaNAR6ta Date: Thu Jul 23 02:57:36 2026 +0200 init: version basique sans js et sans menu sur tel + division en 2 fichier html pour lolOpener diff --git a/assets/favicon.svg b/assets/favicon.svg new file mode 100644 index 0000000..b396f5f --- /dev/null +++ b/assets/favicon.svg @@ -0,0 +1,76 @@ + + + + diff --git a/assets/favicon_open.svg b/assets/favicon_open.svg new file mode 100644 index 0000000..284e3ce --- /dev/null +++ b/assets/favicon_open.svg @@ -0,0 +1,76 @@ + + + + diff --git a/assets/fleche.svg b/assets/fleche.svg new file mode 100644 index 0000000..dab8f42 --- /dev/null +++ b/assets/fleche.svg @@ -0,0 +1,31 @@ + + \ No newline at end of file diff --git a/assets/icons/about.svg b/assets/icons/about.svg new file mode 100644 index 0000000..edd3e8d --- /dev/null +++ b/assets/icons/about.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/back.svg b/assets/icons/back.svg new file mode 100644 index 0000000..7ed3714 --- /dev/null +++ b/assets/icons/back.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/close.svg b/assets/icons/close.svg new file mode 100644 index 0000000..3821cc9 --- /dev/null +++ b/assets/icons/close.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/contact.svg b/assets/icons/contact.svg new file mode 100644 index 0000000..296b560 --- /dev/null +++ b/assets/icons/contact.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/file.svg b/assets/icons/file.svg new file mode 100644 index 0000000..6f8cb9c --- /dev/null +++ b/assets/icons/file.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/assets/icons/folder.svg b/assets/icons/folder.svg new file mode 100644 index 0000000..258f9f5 --- /dev/null +++ b/assets/icons/folder.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/info.svg b/assets/icons/info.svg new file mode 100644 index 0000000..1262b3e --- /dev/null +++ b/assets/icons/info.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/assets/icons/link.svg b/assets/icons/link.svg new file mode 100644 index 0000000..a2ed00b --- /dev/null +++ b/assets/icons/link.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/assets/icons/next.svg b/assets/icons/next.svg new file mode 100644 index 0000000..ba6b56f --- /dev/null +++ b/assets/icons/next.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/pause.svg b/assets/icons/pause.svg new file mode 100644 index 0000000..ec47557 --- /dev/null +++ b/assets/icons/pause.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/assets/icons/play.svg b/assets/icons/play.svg new file mode 100644 index 0000000..bf16538 --- /dev/null +++ b/assets/icons/play.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/player.svg b/assets/icons/player.svg new file mode 100644 index 0000000..23a5063 --- /dev/null +++ b/assets/icons/player.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/prev.svg b/assets/icons/prev.svg new file mode 100644 index 0000000..904d3db --- /dev/null +++ b/assets/icons/prev.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/reload.svg b/assets/icons/reload.svg new file mode 100644 index 0000000..af82d98 --- /dev/null +++ b/assets/icons/reload.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/icons/saved.svg b/assets/icons/saved.svg new file mode 100644 index 0000000..91c547c --- /dev/null +++ b/assets/icons/saved.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/assets/logo/logo-contour.svg b/assets/logo/logo-contour.svg new file mode 100644 index 0000000..291cc0a --- /dev/null +++ b/assets/logo/logo-contour.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/assets/logo/logo-contreforme.svg b/assets/logo/logo-contreforme.svg new file mode 100644 index 0000000..aa92ebd --- /dev/null +++ b/assets/logo/logo-contreforme.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/assets/logo/logo-forme.svg b/assets/logo/logo-forme.svg new file mode 100644 index 0000000..a0000d6 --- /dev/null +++ b/assets/logo/logo-forme.svg @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/assets/logo_hackerspaces_monde.png b/assets/logo_hackerspaces_monde.png new file mode 100644 index 0000000..952f48c Binary files /dev/null and b/assets/logo_hackerspaces_monde.png differ diff --git a/assets/plan.svg b/assets/plan.svg new file mode 100644 index 0000000..ebb4cb0 --- /dev/null +++ b/assets/plan.svg @@ -0,0 +1,52 @@ + + diff --git a/assets/typo/Avara-Black.woff2 b/assets/typo/Avara-Black.woff2 new file mode 100644 index 0000000..24a6617 Binary files /dev/null and b/assets/typo/Avara-Black.woff2 differ diff --git a/assets/typo/Karrik-Italic.woff2 b/assets/typo/Karrik-Italic.woff2 new file mode 100644 index 0000000..203f936 Binary files /dev/null and b/assets/typo/Karrik-Italic.woff2 differ diff --git a/assets/typo/Karrik-Regular.woff2 b/assets/typo/Karrik-Regular.woff2 new file mode 100644 index 0000000..8754815 Binary files /dev/null and b/assets/typo/Karrik-Regular.woff2 differ diff --git a/assets/typo/Lineal-Heavy.ttf b/assets/typo/Lineal-Heavy.ttf new file mode 100644 index 0000000..ee6c18d Binary files /dev/null and b/assets/typo/Lineal-Heavy.ttf differ diff --git a/assets/typo/PressStart2P-Regular.ttf b/assets/typo/PressStart2P-Regular.ttf new file mode 100644 index 0000000..2442aff Binary files /dev/null and b/assets/typo/PressStart2P-Regular.ttf differ diff --git a/assets/typo/Velvelyne-Bold.ttf b/assets/typo/Velvelyne-Bold.ttf new file mode 100644 index 0000000..a9a4c84 Binary files /dev/null and b/assets/typo/Velvelyne-Bold.ttf differ diff --git a/assets/typo/Velvelyne-Book.ttf b/assets/typo/Velvelyne-Book.ttf new file mode 100644 index 0000000..7a4dd9e Binary files /dev/null and b/assets/typo/Velvelyne-Book.ttf differ diff --git a/assets/typo/Velvelyne-Light.ttf b/assets/typo/Velvelyne-Light.ttf new file mode 100644 index 0000000..8601c1d Binary files /dev/null and b/assets/typo/Velvelyne-Light.ttf differ diff --git a/assets/video/background.webm b/assets/video/background.webm new file mode 100644 index 0000000..eeef25e Binary files /dev/null and b/assets/video/background.webm differ diff --git a/assets/video/close.webm b/assets/video/close.webm new file mode 100644 index 0000000..7ce8b40 Binary files /dev/null and b/assets/video/close.webm differ diff --git a/assets/video/open.webm b/assets/video/open.webm new file mode 100644 index 0000000..1a58407 Binary files /dev/null and b/assets/video/open.webm differ diff --git a/index-ferme.html b/index-ferme.html new file mode 100644 index 0000000..d7341be --- /dev/null +++ b/index-ferme.html @@ -0,0 +1,125 @@ + + + + + + + + L(. O.)L + + + +

+ +

+ Hackerspace queer +

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

+ 7 place Chazette +
+ 69001 Lyon +

+ 45° 46' 23.698" N +
+ 4° 50' 14.052" E +

+ +

+ Dim. 15h → 23h
+ Lun. 15h → 23h
+ Mar. 15h → 23h

+ → nocturne :
+ Ven. 21h → 5h +

+ +

Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte :

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

+ évènements
→ → → à venir : +

+ + diff --git a/index-ouvert.html b/index-ouvert.html new file mode 100644 index 0000000..db1ce07 --- /dev/null +++ b/index-ouvert.html @@ -0,0 +1,125 @@ + + + + + + + + L(. O.)L + + +

+ +

+ Hackerspace queer +

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

+ 7 place Chazette +
+ 69001 Lyon +

+ 45° 46' 23.698" N +
+ 4° 50' 14.052" E +

+ +

+ Dim. 15h → 23h
+ Lun. 15h → 23h
+ Mar. 15h → 23h

+ → nocturne :
+ Ven. 21h → 5h +

+ +

↑ ↑ ↑ Le lieu est parfois ouvert en dehors des horaires habituels donc on a installé un capteur sur la porte

Ouvert !

+ évènements
→ → → à venir : +

+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..a917fda --- /dev/null +++ b/style.css @@ -0,0 +1,1473 @@ +: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('./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; + } + :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; + 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; + } + } +}