Ajout de l'affiche des JDLL 2024

css/affiches/back.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.6079388mm"
+   height="3.1703224mm"
+   viewBox="0 0 4.6079388 3.1703224"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2"><linearGradient
+       id="linearGradient22086"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop22082" /><stop
+         style="stop-color:#d4d4d4;stop-opacity:1;"
+         offset="1"
+         id="stop22084" /></linearGradient><linearGradient
+       xlink:href="#linearGradient22086"
+       id="linearGradient22088"
+       x1="24.94607"
+       y1="37.351017"
+       x2="25.431881"
+       y2="37.910633"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       xlink:href="#linearGradient22086"
+       id="linearGradient22096"
+       x1="27.680107"
+       y1="37.517262"
+       x2="28.045597"
+       y2="37.891655"
+       gradientUnits="userSpaceOnUse" /></defs><g
+     id="layer4"
+     transform="translate(-24.106776,-36.438155)"><g
+       id="g18540"
+       style="display:inline;fill:#bdbdbd;fill-opacity:1"><path
+         style="fill:url(#linearGradient22088);fill-opacity:1;stroke:#07077d;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m 24.297671,37.95924 1.296798,-1.216447 0.0019,0.646007 1.376938,0.0036 -0.01322,1.089295 -1.296188,-0.01308 -0.0089,0.827227 z"
+         id="path14411" /><circle
+         style="opacity:1;fill:url(#linearGradient22096);fill-opacity:1;stroke:#07077d;stroke-width:0.210988;stroke-linejoin:round;stroke-miterlimit:10.5;stroke-opacity:1;paint-order:markers fill stroke"
+         id="path14465"
+         cx="28.041388"
+         cy="37.955338"
+         r="0.56783295" /></g></g></svg>

css/affiches/jdll2024.css

