rework de la description et des events du LOL

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;
+}

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.svg");
+    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";
+}
+
+.affiche-perm .event-hours {
+    font-weight: bold;
+    text-align: center;
+    margin-top: 25px;
+    margin-bottom: 25px;
+    font-size: 1.2em;
+    font-family: "Arvo";
+}

css/style.css

@@ -30,9 +30,10 @@ a:link {
 	text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
 	color: white;
 	background-color:black;
+    text-decoration: underline;
 }
 
 a:visited {
@@ -49,81 +50,42 @@ a:visited {
 
     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 > nav {
-    flex: 1;
-
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    align-items: center;
-}
-
 @media screen and (max-width: 600px) {
     #main-header {
-        flex-direction: column;
-        align-items: center;
-    }
-
-    #main-header > nav {
         justify-content: center;
     }
 }
 
+#main-header h1 {
+    line-height: 25px;
+    font-size: 20px;
+    font-weight: normal;
+    font-family: monospace;
+    color: yellow;
+}
+
 /* 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;
-main > section {
+    padding-right: 10px;
-    padding: 0 10px;
-}
-
-main aside {
-    padding: 10px;
 }
 
 main .toolbar {
     grid-column: 1 / 3;
-    padding: 0 10px;
-
     text-align: right;
 }
 
-@media screen and (max-width: 889px){
-    main {
-        grid-template-columns: 1fr;
-    }
-
-    main > aside {
-        grid-row: 3;
-    }
-
-    main .toolbar {
-        grid-row: 1;
-    }
-}
-
 /* toolbar */
 
 main .toolbar button {
@@ -148,6 +110,8 @@ main .toolbar button img[hidden] {
 #description {
     text-align: left;
     line-height: 1.5;
+
+    grid-column: 1;
 }
 
 #description > *:first-child {
@@ -186,23 +150,23 @@ dl.definitions > dt {
 
 /* side */
 
-#main-side h2 {
+main > aside {
-    color: white;
+    grid-column: 2;
-    font-size: 1em;
+    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;
     }
 }
@@ -254,3 +218,70 @@ dl.definitions > dt {
     left: 0;
     background: linear-gradient(to top, black, rgba(0,0,0,0));
 }
+
+/* nav */
+
+#main-nav {
+    text-align: center;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+#main-nav > *:not(:last-child)::after {
+    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;
+}
+
+/* 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

@@ -13,12 +13,15 @@
 	</style>
 
 	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+
+	<link rel="stylesheet" href="css/affiches/perm.css">
+	<link rel="stylesheet" href="css/affiches/cafe.css">
 </head>
 
 <body>
 
 	<div class="fullscreen-background" aria-hidden="true">
-		<video muted loop poster="images/world_network.jpg" autoplay id="background-video">
+		<video muted loop poster="images/world_network.jpg" id="background-video">
 			<source src="videos/background.webm" type="video/webm" />
 			<source src="videos/background.mp4" type="video/mp4">
 		</video>
@@ -28,15 +31,12 @@
 	<header id="main-header">
 		<img class="logo" src="images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
 
-		<nav>
+		<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
-			<a href="https://git.labolyon.fr/explore/repos ">Wiki/Git</a>
-		</nav>
 	</header>
 
 	<main>
 
-		<section id="description">
+		<section id="definitions">
-
 			<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,7 +44,26 @@
 				<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>
+			<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>
 
@@ -55,25 +74,42 @@
 			Le partage des connaissances et l'autogestion.</p>
 
 			<p>
-				<a href="https://hackerspaces.org/" class="hackerspace-logo"><img class="icons" src="images/logo_hackerspaces_monde.png"></a>
+				<a href="https://www.hackerspaces.org/" class="hackerspace-logo" target="_blank"><img class="icons" src="images/logo_hackerspaces_monde.png" alt="Hackerspaces.org"></a>
 				<marquee direction="left" behavior="scroll" scrollamount="3">none of us is smarter than all of us - nul n'est plus intelligent·e que nous tou·tes réunis</marquee>
 			</p>
 		</section>
 
-	   <aside id="main-side">
+		<section id="events">
-			<h2>Informations</h2>
-			<section class="info">
-				<div>Permanence : mardis à partir de 19h00</div>
-				<div>Adresse : <address>7 Place Louis Chazette 69001 Lyon</address></div>				      
-			</section>
 
-			<h2>Canaux</h2>
+			<article class="event affiche-perm affiche">
-			<section>
+				<h1>Permanence du LOL</h1>
-				<p>IRC : canal #labolyon sur <a href="http://geeknode.org/">irc.geeknode.org</a> : besoin d'aide sur IRC? <a href=" http://www.irchelp.org">voir IRC Help</a></p>
-				<p><a href=" https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a></p>
-			</section>
-		</aside>
 				
+				<p>Venez nous rencontrer autours d'une pizza</p>
+
+				<p>On parle technique mais aussi logiciel libre, hacking, de nos projets personnels ou collectifs</p>
+				<p class="event-hours"><strong>Tous les mardis à partir de&nbsp;19h <br/>
+					au local du LOL</strong></p>
+
+				<p>Adhésion 5€ pour le mois</p>
+
+				<p class="credits">Pizzas par <a href="https://thenounproject.com/nugraha.farra/">Farra Nugraha</a></p>
+			</article>
+
+			<article class="event affiche-cafe affiche">
+				<h1>Hacking cafe<span class="cursor">▁</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>
+
+				<p> C'est le moment de se mettre ensemble sur nos projets personnels ou collectifs</p>
+
+				<p class="event-hours"><strong>Tous les samedis de&nbsp;14h à 19h <br/>
+					au local du LOL</strong></p>
+
+				<p>Adhésion 5€ pour le mois</p>
+			</article>
+
+		</section>
 
 		<div class="toolbar">
 			<button id="play-background" hidden>