Update dac

css/affiches/dac.css

@@ -0,0 +1,57 @@
+@font-face {
+    font-family: "Pixelify Sans";
+    src: url("./PixelifySans-Regular.ttf");
+}
+
+.affiche-dac {
+    background-color: transparent;
+    border: none;
+    background-image: url("/images/affiches/dac-background.png");
+    border-color: white;
+    font-family: "Pixelify Sans", monospace;
+
+    background-size: 550px;
+    background-position: center top;
+    background-repeat: no-repeat;
+
+    color: #1bff8d;
+    line-height: 1.5;
+}
+
+.affiche-dac .content {
+    width: 350px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 25px;
+}
+
+@media screen and (max-width: 880px) {
+    .affiche-dac {
+        padding-bottom: 200px;
+    }
+}
+
+.affiche-dac .notes {
+    float: right;
+    margin: 10px;
+}
+
+.affiche-dac em {
+    color: #ebff00;
+    font-style: normal;
+    font-weight: normal;
+}
+
+.affiche-dac strong {
+    text-decoration-color: #00ffff;
+    text-decoration-line: underline;
+    text-decoration-thickness: 3px;
+    text-decoration-style: dotted;
+    font-style: normal;
+    font-weight: normal;
+}
+
+.affiche-dac p {
+    margin: 0;
+    margin-bottom: 10px;
+}

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

@@ -15,7 +15,7 @@
 	<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">
+	<link rel="stylesheet" href="css/affiches/dac.css">
 </head>
 
 <body>
@@ -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,31 +51,14 @@
 				<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>
 
 			<p>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.</p>
+			Nous constituons une communautée ouverte où chacun·e peut apprendre et partager avec les autres pour créer ensemble et comprendre les outils techniques qui nous entourent.</p>
 
 			<p>Nous revendiquons l'ouverture du code et des techniques.
 			Le partage des connaissances et l'autogestion.</p>
@@ -79,8 +69,32 @@
 			</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</p>	
+		</aside>
+
 		<section id="events">
 
+			<article class="event affiche affiche-dac">
+
+				<div class="content">
+
+					<img src="/images/affiches/dac-notes.png" alt="Quelques notes de musique" class="notes"/>
+					<p>
+						La <em>Digital Audio Community</em> se donne rendez-vous le <time datetime="2023-10-11">Mercredi 25&nbsp;Octobre</time> à partir de <time datetime="18:30">18h30</time> au LOL, <a href="geo:45.7732495,4.8372366">7&nbsp;place Louis Chazette</a>.
+					</p>
+					<p>
+						<strong>Au Programme</strong> : Ateliers Livre-Coding, Discussions Informatique Musicale && Découverte Code Créatif.
+					</p>
+					
+				</div>
+
+			</article>
+
 			<article class="event affiche-perm affiche">
 				<h1>Permanence du LOL</h1>
 				
@@ -93,20 +107,6 @@
 				<p>Adhésion 5€ pour le mois</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">