From 995516ff4080e8a70547fd13b21c161f0e59c35e Mon Sep 17 00:00:00 2001 From: EpicKiwi Date: Mon, 21 Aug 2023 11:46:57 +0200 Subject: [PATCH] Impred layout for accessibility and beautifulness --- css/style.css | 121 ++++++++++++++++++++++++++++++++++---------------- index.html | 43 +++++++++--------- 2 files changed, 104 insertions(+), 60 deletions(-) diff --git a/css/style.css b/css/style.css index b36e2bf..c54f82a 100644 --- a/css/style.css +++ b/css/style.css @@ -40,13 +40,18 @@ 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; @@ -55,10 +60,8 @@ a:visited { margin-bottom: 25px; } -@media screen and (max-width: 600px) { - #main-header { - justify-content: center; - } +#main-header > * { + grid-row: 1; } #main-header h1 { @@ -67,6 +70,34 @@ a:visited { font-weight: normal; font-family: monospace; color: yellow; + + flex: 1; + grid-column: 2; +} + +#main-header nav { + grid-column: 3; +} + +@media screen and (max-width: 600px) { + #main-header { + grid-template-columns: 1fr 1fr; + grid-auto-rows: min-content; + } + + #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 */ @@ -79,6 +110,22 @@ main { column-gap: 10px; padding-left: 10px; padding-right: 10px; + padding-bottom: 15vh; +} + +main #main-info { + grid-column: 2; + grid-row: 1; +} + +main #events { + grid-column: 2; + grid-row: 2; +} + +main #description { + grid-column: 1; + grid-row: 1 / 5; } main .toolbar { @@ -86,6 +133,33 @@ main .toolbar { text-align: right; } +@media screen and (max-width: 889px){ + main { + grid-template-columns: 1fr; + row-gap: 50px; + } + + 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; + } +} + /* toolbar */ main .toolbar button { @@ -223,12 +297,11 @@ main > aside { #main-nav { text-align: center; - margin-top: 25px; - margin-bottom: 25px; } #main-nav > *:not(:last-child)::after { content: " | "; + content: " | " / ""; text-decoration: none !important; } @@ -256,32 +329,4 @@ main > aside { .affiche .credits, .affiche .credits * { color: inherit; -} - -/* mobile */ - -@media screen and (max-width: 889px){ - main { - grid-template-columns: 1fr; - - row-gap: 50px; - } - - main > aside { - grid-row: 3; - grid-column: 1; - } - - main .toolbar { - grid-row: 1; - grid-column: 1; - } - - #description { - grid-column: 1; - } - - #events { - grid-row: 4; - } } \ No newline at end of file diff --git a/index.html b/index.html index 6e881be..8eadd35 100644 --- a/index.html +++ b/index.html @@ -25,18 +25,25 @@ - Logo du laboratoire ouvert lyonnais, un rectangle entourant 3 lignes de points et trais des lettres L O L en morse. +
- +

Laboratoire
Ouvert
Lyonnais

+ +
+ +
-
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.
@@ -44,26 +51,9 @@
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.

@@ -79,6 +69,15 @@

+ +
@@ -94,7 +93,7 @@
-

Hacking cafe

+

Hacking cafe

Le Samedi apres-midi
Un café sur la table de soudage ou à coté du PC