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

4
site/blog.html
View file

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

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

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

35
site/css/simple.css
View file

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

7
site/index.html
View file

@ -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,13 +24,12 @@
</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>
@ -42,10 +41,10 @@
<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>
</div>
<footer>
<p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>
</footer>

2
site/presentation.html
View file

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