Compare commits
10 Commits
956f4ecca4
...
b98e6fb434
| Author | SHA1 | Date | |
|---|---|---|---|
b98e6fb434
|
|||
|
c7cb2acc7e
|
|||
|
443c2599bb
|
|||
|
6727d1f104
|
|||
|
b8b5dfa9b1
|
|||
| 8c4c9673de | |||
|
5fd2863158
|
|||
|
e635a8be95
|
|||
|
995516ff40
|
|||
|
1a235939e5
|
BIN
css/affiches/PixelifySans-Regular.ttf
Normal file
BIN
css/affiches/PixelifySans-Regular.ttf
Normal file
Binary file not shown.
57
css/affiches/dac.css
Normal file
57
css/affiches/dac.css
Normal 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;
|
||||
}
|
||||
121
css/style.css
121
css/style.css
@ -40,13 +40,18 @@ 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;
|
||||
|
||||
@ -55,10 +60,8 @@ a:visited {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-header {
|
||||
justify-content: center;
|
||||
}
|
||||
#main-header > * {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#main-header h1 {
|
||||
@ -67,6 +70,34 @@ a:visited {
|
||||
font-weight: normal;
|
||||
font-family: monospace;
|
||||
color: yellow;
|
||||
|
||||
flex: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#main-header nav {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-header {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
#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 */
|
||||
@ -79,6 +110,22 @@ main {
|
||||
column-gap: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 15vh;
|
||||
}
|
||||
|
||||
main #main-info {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
main #events {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
main #description {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 5;
|
||||
}
|
||||
|
||||
main .toolbar {
|
||||
@ -86,6 +133,33 @@ main .toolbar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 889px){
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 50px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
|
||||
main .toolbar button {
|
||||
@ -223,12 +297,11 @@ main > aside {
|
||||
|
||||
#main-nav {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#main-nav > *:not(:last-child)::after {
|
||||
content: " | ";
|
||||
content: " | " / "";
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
@ -257,31 +330,3 @@ main > aside {
|
||||
.affiche .credits, .affiche .credits * {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
|
||||
@media screen and (max-width: 889px){
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
row-gap: 50px;
|
||||
}
|
||||
|
||||
main > aside {
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
main .toolbar {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#description {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#events {
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
BIN
images/affiches/dac-background.png
Normal file
BIN
images/affiches/dac-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
images/affiches/dac-notes.png
Normal file
BIN
images/affiches/dac-notes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
images/affiches/dac.png
Normal file
BIN
images/affiches/dac.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
74
index.html
74
index.html
@ -15,7 +15,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/cafe.css">
|
||||
<link rel="stylesheet" href="css/affiches/dac.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -25,18 +25,25 @@
|
||||
<source src="videos/background.webm" type="video/webm" />
|
||||
<source src="videos/background.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="/images/world_network.muted.jpg" alt="Logo du laboratoire ouvert lyonnais, un rectangle entourant 3 lignes de points et trais des lettres L O L en morse." id="background-poster"/>
|
||||
<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." />
|
||||
|
||||
<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://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="definitions">
|
||||
<section id="description">
|
||||
|
||||
<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>
|
||||
@ -44,31 +51,14 @@
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<aside>
|
||||
<section 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 <br/>
|
||||
et tous les samedis de 14h à 19h</p>
|
||||
</section>
|
||||
<hr>
|
||||
|
||||
<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>
|
||||
</aside>
|
||||
|
||||
<section id="description">
|
||||
<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>
|
||||
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>
|
||||
@ -79,8 +69,32 @@
|
||||
</p>
|
||||
</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>
|
||||
</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 Octobre</time> à partir de <time datetime="18:30">18h30</time> au LOL, <a href="geo:45.7732495,4.8372366">7 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>
|
||||
|
||||
@ -93,20 +107,6 @@
|
||||
<p>Adhésion 5€ pour le mois</p>
|
||||
</article>
|
||||
|
||||
<article class="event affiche-cafe affiche">
|
||||
<h1>Hacking cafe<span class="cursor">▁</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 14h à 19h <br/>
|
||||
au local du LOL</strong></p>
|
||||
|
||||
<p>Adhésion 5€ pour le mois</p>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="toolbar">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user