Added drags and nerds

index.html

@@ -44,6 +44,7 @@
 			<a property="url" href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
 			<a property="url" href="https://nerdculture.de/@labolyon">Fédiverse</a>
 			<a property="url" href="https://matrix.to/#/#general:chat.labolyon.fr">Salon Matrix</a>
+			<a property="url" href="/presentation.html">Présentation</a>
 		</nav>
 	</header>
 
@@ -119,7 +120,121 @@
 				<p>Adhésion conseillée (prix libre)</p>
 			</article>
 
-			<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
+			<article class="event affiche affiche-drags-nerds-hackathon">
+				<style>
+					@font-face {
+						font-family: "Press Start 2P";
+						src: url("./css/affiches/PressStart2P-Regular-DogiNJoF.ttf");
+						font-weight: normal;
+					}
+
+					@font-face {
+						font-family: velvelyne;
+						src: url("./css/affiches/Velvelyne-Light-C9f5yZCm.ttf") format("truetype");
+					}
+
+					@font-face {
+						font-family: velvelyne;
+						src: url("./css/affiches/Velvelyne-Bold-CR91h96S.ttf") format("truetype");
+						font-weight: bold;
+					}
+
+					.affiche-drags-nerds-hackathon {
+						background: white;
+						grid-row: span 2;
+						color: black;
+						padding: 0;
+						border-color: white;
+            			line-height: 1.4;
+						font-family: monospace;
+						font-size: 1rem;
+						padding-bottom: 35px;
+					}
+
+					.affiche-drags-nerds-hackathon > h2 {
+						padding: 15px;
+						margin: 0;
+						font-family: velvelyne;
+					}
+
+					.affiche-drags-nerds-hackathon > p,
+					.affiche-drags-nerds-hackathon > ul {
+						padding: 5px 15px;
+						margin: 0;
+						margin-top: 7px;
+						margin-bottom: 7px;
+						padding-right: 15px;
+					}
+
+					.affiche-drags-nerds-hackathon > ul {
+						padding-left: 30px;
+					}
+
+					.affiche-drags-nerds-hackathon li {
+						margin-top: 10px;
+						margin-bottom: 10px;
+					}
+
+					.affiche-drags-nerds-hackathon li::marker {
+						content: "> ";
+					}
+
+					.affiche-drags-nerds-hackathon > img:first-of-type {
+						display: block;
+						width: 100%;
+					}
+
+					.affiche-drags-nerds-hackathon > p:first-of-type {
+						background: black;
+						color: white;
+						margin-top: 0;
+						margin-bottom: 15px;
+						padding: 20px;
+						padding-top: 0;
+						font-weight: bold;
+					}
+
+					.affiche-drags-nerds-hackathon a {
+						color: inherit;
+						font-weight: bold;
+						text-decoration: underline;
+					}
+				</style>
+
+				<img src="./images/affiches/drags-nerds-hackathon-header.png" alt="Drags & Nerds #2: Une image en noir et blanc avec le titre de l'événement et des photos détourées de drag queens.">
+
+				<p>
+					A tous&middot;tes les drags, tous&middot;tes les nerds et l'ensemble des personnes entre les deux.
+					Vous êtes invité·es à la grande soirée Drags&Nerds du 22 mai 2026 au Grrrnd Zero !
+				</p>
+
+				<h2>&gt; Résidence et Hackathon</h2>
+
+				<p>
+					Pour se rencontrer et construire ensemble, une grande Résidence/Hackathon se déroulera du <strong><time datetime="2026-04-17T10:00:00">17</time> au <time datetime="2026-04-19T19:00:00">19&nbsp;Avril&nbsp;2026</time></strong>.
+					<strong>Ça se passe au Laboratoire Ouvert Lyonnais</strong>, un Hackerspace queer de Lyon. 7 Place Louis Chazette 69001 Lyon.
+				</p>
+
+				<p>
+					On construira nos performances, nos costumes, nos makeups, nos mises en scène...
+					Tu as envie de faire du lip sync ? De jouer de ton synthé ? D'expérimenter de nouveaux sons ? 
+					Ou juste de donner un coup de pouce à des drags pour leurs show ?
+					Il y a une place pour toi.
+				</p>
+
+				<ul>
+					<li>Repas végétaliens le midi</li>
+					<li>Outils pour souder, coudre, coder, couper, clouer et imprimer en 3D en libre service</li>
+					<li>Masques FFP2 pour l'autodéfense sanitaire</li>
+				</ul>
+
+				<p style="text-align: center;">
+					Inscrivez vous en envoyant un email à<br/><a href="mailto:drags-nerds@epickiwi.fr">drags‑nerds@epickiwi.fr</a><br/>
+					Ou rendez vous sur <a href="https://drags-nerds.net/" target="_blank">drags‑nerds.net</a>
+				</p>
+			</article>
+
+			<!--<article class="event affiche affiche-debian-release-party" property="event" typeof="Event">
 				<style>
 					.affiche-debian-release-party {
 						
@@ -180,7 +295,7 @@
 					Rejoignez nous sur matrix:<br/>
 					<code>#trixiereleaseparty-lyon:club1.fr</code>
 				</p>
-			</article>
+			</article>-->
 
 			<!--<article class="event affiche affiche-jamfetedelamusique" property="event" typeof="Event">
 				<img src="./images/affiches/jamfetedelamusique.png" alt="Affiche de la jam ouverte du 21 Juin 2025 : Un motif abstrait généré de manière electronique." aria-labelledby="jam21062025-decription" />

presentation.html

@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html lang="fr" vocab="http://schema.org/">
+<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">
+	<link rel="me" href="https://nerdculture.de/@labolyon" />
+	<title>Présentation - Laboratoire Ouvert Lyonnais</title>
+	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
+
+	<style>
+		.fullscreen-background {
+			display: none;
+		}
+	</style>
+
+	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
+</head>
+
+<body typeof="Organization Place" resource="https://labolyon.fr/">
+
+	<div class="fullscreen-background" aria-hidden="true">
+		<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>
+		<img src="/images/world_network.muted.jpg" id="background-poster"/>
+	</div>
+
+	<header id="main-header">
+		<img property="logo" 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 property="name">Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
+
+		<nav id="main-nav">
+			<link property="url" href="https://labolyon.fr/">
+			<a property="url" href="https://git.labolyon.fr/explore/repos">Dépots Git</a>
+			<a property="url" href="https://wiki.labolyon.fr/">Wiki</a>
+			<a property="url" href="https://listes.infini.fr/listes.labolyon.fr/subscribe/discussions">Liste de diffusion</a>
+			<a property="url" href="https://nerdculture.de/@labolyon">Fédiverse</a>
+			<a property="url" href="https://matrix.to/#/#general:chat.labolyon.fr">Salon Matrix</a>
+			<a property="url" href="/presentation.html">Présentation</a>
+		</nav>
+	</header>
+
+	<main id="homepage">
+		
+		<section id="description">
+
+			<div property="abstract">
+				
+				<p>Le Laboratoire Ouvert Lyonnais (L.O.L) est une association de loi 1901 destinéee à être un lieu d'échanges et d'expérimentations pour toute personne passionnée de technologie et/ou d'informatique. 
+				   Nous sommes centrés sur la réutilisation, le recyclage et le bidouillage de matériels dans le but de comprendre leur fonctionnement et de les utiliser dans un but bienveillant et éducatif.</p>
+
+				<p>Nous aimons expérimenter et trouver de nouveaux usages à des objets. Nous sommes une communauté tournée vers le partage et l'apprentissage et nous hébergeons également nos propres services, par nos propres moyens.
+				   Nous recyclons également du matériel informatique, afin d'aider les personnes à obtenir des ressources pour appendre et de continuer à fournir nos services de manière bénévole. Toute personne peut emprunter ou récupérer du matériel, quelle que soit sa situation.</p>
+
+				<p>Nous sommes installé dans un local au 7 place Louis Chazette 69001 Lyon. Nous travaillons en collaboration avec l'assocation LALIS, dont nous aidons à héberger le site web et divers services internes.</p>
+
+				<p>Numéro RNA : W691079861</p>
+
+			</div>
+		</section>
+
+		<div class="toolbar">
+			<button id="play-background" hidden>
+				<img src="/images/play.svg" alt="Play" class="play" title="Play" />
+				<img src="/images/pause.svg" alt="Pause" class="pause" hidden title="Pause" />
+			</button>
+		</div>
+	</main>
+
+	<script src="js/background.js"></script>
+</body>
+</html>