ménage et affiche permanence

2026-08-06 01:22:12 +02:00
parent 407eeef09e
commit f435cb36b8
44 changed files with 138 additions and 13738 deletions
@@ -0,0 +1,134 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Permanence du mardi soir</title>
+    <link rel="stylesheet" href="/style/typo.css">
+    <link rel="stylesheet" href="/style/default.css">
+    <style data-import="no-import">
+        html{
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            top: 0;
+            left: 0;
+
+            background-color: var(--mardi-back-color);
+        }
+
+        body{
+            height: 100%;
+            max-width: 1000px;
+            background-color: var(--mardi-accent-color);
+            margin: 0;
+        }
+    </style>
+    <style>
+        :root{
+            --mardi-back-color: rgb(37, 1, 65);
+            --mardi-main-color: rgb(255, 74, 231);
+            --mardi-accent-color: rgb(0, 255, 21);
+        }
+
+        .afficheMardis{
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+            background-color: var(--mardi-main-color);
+
+               @container( width > 650px ){
+                    flex-direction: row;
+                }
+        }
+
+            
+
+                    #imgContainer{
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: flex-end;
+                        align-items: flex-start;
+
+                        width: 100%;
+                        max-height: 33vh;
+                        box-sizing: border-box;
+                        overflow: hidden;
+                        gap: 3.33px;
+                        padding-top: 3.33px;
+
+                        img{
+                            max-width: 34%;
+                            box-sizing: border-box;
+                        }
+                    }
+
+                    #textContainer{
+                        padding: 13.12px;
+                        color: var(--mardi-back-color);
+
+                        h4{
+                            font-family: 'karrik';
+                            text-transform: uppercase;
+                            font-size: 33px;
+                            margin-bottom: 3.33px;
+                        }
+
+                        p{
+                            font-family: 'velvelyne';
+                            font-family: 16.1px;
+                            margin-bottom: 7.77px;
+                        }
+
+                        .event-hours{
+                            margin-left: 33px;
+                            font-size: 22px;
+                            font-weight: bold;
+
+                                    span[property="location"]{
+                                        font-size: 16.1px;
+                                        margin-left: -13.12px;
+                                    }
+                            
+                        }
+                    }
+        }
+
+        @container( width < 650px ){
+                .afficheMardis{
+                    flex-direction: column;
+                }
+        }
+
+
+     
+    </style>
+</head>
+<body>
+    <article class="afficheMardis" property="event" typeof="Event">
+        <div id="imgContainer">
+            <img src="/affiches/mardis/IMG001.jpg" alt="une lampe d'atelier sur un grand plan de travail un peu désorganisé, quelques chaises un peu disparates, on distingue un empilement de caisses et cartons à l'arrière plan">
+            <img src="/affiches/mardis/IMG002.jpg" alt="un coin atelier bien équipé et éclairé, beaucoup d'outils, une échelle au bord du cadre, et  on aperçoit un espace avec un ordinateur sur une mezzanine, éclairé d'une lumière rouge vive">
+            <img src="/affiches/mardis/IMG333.jpg" alt="un grand espace de rangement très haut et plutôt ajouré décorée d'un dessin de poulpe rose fluo, qui contient des outils divers, éclairé d'un néon bleu pâle">   
+        </div>
+        
+        <div id="textContainer" property="description">
+            <h4 property="name">Permanence du LOL</h1>
+
+                <p>Venez chiller avec nous, partager un thé ou une biere.</p>
+
+                <p>On échange technique et savoir-faire<br>sur tous les sujets notamment le logiciel libre, hacking,<br> couture, bricole et bidouille<br> mais aussi de nos projets personnels ou collectifs</p>
+            
+
+            <p class="event-hours">
+                <span property="eventSchedule" typeof="Schedule">
+                    <data property="byDay" content="Tuesday">Tous les mardis</data><br> à partir de&nbsp;<data property="startTime" content="19:00">19h</data>
+                </span>
+                <br>
+                <span property="location" href="https://labolyon.fr/">au local du LOL</span>
+            </p>
+            <p>Adhésion conseillée (prix libre)</p>
+        </div>
+    </article>
+</body>
+</html>