@@ -0,0 +1,147 @@
+.affiche-jdll2024 {
+    border-top-color: #fafaf5ff;
+    border-left-color: #fafaf5ff;
+    border-bottom-color: #868381ff;
+    border-right-color: #868381ff;
+    border-style: solid;
+    border-width: 4px;
+    background-color: #d3cfc9ff;
+    padding: 0;
+    color: black;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    padding-bottom: 4px;
+}
+
+.affiche-jdll2024 iframe {
+    flex: 1;
+    border-bottom-color: #fafaf5ff;
+    border-right-color: #fafaf5ff;
+    border-top-color: #868381ff;
+    border-left-color: #868381ff;
+    border-style: solid;
+    border-width: 2px;
+}
+
+.affiche-jdll2024 button {
+    border-top-color: #fafaf5ff;
+    border-left-color: #fafaf5ff;
+    border-bottom-color: #868381ff;
+    border-right-color: #868381ff;
+    border-style: solid;
+    border-width: 2px;
+    background-color: #d3cfc9ff;
+}
+
+.affiche-jdll2024 header {
+    height: 25px;
+
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: row;
+
+    background: linear-gradient(to right, #112160ff, #a6c6f2ff);
+    padding: 2px 4px;
+    box-sizing: border-box;
+
+    column-gap: 4px;
+
+    border-bottom: solid 2px #d3cfc9ff;
+}
+
+.affiche-jdll2024 > :not(header) {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.affiche-jdll2024 header h1 {
+    flex: 1;
+    color: white;
+    margin: 0;
+    font-size: 1rem;
+}
+
+.affiche-jdll2024 header > img {
+    height: 80%;
+}
+
+.affiche-jdll2024 header > button {
+    height: 100%;
+    display: block;
+    padding: 2px;
+}
+
+.affiche-jdll2024 button img {
+    height: 100%;
+    display: block;
+    box-sizing: border-box;
+}
+
+.affiche-jdll2024 nav {
+    padding: 2px;
+
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: row;
+
+    border-bottom: groove 2px #fafaf5ff;
+}
+
+.affiche-jdll2024 nav:first-of-type {
+    height: 40px;
+}
+
+.affiche-jdll2024 nav button {
+    height: 100%;
+    font-size: 0.6rem;
+    width: 50px;
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+
+.affiche-jdll2024 nav button img {
+    height: 15px;
+}
+
+.affiche-jdll2024 nav hr {
+    flex: 1;
+    border: none;
+}
+
+.affiche-jdll2024 nav > img {
+    height: 100%;
+    border-bottom-color: #fafaf5ff;
+    border-right-color: #fafaf5ff;
+    border-top-color: #868381ff;
+    border-left-color: #868381ff;
+    border-style: solid;
+    border-width: 1px;
+}
+
+.affiche-jdll2024 nav input {
+    flex: 1;
+    border-bottom-color: #fafaf5ff;
+    border-right-color: #fafaf5ff;
+    border-top-color: #868381ff;
+    border-left-color: #868381ff;
+    border-style: solid;
+    border-width: 2px;
+    font-size: 0.7rem;
+}
+
+.affiche-jdll2024 nav label {
+    font-size: 0.7rem;
+    margin-right: 1ex;
+}
+
+.affiche-jdll2024 nav:last-of-type {
+    border-bottom: none;
+}

css/style.css

@@ -123,8 +123,10 @@ main #events {
 
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-auto-flow: 1fr;
     grid-auto-flow: row;
+    grid-auto-rows: 1fr;
+    column-gap: 15px;
+    row-gap: 15px;
 }
 
 main #description {
@@ -392,10 +394,6 @@ main > aside {
     position: relative;
 }
 
-.affiche:not(:last-child){
-    margin-bottom: 25px;
-}
-
 .affiche .credits {
     font-size: 0.5em;
     text-align: right;

index.html

@@ -17,6 +17,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/jdll2024.css">
 </head>
 
 <body>
@@ -105,6 +106,71 @@
 				<p>Adhésion 5€ pour le mois</p>
 			</article>
 
+			<article class="event affiche-jdll2024 affiche">
+				<header>
+					<img src="/images/favicon.png" alt="Favicon du LOL" />
+					<h1 id="jdll-2024-title">Le LOL aux JDLL 2024</h1>
+
+					<button>
+						<img src="/css/affiches/reduire.png" alt="Reduire" />
+					</button>
+					<button>
+						<img src="/css/affiches/agrandir.png" alt="Agrandir" />
+					</button>
+					<button>
+						<img src="/css/affiches/fermer.png" alt="Fermer" />
+					</button>
+				</header>
+				<nav>
+					<button id="jdll-2024-back">
+						<img src="/css/affiches/back.png" alt="Back" />
+						Back
+					</button>
+					<button id="jdll-2024-forward">
+						<img src="/css/affiches/forward.png" alt="Back" />
+						Forward
+					</button>
+					<button id="jdll-2024-home">
+						<img src="/css/affiches/home.png" alt="Home" />
+						Home
+					</button>
+					<hr>
+					<img src="/css/affiches/tux.png" alt="Tux" />
+				</nav>
+				<nav>
+					<label for="jdll-2024-location">Location : </label>
+					<input type="url" name="location" id="jdll-2024-location" value="/jdll2024/affiche.html"/>
+				</nav>
+				<iframe src="/jdll2024/affiche.html" id="jdll-2024-iframe" frameborder="0"></iframe>
+			</article>
+
+			<script>
+				(() => {
+					const iframe = document.getElementById("jdll-2024-iframe");
+					const initialValue = iframe.src;
+
+					iframe.addEventListener("load", () => {
+						document.getElementById("jdll-2024-location").value = iframe.src
+						document.getElementById("jdll-2024-title").textContent = iframe.contentWindow.document.title
+					})
+
+					document.getElementById("jdll-2024-location").addEventListener("change", e => {
+						iframe.src = e.target.value
+					})
+
+					document.getElementById("jdll-2024-back").addEventListener("click", () => {
+						iframe.contentWindow.history.back()
+					})
+
+					document.getElementById("jdll-2024-forward").addEventListener("click", () => {
+						iframe.contentWindow.history.forward()
+					})
+
+					document.getElementById("jdll-2024-home").addEventListener("click", () => {
+						iframe.src = initialValue
+					})
+				})()
+			</script>
 		</section>
 
 		<div class="toolbar">

jdll2024/affiche.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Le LOL aux JDLL 2024</title>
+</head>
+<body>
+    <h1>Le LOL sera aux <a href="https://jdll.org/">JDLL 2024</a> !</h1>
+
+    <p>C'est le 25 et le 26 mai à l'<a href="https://www.openstreetmap.org/?mlat=45.73257&mlon=4.83185#map=19/45.73257/4.83185" target="_blank">ENS</a> ! Le LOL sera présent pendant tout l'événement pour se rencontrer, discuter et hacker ensemble. En plus de ça, nous allons proposer un temps d'expression libre sur le web.</p>
+
+    <p>Au programme : une découverte des techniques pour fabriquer son petit coin d'Internet à soi. Découvrir et utiliser les outils du Web pour créer des pages utiles ou non, belles ou moches, mais surtout uniques et personnelles.<br/>
+    Il n'y a aucun pré-requis, si ce n'est savoir utiliser un clavier.</p>
+
+    <p>Venez nous rencontrer, hacker ou bien discuter sur le stand.</p>
+</body>
+</html>