diff --git a/css/affiches/Arvo-Bold.ttf b/css/affiches/Arvo-Bold.ttf new file mode 100644 index 0000000..38341b1 Binary files /dev/null and b/css/affiches/Arvo-Bold.ttf differ diff --git a/css/affiches/AzeretMono-VariableFont_wght.ttf b/css/affiches/AzeretMono-VariableFont_wght.ttf new file mode 100644 index 0000000..4e508e8 Binary files /dev/null and b/css/affiches/AzeretMono-VariableFont_wght.ttf differ diff --git a/css/affiches/cafe.css b/css/affiches/cafe.css new file mode 100644 index 0000000..c6c4f52 --- /dev/null +++ b/css/affiches/cafe.css @@ -0,0 +1,34 @@ +@font-face { + font-family: "Azeret Mono"; + src: url("./AzeretMono-VariableFont_wght.ttf"); +} + +.affiche-cafe { + font-family: "Azeret Mono", monospace; + line-height: 1.3; + font-size: 0.9rem; +} + +.affiche-cafe > * { + margin: 0; + margin-bottom: 0.9rem; +} + +.affiche-cafe > *:last-child { + margin-bottom: 0; +} + +@keyframes cursor-blink { + 0% {opacity: 0;} + 65% {opacity: 1;} + 100% {opacity: 1;} +} + +.affiche-cafe .cursor { + animation: cursor-blink 1.5s steps(1) infinite; +} + +.affiche-cafe h1 { + font-weight: normal; + font-size: 2em; +} \ No newline at end of file diff --git a/css/affiches/dac.css b/css/affiches/dac.css new file mode 100644 index 0000000..45893c5 --- /dev/null +++ b/css/affiches/dac.css @@ -0,0 +1,5 @@ +.affiche-dac img { + width: 100%; + max-height: 50vh; + object-fit: scale-down; +} \ No newline at end of file diff --git a/css/affiches/perm.css b/css/affiches/perm.css new file mode 100644 index 0000000..382daef --- /dev/null +++ b/css/affiches/perm.css @@ -0,0 +1,35 @@ +@font-face { + font-family: "Arvo"; + src: url("./Arvo-Bold.ttf"); + font-weight: bold; +} + +.affiche-perm { + background: black url("../../images/affiches/perm-bg.jpg"); + background-size: cover; + background-repeat: no-repeat; + + text-align: center; + + padding-left: 25px; + padding-right: 25px; + + font-size: 0.9rem; + line-height: 1.5; +} + +.affiche-perm h1 { + font-size: 1.8em; + margin-top: 50px; + font-weight: normal; + font-family: "Arvo", sans-serif; +} + +.affiche-perm .event-hours { + font-weight: bold; + text-align: center; + margin-top: 25px; + margin-bottom: 25px; + font-size: 1.2em; + font-family: "Arvo"; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 0e07e2a..c54f82a 100644 --- a/css/style.css +++ b/css/style.css @@ -2,7 +2,7 @@ html { font-family: 'arial', sans-serif; font-weight: 400; font-size: 1em; - color: #8a8683; + color: #cfcfcf; max-width: 100%; overflow-x: hidden; background: url("../images/world_network.muted.jpg"); @@ -30,96 +30,132 @@ a:link { text-decoration: none; } -a:hover { +a:hover, a:focus { color: white; background-color:black; + text-decoration: underline; } a:visited { color:yellow; } +hr { + border: none; + height: 2em; +} + /* Header */ #main-header { - display: flex; - flex-direction: row; - justify-content: start; - align-items: stretch; + display: grid; + grid-template-columns: 95px 1fr 400px; + grid-template-rows: min-content; + align-items: center; gap: 15px; - padding: 10px; + padding: 50px 10px 10px; position: relative; margin-bottom: 25px; } -#main-header::before { - content: ""; - z-index: -1; - width: 100vw; - background: black; - height: 100%; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); +#main-header > * { + grid-row: 1; } -#main-header > nav { - flex: 1; +#main-header h1 { + line-height: 25px; + font-size: 20px; + font-weight: normal; + font-family: monospace; + color: yellow; - display: flex; - flex-direction: row; - justify-content: end; - align-items: center; + flex: 1; + grid-column: 2; +} + +#main-header nav { + grid-column: 3; } @media screen and (max-width: 600px) { #main-header { - flex-direction: column; - align-items: center; + grid-template-columns: 1fr 1fr; + grid-auto-rows: min-content; } - #main-header > nav { - justify-content: center; + #main-header img { + grid-column: 1; + margin-left: auto; + } + + #main-header h1 { + grid-column: 2; + } + + #main-header #main-nav { + grid-row: 2; + grid-column: 1 / 3; } } -/* main area */ +/* main area */ main { display: grid; grid-template-columns: 1fr 400px; grid-auto-rows: min-content; - gap: 5px; + row-gap: 15px; + column-gap: 10px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 15vh; } -main > section { - padding: 0 10px; +main #main-info { + grid-column: 2; + grid-row: 1; } -main aside { - padding: 10px; +main #events { + grid-column: 2; + grid-row: 2; +} + +main #description { + grid-column: 1; + grid-row: 1 / 5; } main .toolbar { grid-column: 1 / 3; - padding: 0 10px; - text-align: right; } @media screen and (max-width: 889px){ main { grid-template-columns: 1fr; + row-gap: 50px; } - main > aside { + main #main-info { grid-row: 3; + grid-column: 1; } - + + main #events { + grid-column: 1; + grid-row: 5; + } + + main #description { + grid-column: 1; + grid-row: 2; + } + main .toolbar { + grid-column: 1; grid-row: 1; } } @@ -146,13 +182,32 @@ main .toolbar button img[hidden] { /* description */ #description { - text-align: justify; + text-align: left; + line-height: 1.5; + + grid-column: 1; } #description > *:first-child { margin-top: 0; } +dl.definitions > * { + display: inline; + padding: 0; + margin: 0; +} + +dl.definitions > dt:not(:first-child)::before { + content: ""; + display: block; + margin-top: 1em; +} + +dl.definitions > dt { + font-weight: bold; +} + .hackerspace-logo { float: right; width: 100px; @@ -169,23 +224,23 @@ main .toolbar button img[hidden] { /* side */ -#main-side h2 { - color: white; - font-size: 1em; +main > aside { + grid-column: 2; + text-align: center; } -#main-side address { +#main-info address { display: inline; } -#main-side .info > * { +#main-info > * { margin: 1.33em 0; font-weight: bold; color: yellow; } @media screen and (max-width: 889px){ - #main-side { + #main-info { text-align: center; } } @@ -236,4 +291,42 @@ main .toolbar button img[hidden] { bottom: 0; left: 0; background: linear-gradient(to top, black, rgba(0,0,0,0)); +} + +/* nav */ + +#main-nav { + text-align: center; +} + +#main-nav > *:not(:last-child)::after { + content: " | "; + content: " | " / ""; + text-decoration: none !important; +} + +/* Affiches */ + +.affiche { + border: solid 1px currentColor; + padding: 10px; + background: black; + position: relative; +} + +.affiche:not(:first-child){ + margin-top: 25px; +} + +.affiche:not(:last-child){ + margin-bottom: 25px; +} + +.affiche .credits { + font-size: 0.5em; + text-align: right; +} + +.affiche .credits, .affiche .credits * { + color: inherit; } \ No newline at end of file diff --git a/images/affiches/dac.png b/images/affiches/dac.png new file mode 100644 index 0000000..9423827 Binary files /dev/null and b/images/affiches/dac.png differ diff --git a/images/affiches/perm-bg.jpg b/images/affiches/perm-bg.jpg new file mode 100644 index 0000000..d487ada Binary files /dev/null and b/images/affiches/perm-bg.jpg differ diff --git a/images/affiches/perm-bg.original.jpg b/images/affiches/perm-bg.original.jpg new file mode 100644 index 0000000..e67f434 Binary files /dev/null and b/images/affiches/perm-bg.original.jpg differ diff --git a/images/affiches/perm-bg.xcf b/images/affiches/perm-bg.xcf new file mode 100644 index 0000000..32cde7a Binary files /dev/null and b/images/affiches/perm-bg.xcf differ diff --git a/index.html b/index.html index e6bedf3..de3a0f9 100644 --- a/index.html +++ b/index.html @@ -13,56 +13,103 @@ + + -
- - +
- + -
+
-

Le Laboratoire ouvert lyonnais est un lieu de brassage et une communauté éclectique. - Son objectif est le partage des connaissances et la ré-appropriation des technologies. - Chacun-e amène son savoir-faire et son envie d'apprendre dans un mélange ludique de création et de convivialité. - Le L.O.L. est l'expression du mouvement global des hackerspaces sur Lyon et - se veut ouvert aux échanges, aux collaborations avec d'autres initiatives.

-

L'électronique, l'informatique, la mécanique, la chimie, les arts numériques, la cuisine expérimentale sont les pratiques des loliens. - Les diverses manières d'implication du collectif dans des multiples initiatives et événements permet à celui-ci, dans le temps, de s'adapter à son écosystème.

+
+
Hackerspace
+
n.m. : Tiers lieu de réunion et de rencontre entre personnes désirant comprendre, créer ou détourner des objets techniques ou technologiques.
-

L'une des vocations du LOL est de fournir à ses membres un lieu pour héberger leurs projets ainsi que d'organiser des présentations publiques et des ateliers autonomisants.

+
Hackeuse, Hacker
+
n. : Personne ayant un intérêt dans la technique ou la technologie et faisant un usage creatif et/ou utile de celle-ci par le détournement.
+
+ +
+ +

Le Laboratoire Ouvert Lyonnais (LOL) est un lieu de rassemblement et d'expérimentations pour tout les passionné·es d'informatique, d'électronique et de technique. + Le LOL est un lieu d'exploration des alternatives et de bidouille.

+ +

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 peux apprendre et partager avec les autres pour créer ensemble et comprendre les outils techniques qui nous entourent.

+ +

Nous revendiquons l'ouverture du code et des techniques. + Le partage des connaissances et l'autogestion.

- - none of us is smarter than all of us - nul n'est plus intelligent-e que nous tou-te-s réunis + + none of us is smarter than all of us - nul n'est plus intelligent·e que nous tou·tes réunis

-