Impred layout for accessibility and beautifulness

css/style.css

@@ -40,13 +40,18 @@ a:visited {
 	color:yellow;
 }
 
+hr {
+    border: none;
+    height: 2em;
+}
+
 /* Header */
 
 #main-header {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: 95px 1fr 400px;
-    justify-content: start;
+    grid-template-rows: min-content;
-    align-items: stretch;
+    align-items: center;
 
     gap: 15px;
 
@@ -55,10 +60,8 @@ a:visited {
     margin-bottom: 25px;
 }
 
-@media screen and (max-width: 600px) {
+#main-header > * {
-    #main-header {
+    grid-row: 1;
-        justify-content: center;
-    }
 }
 
 #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;
 }
 
@@ -257,31 +330,3 @@ 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;
-    }
-}

index.html

@@ -25,18 +25,25 @@
 			<source src="videos/background.webm" type="video/webm" />
 			<source src="videos/background.mp4" type="video/mp4">
 		</video>
-		<img src="/images/world_network.muted.jpg" alt="Logo du laboratoire ouvert lyonnais, un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." id="background-poster"/>
+		<img src="/images/world_network.muted.jpg" id="background-poster"/>
 	</div>
 
 	<header id="main-header">
-		<img class="logo" src="images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
+		<img class="logo" src="images/logo_picto.svg" alt="Logo du laboratoire ouvert lyonnais : un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." />
 
 		<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
+
+		<nav id="main-nav">
+			<a href="https://git.labolyon.fr/explore/repos ">Dépots Git</a>
+			<a href="https://team.labolyon.fr/">Wiki</a>
+			<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
+		</nav>
 	</header>
 
 	<main>
 		
-		<section id="definitions">
+		<section id="description">
+
 			<dl class="definitions">
 				<dt>Hackerspace</dt>
 				<dd><em>n.m.</em> : Tiers lieu de réunion et de rencontre entre personnes désirant comprendre, créer ou détourner des objets techniques ou technologiques.</dd>
@@ -44,26 +51,9 @@
 				<dt>Hackeuse, Hacker</dt>
 				<dd><em>n.</em> : 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.</dd>
 			</dl>
-		</section>
 
-		<aside>
+			<hr>
-			<section id="main-info">
-				<address><a href="geo:45.7732495,4.8372366">
-					7 Place Louis Chazette 69001 Lyon<br/>
-					45° 46' 23.698" N 4° 50' 14.052" E 
-				</a></address>
-				<p> Ouvert tous les mardis à partir de 19h <br/>
-					et tous les samedis de 14h à 19h</p>			      
-			</section>
 
-			<nav id="main-nav">
-				<a href="https://git.labolyon.fr/explore/repos ">Dépots Git</a>
-				<a href="https://team.labolyon.fr/">Wiki</a>
-				<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
-			</nav>
-		</aside>
-
-		<section id="description">
 			<p>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.</p>
 
@@ -79,6 +69,15 @@
 			</p>
 		</section>
 
+		<aside id="main-info">
+			<address><a href="geo:45.7732495,4.8372366">
+				7 Place Louis Chazette 69001 Lyon<br/>
+				45° 46' 23.698" N 4° 50' 14.052" E 
+			</a></address>
+			<p> Ouvert tous les mardis à partir de 19h <br/>
+				et tous les samedis de 14h à 19h</p>	
+		</aside>
+
 		<section id="events">
 
 			<article class="event affiche-perm affiche">
@@ -94,7 +93,7 @@
 			</article>
 
 			<article class="event affiche-cafe affiche">
-				<h1 lang="en"><span aria-hidden="true">&gt;</span>Hacking cafe<span class="cursor" aria-hidden="true">▁</span></h1>
+				<h1 lang="en"><span aria-hidden="true">&gt;&nbsp;</span>Hacking cafe<span class="cursor" aria-hidden="true">▁</span></h1>
 
 				<p> Le Samedi apres-midi<br/>
 					Un <abbr title="Le terme café exprime ici toute boisson agréable à deguster en compagnie d'autre personnes. Cela regroupe le café, le thé, des jus de fruits ou autre chose.">café</abbr> sur la table de soudage ou à coté du PC</p>