distorsion/distorsion.interhacker.space
9
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Met le snowflake en bas de la page. Update CSS

Browse source
This commit is contained in:
distorsion 2025-01-24 23:27:16 +01:00
parent 714356c691
commit dfdabf2ba2
5 changed files with 39 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
site/blog.html
View file

@ -11,7 +11,7 @@
<body> <body>
<header> <header>
<h1>La Distorsion</h1> <h1>La Distorsion</h1>
<nav> <nav class="menu">
<ul> <ul>
<li><a href="/index.html">maison</a></li> <li><a href="/index.html">maison</a></li>
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>
@ -31,9 +31,11 @@
</nav> </nav>
</header> </header>
<main> <main>
<ul> <nav class="blog">
<li><a href="/blog/article-template.html">Template d'article</a></li> <ul>
</ul> <li><a href="/blog/article-template.html">Template d'article</a></li>
</ul>
</nav>
</main> </main>
<footer> <footer>
<p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p> <p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>

2
site/blog/article-template.html
View file

@ -11,7 +11,7 @@
<body> <body>
<header> <header>
<h1>La Distorsion</h1> <h1>La Distorsion</h1>
<nav> <nav class="menu">
<ul> <ul>
<li><a href="/index.html">maison</a></li> <li><a href="/index.html">maison</a></li>
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>

35
site/css/simple.css
View file

@ -1,15 +1,15 @@
body{ body {
padding: 0 1em; padding: 0 1em;
line-height: 1.6; line-height: 1.6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
main { body > * {
max-width: 40em; max-width: 40rem;
} }
header, footer { header, footer {
width: 40em; width: 100%;
text-align: center; text-align: center;
} }
header { header {
@ -18,14 +18,14 @@ header {
footer { footer {
border-top: solid 0.1rem; border-top: solid 0.1rem;
} }
nav ul { nav.menu ul {
padding: 0; padding: 0;
} }
nav li { nav.menu li {
display: inline-block; display: inline-block;
padding: 0 1em; padding: 0 1em;
} }
nav li:not(:last-of-type) { nav.menu li:not(:last-of-type) {
border-right: solid 0.1rem; border-right: solid 0.1rem;
} }
img { img {
@ -34,21 +34,16 @@ img {
a.mel { a.mel {
font-family: monospace; font-family: monospace;
} }
.snowflake { iframe {
border-left: solid 0.1rem;
padding: 1rem;
height: max-content;
max-width: 320px;
text-align: center;
font-size: 0.85em;
}
.snowflake iframe {
width: 320px; width: 320px;
height: 240px; height: 240px;
display: block;
margin: 1em auto;
border: none; border: none;
} }
.flex { nav.blog ul {
display: flex; list-style: none;
justify-content: center; }
flex-wrap: wrap; nav.blog ul li:before {
content: '> ';
} }

33
site/index.html
View file

@ -11,7 +11,7 @@
<body> <body>
<header> <header>
<h1>La Distorsion</h1> <h1>La Distorsion</h1>
<nav> <nav class="menu">
<ul> <ul>
<li><a href="/index.html">maison</a></li> <li><a href="/index.html">maison</a></li>
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>
@ -24,27 +24,26 @@
</select> </select>
<script> <script>
const selectSelect = document.querySelector(".style"); const selectSelect = document.querySelector(".style");
selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); }); selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
</script> </script>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="flex"> <main>
<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>
<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>
<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>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>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>
<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>
<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>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>
<p>(pour l'instant, c'est vide, mais hésite pas à passer nous voir)</p> </main>
</main> <div class="snowflake">
<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> <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> <iframe src="https://snowflake.torproject.org/embed.html" scrolling="no"></iframe>
</div>
</div> </div>
<footer> <footer>
<p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p> <p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>

2
site/presentation.html
View file

@ -11,7 +11,7 @@
<body> <body>
<header> <header>
<h1>La Distorsion</h1> <h1>La Distorsion</h1>
<nav> <nav class="menu">
<ul> <ul>
<li><a href="/index.html">maison</a></li> <li><a href="/index.html">maison</a></li>
<li><a href="/presentation.html">présentation</a></li> <li><a href="/presentation.html">présentation</a></li>