Merge branch 'main' into feat/status

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

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,59 +30,73 @@ 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;
+    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;
 
-    padding: 10px;
+    padding: 50px 10px 10px;
     position: relative;
     margin-bottom: 25px;
 }
 
-#main-header::before {
+#main-header > * {
-    content: "";
+    grid-row: 1;
-    z-index: -1;
-    width: 100vw;
-    background: black;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
 }
 
-#main-header > nav {
+#main-header h1 {
-    flex: 1;
+    line-height: 25px;
+    font-size: 20px;
+    font-weight: normal;
+    font-family: monospace;
+    color: yellow;
 
-    display: flex;
+    flex: 1;
-    flex-direction: row;
+    grid-column: 2;
-    justify-content: end;
+}
-    align-items: center;
+
+#main-header nav {
+    grid-column: 3;
 }
 
 @media screen and (max-width: 600px) {
     #main-header {
-        flex-direction: column;
+        grid-template-columns: 1fr 1fr;
-        align-items: center;
+        grid-auto-rows: min-content;
     }
 
-    #main-header > nav {
+    #main-header img {
-        justify-content: center;
+        grid-column: 1;
+        margin-left: auto;
+    }
+
+    #main-header h1 {
+        grid-column: 2;
+    }
+
+    #main-header #main-nav {
+        grid-row: 2;
+        grid-column: 1 / 3;
     }
 }
 
@@ -92,34 +106,56 @@ a:visited {
     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;
 }
 
-#homepage > section {
+main #main-info {
-    padding: 0 10px;
+    grid-column: 2;
+    grid-row: 1;
 }
 
-#homepage aside {
+main #events {
-    padding: 10px;
+    grid-column: 2;
+    grid-row: 2;
+}
+
+main #description {
+    grid-column: 1;
+    grid-row: 1 / 5;
 }
 
 #homepage .toolbar {
     grid-column: 1 / 3;
-    padding: 0 10px;
-
     text-align: right;
 }
 
 @media screen and (max-width: 889px){
     #homepage {
         grid-template-columns: 1fr;
+        row-gap: 50px;
     }
 
-    #homepage > aside {
+    main #main-info {
         grid-row: 3;
+        grid-column: 1;
     }
     
-    #homepage .toolbar {
+    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 @@ a:visited {
 /* 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 @@ a:visited {
 
 /* 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;
     }
 }
@@ -238,37 +293,40 @@ a:visited {
     background: linear-gradient(to top, black, rgba(0,0,0,0));
 }
 
-/* Status */
+/* nav */
 
-aside .status-container > * {
+#main-nav {
-    text-align: inherit;
-}
-
-.status-container > * {
     text-align: center;
 }
 
-a.status-container > p {
+#main-nav > *:not(:last-child)::after {
-	text-align: inherit;
+    content: " | ";
+    content: " | " / "";
+    text-decoration: none !important;
 }
 
-.status-container.opened strong {
+/* Affiches */
-	color: green;
+
-	font-weight: bold;
+.affiche {
+    border: solid 1px currentColor;
+    padding: 10px;
+    background: black;
+    position: relative;
 }
 
-.status-container.closed strong {
+.affiche:not(:first-child){
-	color: red;
+    margin-top: 25px;
-	font-weight: bold;
 }
 
-img.status-icon {
+.affiche:not(:last-child){
-	max-width: 100px;
+    margin-bottom: 25px;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
 }
 
-aside img.status-icon {
+.affiche .credits {
-	margin-left: 0;
+    font-size: 0.5em;
+    text-align: right;
+}
+
+.affiche .credits, .affiche .credits * {
+    color: inherit;
 }

images/favicon.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="94.468002"
+   height="94.468002"
+   viewBox="0 0 94.468002 94.468003"
+   sodipodi:docname="favicon.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="130.08"
+   inkscape:export-ydpi="130.08"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1341"
+     inkscape:window-height="927"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="4.8680853"
+     inkscape:cx="38.824299"
+     inkscape:cy="53.306379"
+     inkscape:current-layer="svg2"
+     inkscape:window-x="56"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="opacity:1;fill:#000000;fill-opacity:1;stroke:#fff600;stroke-width:5.58135;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="rect4542"
+     width="88.88665"
+     height="88.88665"
+     x="2.7906749"
+     y="2.7906749" />
+  <circle
+     style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:33.0659;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="circle868"
+     cx="47.234001"
+     cy="47.234001"
+     r="16.613539" />
+</svg>

index.html

@@ -3,6 +3,8 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="shortcut icon" href="/images/favicon.svg" type="image/svg+xml">
+	<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
 	<title>Laboratoire Ouvert Lyonnais</title>
 	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 
@@ -13,61 +15,108 @@
 	</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/dac.css">
 </head>
 
 <body>
 
-	<div class="fullscreen-background">
+	<div class="fullscreen-background" aria-hidden="true">
-		<video src="/videos/background_sound.mp4" loop poster="images/world_network.jpg" id="background-video" loading="lazy"></video>
+		<video muted loop poster="images/world_network.jpg" id="background-video">
-		<img src="/images/world_network.muted.jpg" aria-hidden="true" id="background-poster"/>
+			<source src="videos/background.webm" type="video/webm" />
+			<source src="videos/background.mp4" type="video/mp4">
+		</video>
+		<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." />
 
-		<nav>
+		<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
-			<a href="https://git.labolyon.fr/explore/repos ">Wiki/Git</a>
+
+		<nav id="main-nav">
+			<a href="https://git.labolyon.fr/explore/repos ">Dépots Git</a>
+			<a href="https://wiki.labolyon.fr/">Wiki</a>
+			<a href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
 		</nav>
 	</header>
 
 	<main id="homepage">
+		
 		<section id="description">
-			<p>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.</p>
 
-			<p>L'électronique, l'informatique, la mécanique, la chimie, les arts numériques, la cuisine expérimentale sont les pratiques des loliens.
+			<dl class="definitions">
-			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.</p>
+				<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>
 
-			<p>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.</p>
+				<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>
+
+			<hr>
+
+			<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 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>
 
 			<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-te-s réunis</marquee>
+				<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">
+		<aside id="main-info">
-			<h2>Informations</h2>
+			
-			<section class="info">
+			<address><a href="geo:45.7732495,4.8372366">
-				<div>Permanence : mardis à partir de 19h00</div>
+				7 Place Louis Chazette 69001 Lyon<br/>
-				<div>Adresse : <address>7 Place Louis Chazette 69001 Lyon</address></div>				      
+				45° 46' 23.698" N 4° 50' 14.052" E 
-			</section>
+			</a></address>
+
+			<p> Ouvert tous les mardis à partir de 19h</p>
 
 			<section>
-				<a href="http://ici.labolyon.fr/" id="status">Vérifier si le local est ouvert 🠖</a>
+				<a href="/status/" id="status">Vérifier si le local est ouvert 🠖</a>
 				<script src="/js/status.js"></script>
 			</section>
-
-			<h2>Canaux</h2>
-			<section>
-				<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>
 
+		<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>
+				
+				<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>
+			</article>
+
+		</section>
 
 		<div class="toolbar">
 			<button id="play-background" hidden>