From dfdabf2ba2b77cc37406442b3e96d7e49f488700 Mon Sep 17 00:00:00 2001
From: distorsion <distorsion@systemli.org>
Date: Fri, 24 Jan 2025 23:27:16 +0100
Subject: [PATCH] Met le snowflake en bas de la page. Update CSS

---
 site/blog.html                  | 10 ++++++----
 site/blog/article-template.html |  2 +-
 site/css/simple.css             | 35 ++++++++++++++-------------------
 site/index.html                 | 33 +++++++++++++++----------------
 site/presentation.html          |  2 +-
 5 files changed, 39 insertions(+), 43 deletions(-)
diff --git a/site/blog.html b/site/blog.html
index ac60631..8371e3e 100644
--- a/site/blog.html
+++ b/site/blog.html
@@ -11,7 +11,7 @@
   <body>
     <header>
       <h1>La Distorsion</h1>
-      <nav>
+      <nav class="menu">
         <ul>
           <li><a href="/index.html">maison</a></li>
           <li><a href="/presentation.html">présentation</a></li>
@@ -31,9 +31,11 @@
       </nav>
     </header>
     <main>
-      <ul>
-        <li><a href="/blog/article-template.html">Template d'article</a></li>
-      </ul>
+      <nav class="blog">
+        <ul>
+          <li><a href="/blog/article-template.html">Template d'article</a></li>
+        </ul>
+      </nav>
     </main>
     <footer>
       <p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>
diff --git a/site/blog/article-template.html b/site/blog/article-template.html
index 531da9b..2231682 100644
--- a/site/blog/article-template.html
+++ b/site/blog/article-template.html
@@ -11,7 +11,7 @@
   <body>
     <header>
       <h1>La Distorsion</h1>
-      <nav>
+      <nav class="menu">
         <ul>
           <li><a href="/index.html">maison</a></li>
           <li><a href="/presentation.html">présentation</a></li>
