Merge branch 'master' of epickiwi/site-lol into master

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,5 @@
+.affiche-dac img {
+    width: 100%;
+    max-height: 50vh;
+    object-fit: scale-down;
+}

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,96 +30,132 @@ 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;
     }
 }
 
-/* main area */ 
+/* 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;
+    padding-right: 10px;
+    padding-bottom: 15vh;
 }
 
-main > section {
+main #main-info {
-    padding: 0 10px;
+    grid-column: 2;
+    grid-row: 1;
 }
 
-main aside {
+main #events {
-    padding: 10px;
+    grid-column: 2;
+    grid-row: 2;
+}
+
+main #description {
+    grid-column: 1;
+    grid-row: 1 / 5;
 }
 
 main .toolbar {
     grid-column: 1 / 3;
-    padding: 0 10px;
-
     text-align: right;
 }
 
 @media screen and (max-width: 889px){
     main {
         grid-template-columns: 1fr;
+        row-gap: 50px;
     }
 
-    main > aside {
+    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;
     }
 }
@@ -146,13 +182,32 @@ main .toolbar button img[hidden] {
 /* 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 @@ main .toolbar button img[hidden] {
 
 /* 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;
     }
 }
@@ -236,4 +291,42 @@ main .toolbar button img[hidden] {
     bottom: 0;
     left: 0;
     background: linear-gradient(to top, black, rgba(0,0,0,0));
+}
+
+/* nav */
+
+#main-nav {
+    text-align: center;
+}
+
+#main-nav > *:not(:last-child)::after {
+    content: " | ";
+    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;
 }

index.html

@@ -13,56 +13,103 @@
 	</style>
 
 	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+
+	<link rel="stylesheet" href="css/affiches/perm.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" autoplay 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://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="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 peux 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>
+			<address><a href="geo:45.7732495,4.8372366">
-			<section class="info">
+				7 Place Louis Chazette 69001 Lyon<br/>
-				<div>Permanence : mardis à partir de 19h00</div>
+				45° 46' 23.698" N 4° 50' 14.052" E 
-				<div>Adresse : <address>7 Place Louis Chazette 69001 Lyon</address></div>				      
+			</a></address>
-			</section>
+			<p> Ouvert tous les mardis à partir de 19h <br/>
-
+				et tous les samedis de 14h à 19h</p>	
-			<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-dac affiche">
+				<img src="images/affiches/dac.png" alt="La Digital Audio Community se donne rendez-vous le mercredi 13 septembre à partir de 18h30 au LOL, 7 place Louis Chazette. Au Programme : Ateliers Livre-Coding, Discussions Informatique Musicale && Découverte Code Créatif............" />
+			</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>
+
+			<!--<article class="event affiche-cafe affiche">
+				<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>
+
+				<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>