Merge branch 'main' into feat/status

This commit is contained in:
EpicKiwi 2023-11-04 17:14:17 +01:00
commit 072b907dd1
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
18 changed files with 403 additions and 94 deletions

BIN
css/affiches/Arvo-Bold.ttf Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

34
css/affiches/cafe.css Normal file
View File

@ -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;
}

57
css/affiches/dac.css Normal file
View File

@ -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;
}

35
css/affiches/perm.css Normal file
View File

@ -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";
}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
images/affiches/dac.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
images/affiches/perm-bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
images/affiches/perm-bg.xcf Normal file

Binary file not shown.

BIN
images/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

76
images/favicon.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -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">
<video src="/videos/background_sound.mp4" loop poster="images/world_network.jpg" id="background-video" loading="lazy"></video>
<img src="/images/world_network.muted.jpg" aria-hidden="true" id="background-poster"/>
<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 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>
<a href="https://git.labolyon.fr/explore/repos ">Wiki/Git</a>
<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
<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.
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>
<dl class="definitions">
<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>
<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>
<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·tes réunis</marquee>
</p>
</section>
<aside id="main-side">
<h2>Informations</h2>
<section class="info">
<div>Permanence : mardis à partir de 19h00</div>
<div>Adresse : <address>7 Place Louis Chazette 69001 Lyon</address></div>
</section>
<aside id="main-info">
<address><a href="geo:45.7732495,4.8372366">
7 Place Louis Chazette 69001 Lyon<br/>
45° 46' 23.698" N 4° 50' 14.052" E
</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>

BIN
videos/background.webm Normal file

Binary file not shown.