diff --git a/site/css/simple.css b/site/css/simple.css
index 5439c0a..b6647cb 100644
--- a/site/css/simple.css
+++ b/site/css/simple.css
@@ -1,15 +1,15 @@
-body{
+body {
 	padding: 0 1em;
 	line-height: 1.6;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
-main {
-	max-width: 40em;
+body > * {
+	max-width: 40rem;
 }
 header, footer {
-	width: 40em;
+	width: 100%;
 	text-align: center;
 }
 header {
@@ -18,14 +18,14 @@ header {
 footer {
 	border-top: solid 0.1rem;
 }
-nav ul {
+nav.menu ul {
 	padding: 0;
 }
-nav li {
+nav.menu li {
 	display: inline-block;
 	padding: 0 1em;
 }
-nav li:not(:last-of-type) {
+nav.menu li:not(:last-of-type) {
 	border-right: solid 0.1rem;
 }
 img {
@@ -34,21 +34,16 @@ img {
 a.mel {
 	font-family: monospace;
 }
-.snowflake {
-	border-left: solid 0.1rem;
-	padding: 1rem;
-	height: max-content;
-	max-width: 320px;
-	text-align: center;
-	font-size: 0.85em;
-}
-.snowflake iframe {
+iframe {
 	width: 320px;
 	height: 240px;
+	display: block;
+	margin: 1em auto;
 	border: none;
 }
-.flex {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
+nav.blog ul {
+	list-style: none;
+}
+nav.blog ul li:before {
+	content: '> ';
 }
diff --git a/site/index.html b/site/index.html
index b673c6f..008aa32 100644
--- a/site/index.html
+++ b/site/index.html
@@ -11,7 +11,7 @@
   <body>
     <header>
       <h1>La Distorsion</h1>
-      <nav>
+      <nav class="menu">
         <ul>
           <li><a href="/index.html">maison</a></li>
           <li><a href="/presentation.html">présentation</a></li>
@@ -24,27 +24,26 @@
             </select>
             <script>
               const selectSelect = document.querySelector(".style");
-              selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
+selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
             </script>
           </li>
         </ul>
       </nav>
     </header>
-    <div class="flex">
-      <main>
-        <p>La Distorsion est un hackerspace, un espace-temps de rencontre entre personnes intéressées par des pratiques critiques des sciences et des techniques. Les techniques, c'est vaste : on n'y fait pas que de l'ordinateur. Faire de la musique ou la cuisine pour 100 personnes, prendre soin des les un·e·s des autre·s et vivres des vies plus autonomes, c'est aussi en partie des questions techniques qui ont toute leur place au hackerspace. La Distorsion fait partie du <a href="https://interhacker.space">réseau interhack</a> qui tisse des liens entre hackerspaces.</p>
-        <h2>Infos pratiques</h2>
-        <p>La Distorsion se retrouve tous les jeudis, l'aprèm et même parfois le matin, jusqu'à 20h, heure de fermeture du batiment.</p>
-        <p>On est accueilli·es au <a href="https://fablabdigiscope.universite-paris-saclay.fr">Fablab UPSaclay</a>, qui se trouve dans le batiment 660 de l'université, sur le plateau de Saclay. Pour entrer, il faut sonner à la porte, dire au gardien que vous venez pour le fablab, et inscrire un nom sur une feuille (c'est pas idéal, on sait...).</p>
-        <p>C'est possible de nous parler par courrier électronique à <a class="mel">distorsion (A) groupes.renater.fr</a></p>
-        <h2>Les trucs à venir</h2>
-        <p>Il se passe à peu près tout le temps des choses, selon les envies et intérêts de personnes présentes, sur un mode très informel. Parfois on formalise un peu plus certaines activités, qu'on essaye d'annoncer ci-dessous.</p>
-        <p>(pour l'instant, c'est vide, mais hésite pas à passer nous voir)</p>
-      </main>
-      <div class="snowflake">
-        <p>En activant ce bloc, tu permets à des personnes au quatre coins du monde d'utiliser ta connexion pour se connecter à Internet à travers le réseau Tor, en utilisant un <a href="https://snowflake.torproject.org/">bridge snowflake</a> et ainsi échapper à la censure. Le bridge reste actif tant que cet onglet est ouvert !</p>
-        <iframe src="https://snowflake.torproject.org/embed.html" scrolling="no"></iframe>
-      </div>
+    <main>
+      <p>La Distorsion est un hackerspace, un espace-temps de rencontre entre personnes intéressées par des pratiques critiques des sciences et des techniques. Les techniques, c'est vaste : on n'y fait pas que de l'ordinateur. Faire de la musique ou la cuisine pour 100 personnes, prendre soin des les un·e·s des autre·s et vivres des vies plus autonomes, c'est aussi en partie des questions techniques qui ont toute leur place au hackerspace. La Distorsion fait partie du <a href="https://interhacker.space">réseau interhack</a> qui tisse des liens entre hackerspaces.</p>
+      <h2>Infos pratiques</h2>
+      <p>La Distorsion se retrouve tous les jeudis, l'aprèm et même parfois le matin, jusqu'à 20h, heure de fermeture du batiment.</p>
+      <p>On est accueilli·es au <a href="https://fablabdigiscope.universite-paris-saclay.fr">Fablab UPSaclay</a>, qui se trouve dans le batiment 660 de l'université, sur le plateau de Saclay. Pour entrer, il faut sonner à la porte, dire au gardien que vous venez pour le fablab, et inscrire un nom sur une feuille (c'est pas idéal, on sait...).</p>
+      <p>C'est possible de nous parler par courrier électronique à <a class="mel">distorsion (A) groupes.renater.fr</a></p>
+      <h2>Les trucs à venir</h2>
+      <p>Il se passe à peu près tout le temps des choses, selon les envies et intérêts de personnes présentes, sur un mode très informel. Parfois on formalise un peu plus certaines activités, qu'on essaye d'annoncer ci-dessous.</p>
+      <p>(pour l'instant, c'est vide, mais hésite pas à passer nous voir)</p>
+    </main>
+    <div class="snowflake">
+      <h2>Snowflake</h2>
+      <p>En activant ce bloc, tu permets à des personnes au quatre coins du monde d'utiliser ta connexion pour se connecter à Internet à travers le réseau Tor, en utilisant un <a href="https://snowflake.torproject.org/">bridge snowflake</a> et ainsi échapper à la censure. Le bridge reste actif tant que cet onglet est ouvert !</p>
+      <iframe src="https://snowflake.torproject.org/embed.html" scrolling="no"></iframe>
     </div>
     <footer>
       <p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>
diff --git a/site/presentation.html b/site/presentation.html
index 4d45024..d3765e6 100644
--- a/site/presentation.html
+++ b/site/presentation.html
@@ -11,7 +11,7 @@
   <body>
     <header>
       <h1>La Distorsion</h1>
-      <nav>
+      <nav class="menu">
         <ul>
           <li><a href="/index.html">maison</a></li>
           <li><a href="/presentation.html">présentation</a></li>
