rework de la description et des events du LOL
This commit is contained in:
parent
0905cc3d7f
commit
d6c19dc288
GPG Key ID:
C4B28FD2729941CE
BIN
css/affiches/Arvo-Bold.ttf
Normal file
BIN
css/affiches/Arvo-Bold.ttf
Normal file
Binary file not shown.
BIN
css/affiches/AzeretMono-VariableFont_wght.ttf
Normal file
BIN
css/affiches/AzeretMono-VariableFont_wght.ttf
Normal file
Binary file not shown.
34
css/affiches/cafe.css
Normal file
34
css/affiches/cafe.css
Normal 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;
|
||||
}
|
||||
35
css/affiches/perm.css
Normal file
35
css/affiches/perm.css
Normal 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.svg");
|
||||
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";
|
||||
}
|
||||
|
||||
.affiche-perm .event-hours {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 1.2em;
|
||||
font-family: "Arvo";
|
||||
}
|
||||
151
css/style.css
151
css/style.css
@ -30,9 +30,10 @@ a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
a:hover, a:focus {
|
||||
color: white;
|
||||
background-color:black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
@ -49,81 +50,42 @@ a:visited {
|
||||
|
||||
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 > nav {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main-header > nav {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* main area */
|
||||
#main-header h1 {
|
||||
line-height: 25px;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
font-family: monospace;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
/* main area */
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
grid-auto-rows: min-content;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
main > section {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
main aside {
|
||||
padding: 10px;
|
||||
row-gap: 15px;
|
||||
column-gap: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
main .toolbar {
|
||||
grid-column: 1 / 3;
|
||||
padding: 0 10px;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 889px){
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
main > aside {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
main .toolbar {
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
|
||||
main .toolbar button {
|
||||
@ -148,6 +110,8 @@ main .toolbar button img[hidden] {
|
||||
#description {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#description > *:first-child {
|
||||
@ -186,23 +150,23 @@ dl.definitions > dt {
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@ -253,4 +217,71 @@ dl.definitions > dt {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to top, black, rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
/* nav */
|
||||
|
||||
#main-nav {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#main-nav > *:not(:last-child)::after {
|
||||
content: " | ";
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Affiches */
|
||||
|
||||
.affiche {
|
||||
border: solid 1px currentColor;
|
||||
padding: 10px;
|
||||
background: black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.affiche:not(:first-child){
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.affiche:not(:last-child){
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.affiche .credits {
|
||||
font-size: 0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
471
images/affiches/perm-bg.svg
Normal file
471
images/affiches/perm-bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 135 KiB |
74
index.html
74
index.html
@ -13,12 +13,15 @@
|
||||
</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/cafe.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="fullscreen-background" aria-hidden="true">
|
||||
<video muted loop poster="images/world_network.jpg" autoplay id="background-video">
|
||||
<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>
|
||||
@ -28,15 +31,12 @@
|
||||
<header id="main-header">
|
||||
<img class="logo" src="images/logo_picto.svg" alt="Laboratoire Ouvert Lyonnais" />
|
||||
|
||||
<nav>
|
||||
<a href="https://git.labolyon.fr/explore/repos ">Wiki/Git</a>
|
||||
</nav>
|
||||
<h1>Laboratoire <br/>Ouvert <br/>Lyonnais</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section id="description">
|
||||
|
||||
<section id="definitions">
|
||||
<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,7 +44,26 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
@ -55,25 +74,42 @@
|
||||
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>
|
||||
<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>
|
||||
<section id="events">
|
||||
|
||||
<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>
|
||||
<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 19h <br/>
|
||||
au local du LOL</strong></p>
|
||||
|
||||
<p>Adhésion 5€ pour le mois</p>
|
||||
|
||||
<p class="credits">Pizzas par <a href="https://thenounproject.com/nugraha.farra/">Farra Nugraha</a></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">
|
||||
<button id="play-background" hidden>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user