+ {% block main %}{% endblock main %}
+
+ {% endif %}
+ 
⬘ Doni en Ethereum al `0x5e2101A637b28e561432fda9ffADB2b0D12c2116`
-
-## Pri {#pri}
-
-🦀 Retejo generita kun [zola](https://www.getzola.org/).
-
-🧮 Gastigata sur unu Raspberry Pi en Bordeaux, en Franco.
-
-📜 Ĉi tiu retejo estas publikigita laŭ la permesilo CC BY-SA 4.0. ([Fontkodo](https://git.txmn.tk/tuxmain/website)) [Kondiĉoj de uzo](@/eula.eo.md)
diff --git a/content/_index.fr.md b/content/_index.fr.md
index 48eae8d..30ec1f5 100644
--- a/content/_index.fr.md
+++ b/content/_index.fr.md
@@ -1,29 +1,15 @@
+++
title = "Accueil"
-insert_anchor_links = "left"
+++
-
⬘ Donner en Ethereum à `0x5e2101A637b28e561432fda9ffADB2b0D12c2116`
-
-## À propos {#a-propos}
-
-🦀 Site généré avec [zola](https://www.getzola.org/).
-
-🧮 Hébergé sur un Raspberry Pi à Bordeaux, en France.
-
-📜 Ce site est mis à disposition selon les termes de la licence CC BY-SA 4.0. ([Code source](https://git.txmn.tk/tuxmain/website)) [CGU](@/eula.fr.md)
diff --git a/content/_index.md b/content/_index.md
index 7a5fa3a..b47e2ab 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,29 +1,15 @@
+++
-title = "Home"
-insert_anchor_links = "left"
+title = "homepage"
+++
-
⬘ Donate Ethereum at `0x5e2101A637b28e561432fda9ffADB2b0D12c2116`
-
-## About {#about}
-
-🦀 Site generated with [zola](https://www.getzola.org/).
-
-🧮 Hosted on a Raspberry Pi in Bordeaux, France.
-
-📜 This website is published under the terms of the CC BY-SA 4.0 license. ([Source code](https://git.txmn.tk/tuxmain/website)) ([EULA](@/eula.md))
-
-admin
diff --git a/content/blog/blsag.md b/content/blog/blsag.md
index 5ce3b63..ecc15e9 100644
--- a/content/blog/blsag.md
+++ b/content/blog/blsag.md
@@ -14,7 +14,6 @@ A ring signature is a cryptographic proof that a message is original and authent
For example, jury members may each give their decision anonymously, so that the other jury members or the public cannot connect any decision with any member. In order to ensure the decisions are authentic, with each one is attached a ring signature that enables to prove it has been emitted by a jury member.
Multiple ring signature algorithms exist. Here will be introduced bLSAG, which has the property of enabling the detection of multiple distinct signatures emitted by the same person. In our example of a jury, we want indeed to ensure nobody voted twice.
-a voté deux fois.
The main source of this introduction to bLSAG is [Zero to Monero 2.0.0](https://www.getmonero.org/library/Zero-to-Monero-2-0-0.pdf) (page 29) and the Rust library [nazgul](https://github.com/edwinhere/nazgul/) which implements multiple ring signature schemes including bLSAG. Moreover, this article serves as additional documentation to the Rust library [orodruin](https://git.duniter.org/tuxmain/orodruin-rs/) that I developed in order to implement anonymous transactions in [Duniter](https://duniter.org).
diff --git a/content/blog/surveillance.fr.md b/content/blog/surveillance.fr.md
index 4df6bdd..a04ce55 100644
--- a/content/blog/surveillance.fr.md
+++ b/content/blog/surveillance.fr.md
@@ -15,7 +15,7 @@ Il est habituel que des expérimentations sécuritaires illégales ou dérogatoi
## Donnez la main à la police, elle vous arrache le bras
-Quand la police reçoit un nouveau jouet avec un certain cadre légal, elle se permet de l'étendre à outrance. Par exemple le FNAEG (Fichier National Automatisé des Empreintes Génétiques) était destiné à identifier génétiquement les délinquants sexuels et les meurtriers susceptibles de récidive, mais contenait en 2021 les empreintes génétiques de plus de 7,5% de la population française.
+Quand la police reçoit un nouveau jouet avec un certain cadre légal, elle se permet de l'étendre à outrance. Par exemple le [FNAEG](https://fr.wikipedia.org/wiki/Fichier_national_automatis%C3%A9_des_empreintes_g%C3%A9n%C3%A9tiques) (Fichier National Automatisé des Empreintes Génétiques) était destiné à identifier génétiquement les délinquants sexuels et les meurtriers susceptibles de récidive, mais contenait en 2021 les empreintes génétiques de plus de 7,5% de la population française.
## Incompétence des décisionnaires
@@ -27,7 +27,7 @@ Voir la conférence [Internet ou Minitel 2.0](https://framatube.org/w/9a8642c0-6
## C'est pour notre sécurité
-Toutes les occasions sont bonnes pour ajouter des caméras et de l'intelligence artificielle. L'exécutif se justifie généralement de manière très confuse, prétendant que ces mesures auraient évité tel ou tel accident. Cette réponse est la plupart du temps disproportionnée, inadaptée et inefficace, alors que des solutions plus simples existent. Voir le fiasco du stade de France de 2022 qui est un exemple de mauvaise gestion de foule instrumentalisée pour promouvoir la vidéosurveillance algorithmique. Voir aussi comment ce genre de problème peut être évité (vidéos de Fouloscopie) (spoiler : sans IA ni vidéosurveillance).
+Toutes les occasions sont bonnes pour ajouter des caméras et de l'intelligence artificielle. L'exécutif se justifie généralement de manière très confuse, prétendant que ces mesures auraient évité tel ou tel accident. Cette réponse est la plupart du temps disproportionnée, inadaptée et inefficace, alors que des solutions plus simples existent. Voir le [fiasco du stade de France de 2022](https://www.laquadrature.net/2023/03/21/fiasco-du-stade-de-france-la-vsa-ne-masquera-pas-les-echecs-du-maintien-de-lordre/) qui est un exemple de mauvaise gestion de foule instrumentalisée pour promouvoir la vidéosurveillance algorithmique. Voir aussi [comment ce genre de problème peut être évité (vidéos de Fouloscopie)](https://youtube.com/watch?v=mhLKT4D2YvI) (spoiler : sans IA ni vidéosurveillance).
## Pédocriminels et terroristes en épouvantail
@@ -83,7 +83,7 @@ L'occupation nazie avait un système de fichage qui a bien servi dans la répres
## Effets de la surveillance sur le comportement
-Agit-on de la même manière quand on sait être surveillé ? Peut-être s'empêche-t-on de faire des choses un peu trop déviantes, ou même d'y penser. La surveillance au travail se révèle source d'anxiété chez les travailleureuses, et diminue même la productivité.
+Agit-on de la même manière quand on sait être surveillé ? Peut-être s'empêche-t-on de faire des choses un peu trop déviantes, ou même d'y penser. [La surveillance au travail se révèle source d'anxiété chez les travailleureuses, et diminue même la productivité.](https://www.bbc.com/worklife/article/20230127-how-worker-surveillance-is-backfiring-on-employers)
La vidéosurveillance est aussi utilisée pour entraîner des IA à détecter les "comportements anormaux". Le but est que le système automatique puisse prévenir la police, par exemple. Cela risque de créer une sorte de nouveau délit de faciès, en rendant suspect tout ce qui dévie un peu trop d'un comportement ou d'une apparence "normal".
diff --git a/content/blog/surveillance.md b/content/blog/surveillance.md
new file mode 100644
index 0000000..a44397c
--- /dev/null
+++ b/content/blog/surveillance.md
@@ -0,0 +1,124 @@
++++
+title = "You have something to hide"
+date = 2024-06-27
+description = "Surveillance, and so what? Arguments pour convaincre du danger de la surveillance généralisée."
+insert_anchor_links = "left"
+draft = true
+[taxonomies]
+tags = ["politics"]
++++
+
+Even if you have nothing to hide, here are some reasons to worry about general surveillance.
+
+> This article has been translated from French using Firefox 128's offline AI translator, and manually corrected by myself.
+
+## Illegal police experimentation is future law
+
+It is common for illegal or derogatory security experiments, often alleged to be temporary, becoming the rule. Surveillance cameras are being installed everywhere, the police are using drones, etc. and as should not be backtracked and spoiled an investment, these temporary experiences are permanent or even legalized, even when their results (or independent studies) show their ineffectiveness.
+
+## Give the police the hand, they pull your arms out
+
+When the police receive a new toy with a certain legal framework, they allow themselves to extend it excessively. For example, the French FNAEG (national automated genetic file) was intended to identify sexual offenders and murderers who could reoffend, but in 2021 contained the DNA profiles of more than 7.5% of the French population.
+
+## Incompetent decision-makers
+
+The incompetence of judges in computer science is easily exploited by the police and computer giants to institute unfounded political trials. [The 8 december 2022 case](https://www.laquadrature.net/en/2023/06/05/criminalization-of-encryption-the-8-december-case/), with the prolonged and illegal detention of militants accused of terrorism on the sole ground that they were using secure software and messaging, which were completely legal and widespread.
+
+Politicians, too, are victims of a dangerous inculture of computer science, which would be forgivable if they refrained from making decisions about it or being guided blindly (or interested) by lobbies. There is a lack of awareness of the principles of the Internet, both technical and philosophical, as well as a confusion between the information that can circulate, and the "rival" material goods that can be possessed.
+
+## It's for our safety
+
+Every opportunity is good to add cameras and artificial intelligence. The executive generally justifies itself in a very confused manner, claiming that these measures would have avoided a particular accident. This response is mostly disproportionate, inadequate and ineffective, while simpler solutions exist. See the 2022 French Stadium fiasco which is an example of crowd mismanagement, instrumentalized to promote algorithmic video surveillance. See also how this type of problem can be avoided (videos by Fouloscopie, French) (spoiler: without AI or video surveillance).
+
+## Child molesters and terrorists as a scarecrow
+
+The reasons given by politicians for increasing surveillance and censorship are usually the struggle against child abuse and terrorism. Since a majority of sexual assaults are committed by relatives (spouse, parent, classmate, sports coach, etc.), especially when the victim is a child, they are not usually unknowns hunting on social networks. Moreover, these criminals are more motivated than average to finding safe communication systems: surveillance will disproportionately affect the entire population, for a very low benefit.
+
+## Security of communications
+
+Governments would like to require software manufacturers and publishers to provide them with a means of bypassing all the security systems available to users. The existence of these backdoors, supposedly known only to the authorities, would be used by the police and the secret services. This would allow for abuse by denying all privacy and criminalizing information protection: if the police cannot read your secure messages, then you are necessarily a terrorist. Even assuming honest and competent authorities, the backdoor plan can very well leak and end up in the wrong hands, sold to ill-intentioned pirates. Computer security experts can also find out how to exploit it directly.
+
+A backdoor is a security flaw held secret. But an uncorrected security flaw, even a secret one, is literally lives at stake. Computer attacks, such as the ones that paralysed factories and hospitals, exploit Windows flaws that the NSA had discovered and kept for itself, without asking Microsoft to correct them. There has been a leak, and since then many viruses have been using them.
+
+Some would say that some manufacturers are honest and do not give a backdoor to the government, like Apple. However, there is nothing to prevent them from changing their minds one day, without your consent. They can also use the backdoors for their exclusive benefit, and be victims of piracy.
+
+## Fundamental individual freedom
+
+How can there be a rule of law if one is suspected of all, presumed guilty until proven otherwise?
+
+In the French Declaration of the Rights of Man and the Citizen of 1789:
+
+ Article X: No one shall be disturbed for their opinions, even religious ones, provided that their manifestation does not disturb the public order established by law.
+
+ Article XI: The free communication of thoughts and opinions is one of the most precious rights of Man: every citizen can therefore speak, write, print freely, except to be held accountable for the abuse of this freedom, in cases determined by the law.
+
+Privacy must be a fundamental individual right, and is necessary for freedom of thought. The French government claims that "democracy is lived with the face uncovered", but this is an unfortunate conflation between private and public life: absolute transparency is required for state affairs, but individuals must enjoy sufficient confidentiality. We observe the opposite situation, with a state that wants to know everything about its people, without revealing anything to it.
+
+## Corruption and lobbying
+
+Many decisions leading directly to more surveillance (through investment in surveillance solutions), or indirectly (through the choice of non-privacy-friendly computer solutions), are the result of huge lobbyism from the Big Tech with decision-makers at all levels, from schools to parliamentarians.
+
+In particular, the ["open-bar" contract between Microsoft and the French Éducation Nationale](https://www.anticor.org/affaires-anticor/affaire-education-nationale-microsoft/) makes it possible to engrave the Windows monopoly in the brains of schoolchildren. If all your interactions with computers are through Microsoft tools (at school, at home, at work), these tools will be familiar to you and so you'll probably go and look for them specifically, even if there are alternatives. Is that your choice? Not really, since Windows is installed in schools without consultation and without presentation of alternatives.
+
+## Capitalisme
+
+La surveillance génère beaucoup de données qui sont revendues à des fins publicitaires, ce qui représente une part importante du chiffre d'affaires des GAFAM, en plus d'alimenter une finance morbide à base d'enchères sur la probabilité que telle ou telle publicité vous pousse tôt ou tard à l'achat. Participer à cela, c'est encourager une gigantesque économie parfaitement improductive.
+
+Faites un tour sur les blogs [Affordance](https://affordance.framasoft.org/) (en français) ou [Pluralistic](https://pluralistic.net/) (en anglais) pour découvrir à quel point la surveillance de masse joue un rôle central dans le capitalisme aujourd'hui. Le marché de la surveillance est aussi [lucratif grâce au gouvernement et aux collectivités](https://www.laquadrature.net/2024/01/26/vsa-et-jeux-olympiques-coup-denvoi-pour-les-entreprises-de-surveillance/).
+
+## Écologie
+
+Effacer vos courriels pour économiser un pouïème de disque dur est tout à fait négligeable devant la quantité de données qu'un grand nombre d'entreprises et d'institutions (celles que vous connaissez, mais aussi leurs prestataires, les intermédiaires gérant les supports de communication, ceux qui les ont piratées, etc.) conservent sur vous, sans compter tout ce qui s'échange entre on ne sait combien de serveurs à chaque affichage d'une publicité, dont l'emplacement est mis aux [enchères en temps réel](https://fr.wikipedia.org/wiki/Real_Time_Bidding) entre les annonceurs.
+
+[Vidéo de Monsieur Bidouille : Internet et le climat, ça tourne mal ?](https://video.monsieurbidouille.fr/w/oR4oaZT8pNhKyoQNQiHZiR) (quel est l'impact environnemental d'Internet, et d'où vient-il réellement ?)
+
+## Biais et discriminations
+
+La surveillance de masse générant d'énormes quantités de données, des algorithmes sont utilisés pour déterminer les événements et individus plus ou moins suspects. Ces algorithmes doivent être paramétrés, qu'ils soient un [calcul de score effectué par la CAF](https://www.laquadrature.net/2022/10/19/caf-le-numerique-au-service-de-lexclusion-et-du-harcelement-des-plus-precaires/) pour décider qui doit subir un contrôle, ou une [vidéosurveillance "intelligente" dans un lieu public](https://affordance.framasoft.org/2018/12/speculation-faciale/). Ils sont toujours plus ou moins biaisés, en général en défaveur des minorités (personnes racisées, pauvres, et dans le cas de la CAF, les mères seules). Cela ne fait qu'amplifier les préjugés déjà présents chez les autorités, et renforce une norme sociale qu'on ne discute plus, puisque l'Algorithme est souvent présenté à tort comme neutre et objectif. Il n'est pourtant qu'un outil, qui comme tout outil aussi neutre qu'on le veuille, reflète dans son utilisation l'idéologie de ses concepteurs.
+
+## Et si l'extrême-droite arrivait au pouvoir ?
+
+Si un dirigeant fasciste arrivait au pouvoir, il lui serait aisé de déterminer les personnes trop incompatibles avec son idéologie, en utilisant les données déjà accumulées par l'état et par les entreprises (qui collaboreraient volontiers). Vous avez un jour participé à une manifestation un peu trop de gauche, vous avez aidé une personne migrante sans papiers il y a des années, vous avez dit quelque chose d'hérétique dont vous ne vous souvenez même pas ? Un datacenter, quelque part, s'en souvient, et nul ne peut garantir l'application de votre droit à l'oubli.
+
+L'occupation nazie avait un système de fichage qui a bien servi dans la répression de la résistance et l'organisation des rafles, etc. À la libération, les méfaits d'un tel fichage étaient évidents. La CNIL (organisme public à l'origine indépendant et compétent, censé défendre les libertés individuelles dans le domaine de l'informatique) a rappelé cela plus tard et a empêché la création de fichiers particulièrement intrusifs. Aujourd'hui la CNIL n'est plus que consultative et le fascisme semble si loin, qu'on oublie la ressemblance entre la surveillance d'aujourd'hui et celle de la Gestapo, du KGB ou de la RDA.
+
+## Effets de la surveillance sur le comportement
+
+Agit-on de la même manière quand on sait être surveillé ? Peut-être s'empêche-t-on de faire des choses un peu trop déviantes, ou même d'y penser. La surveillance au travail se révèle source d'anxiété chez les travailleureuses, et diminue même la productivité.
+
+La vidéosurveillance est aussi utilisée pour entraîner des IA à détecter les "comportements anormaux". Le but est que le système automatique puisse prévenir la police, par exemple. Cela risque de créer une sorte de nouveau délit de faciès, en rendant suspect tout ce qui dévie un peu trop d'un comportement ou d'une apparence "normal".
+
+## Effet de groupe
+
+Un système de communication n'a d'intérêt que s'il est partagé. Si votre entourage utilise telle plateforme centralisée de messagerie, vous êtes fortement encouragé·e voire forcé·e à y adhérer pour éviter de vous isoler. Les grandes plateformes profitent de cet effet de groupe et de son inertie qui limite le développement des plateformes alternatives.
+
+Un moyen de lutte pour la diversification des plateformes de communication est l'obligation à l'interopérabilité. Par exemple, un grand média social devrait accepter que ses utilisateurices interagissent avec des gens qui ont seulement un compte sur une plateforme concurrente quelle qu'elle soit. Bien entendu, les géants préfèrent garder leur clientèle captive.
+
+## Victimes directes
+
+Pour la plupart d'entre nous, ces arguments peuvent sembler abstraits et manquer de pertinence au niveau individuel. Cependant il existe des cas où les effets de la surveillance sont non seulement systémiques mais bien visibles et ciblés.
+
+Certaines personnes ont un besoin accru de protéger leur vie privée face aux autorités. On prendra les exemples de [femmes cherchant à avorter dans un pays qui l'interdit (USA)](https://www.theguardian.com/us-news/2022/aug/10/facebook-user-data-abortion-nebraska-police), de journalistes d'investigation et de lanceurs d'alerte, des LGBTQ en Russie ou en Turquie... Même avec une grande rigueur sur leur usage personnel de l'informatique, ces personnes sont exposées involontairement par les autres, et victimes de l'effet de groupe. C'est à nous de leur fournir un environnement sûr, à la manière d'une couverture vaccinale qui protège non seulement les personnes vaccinées, mais aussi une minorité à risque.
+
+## Verrouillage
+
+Imaginez un monde à la 1984 d'Orwell, où tout serait mis en œuvre pour limiter la pensée dissidente, étouffer le moindre début de révolte, diluer les responsabilités, entretenir un confusionnisme idéologique, décourager la "déviance", encourager la délation... Dans un tel monde, pourrait-on imaginer une révolution ? Comment des travailleurs pourraient acquérir la culture politique nécessaire, s'organiser en activistes ou en militants, unir des milliers de camarades, etc. si la police scrute toutes les communications privées ?
+
+## Il n'est pas trop tard
+
+Internet est un formidable outil qui permet au peuple de communiquer et de s'organiser de manière décentralisée. Tout le monde a accès gratuitement et librement à la plus grande encyclopédie (Wikipédia), à la plus complète carte du monde (OpenStreetMap), aux articles scientifiques, à la presse internationale, peut envoyer instantanément des messages à des habitants du monde entier. C'est une situation nouvelle dans l'histoire de la civilisation, et on peut supposer que la possession de ces outils aurait changé le cours de toutes les révolutions passées.
+
+**Que faire ?** Le plus simple est de commencer par changer son utilisation individuelle de l'informatique, en commençant par [un passage au logiciel libre](https://degooglisons-internet.org/fr/). Les communautées autour de ces projets recouvrent des intérêts et compétences très variés qu'on peut découvrir naturellement en étant utilisateur.
+
+## Ressources utiles
+
+Quelques ressources transversales et sources récurrentes de cet article :
+
+* [La Quadrature du Net](https://www.laquadrature.net/), association contre la surveillance et la censure.
+* [April](https://april.org/), association pour les libertés informatiques.
+* [Affordance](https://affordance.framasoft.org/), le blog d'un maître de conférences en sciences de l'information.
+* [Pluralistic](https://pluralistic.net/), le blog de Cory Doctorow entre autres sur les dérives du capitalisme.
+* [Next](https://next.ink/) (anciennement NextInpact), journal indépendant sur l'informatique.
+* [Sebsauvage : raisons techniques, économiques et politiques (passées et présentes) de ne plus faire confiance à Microsoft.](https://sebsauvage.net/wiki/doku.php?id=microsoft)
+* [Rien à cacher](https://framatube.org/videos/watch/46242da5-344c-49a1-b4cf-54d6f6210d34) (chanson)
+* [Rien à cacher](https://peertube.cpy.re/w/d2a5ec78-5f85-4090-8ec5-dc1102e022ea) (documentaire, VOSTFR)
diff --git a/content/links.fr.md b/content/links.fr.md
index 880c8b9..326c309 100644
--- a/content/links.fr.md
+++ b/content/links.fr.md
@@ -9,7 +9,7 @@ Mots-clés : BD, blog, fun, histoire, maths, philo, physique, podcast, poli
La langue est indiquée entre parenthèses. Leur absence signifie une disponibilité dans plein de langues.
-> Astuce : Tous ces sites et chaînes ont des flux RSS auxquels vous pouvez vous abonner, en utilisant une extension du navigateur, Thunderbird ou un logiciel dédié.
+> Astuce : Tous ces sites et chaînes ont des flux RSS auxquels vous pouvez vous abonner, en utilisant une extension du navigateur, [Thunderbird](https://thunderbird.net) ou un logiciel dédié.
## (fr) [Affordance](https://affordance.framasoft.org/)
diff --git a/content/links.md b/content/links.md
index 8c3b6ed..98335da 100644
--- a/content/links.md
+++ b/content/links.md
@@ -9,7 +9,7 @@ Existing keywords: blog, comic strip, fun, health, history, mathematics, philoso
Language is specified between parentheses. No language means that translations are available in many languages.
-> Tip: All of these websites and channels do have RSS feeds you can subscribe to, using a browser addon, Thunderbird or another dedicated software.
+> Tip: All of these websites and channels do have RSS feeds you can subscribe to, using a browser addon, [Thunderbird](https://thunderbird.net) or another dedicated software.
## (fr) [Affordance](https://affordance.framasoft.org/)
diff --git a/sass/css/_base.scss b/sass/css/_base.scss
new file mode 100644
index 0000000..d715816
--- /dev/null
+++ b/sass/css/_base.scss
@@ -0,0 +1,16 @@
+@use "_fonts";
+@use "_consts" as c;
+
+html {
+ background-color: #000;
+ background-image: url("/img/pia23121.webp");
+ background-repeat: repeat;
+}
+
+html, body {
+ font-family: "Libertinus Sans", "Linux Biolinum", "Liberation Sans", "Helvetica", "Arial";
+ font-size: 110%;
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+}
diff --git a/sass/css/_consts.scss b/sass/css/_consts.scss
new file mode 100644
index 0000000..c12379d
--- /dev/null
+++ b/sass/css/_consts.scss
@@ -0,0 +1,14 @@
+$main_color: #ff8900;
+$main_color_shade: #ad5d00;
+$second_color: #2b0f46;
+
+$header_text_color: #fff;
+$header_bg: $second_color;
+$header_content_border: $main_color;
+
+$page_text_color: #000;
+$page_bg: #dddddd;
+
+$footer_text_color: #fff;
+$footer_bg: $second_color;
+$footer_link_color: $main_color;
diff --git a/sass/css/_content.scss b/sass/css/_content.scss
new file mode 100644
index 0000000..f3b59e1
--- /dev/null
+++ b/sass/css/_content.scss
@@ -0,0 +1,232 @@
+@use "_fonts";
+@use "_consts" as c;
+
+h1 {
+ margin: 16px 0 0 0;
+ text-align: center;
+ //width: fit-content;
+ //padding: 0 1em;
+ //line-height: 1.6em;
+ /*background:
+ url("/img/line.png") center/8px repeat-x padding-box,
+ url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NgYPj/HwADAgH/eL9GtQAAAABJRU5ErkJggg==") content-box;*/
+ /*background-repeat: repeat-x, repeat;
+ background-position: 50% 50%, initial;
+ background-size: 8px 8px, initial;
+ background-clip: padding-box, content-box;*/
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ grid-template-rows: 1ch 0;
+ grid-gap: 20px;
+ align-items: center;
+}
+
+h1:before, h1:after {
+ content: " ";
+ display: block;
+ background-color: c.$main_color;
+ height: 4px;
+}
+
+h2 {
+ border-bottom: 2px solid c.$main_color;
+}
+
+h3 {
+ border-bottom: 1px solid c.$main_color;
+}
+
+h4 {
+ border-bottom: 1px dotted c.$main_color;
+}
+
+code, pre {
+ font-family: "Fira Code", monospace, monospace;
+ font-variant-ligatures: none;
+ font-size: 14px;
+}
+
+pre {
+ padding: 4px;
+ border-left: 2px solid c.$second_color;
+}
+
+blockquote {
+ border-left: 2px solid c.$main_color;
+ border-radius: 4px 0 0 4px;
+ margin: 16px;
+ padding: 0 16px;
+}
+
+main p {
+ line-height: 130%;
+}
+
+main a {
+ text-decoration-color: c.$main_color;
+}
+
+main a:hover, main a:focus, main a:visited:hover, main a:visited:focus {
+ color: c.$main_color;
+}
+
+.sidenav {
+ position: sticky;
+ top: 16px;
+ float: left;
+ max-width: calc(50vw - 444px);
+ background-color: #dddc;
+ padding: 16px;
+}
+
+.sidenav:hover, .sidenav:focus {
+ background-color: #dddd;
+}
+
+.sidenav ul {
+ margin: 0;
+ padding-left: 0;
+}
+
+.sidenav li {
+ list-style-type: none;
+}
+
+.sidenav li ul {
+ margin-left: 16px;
+}
+
+.sidenav a, .sidenav a:visited {
+ text-decoration: none;
+ color: c.$second_color;
+}
+
+.anchor, .anchor:visited {
+ display: inline-block;
+ text-align: center;
+ width: 24px;
+ margin-right: 8px;
+ color: c.$second_color !important;
+ text-decoration: none;
+ font-size: 2rem;
+ background-color: c.$main_color;
+}
+
+.anchor:hover, .anchor:visited:hover, .anchor:focus, .anchor:visited:focus {
+ color: #ddd !important;
+ background-color: c.$second_color;
+}
+
+h2 > .anchor, h3 > .anchor {
+ margin-left: -32px;
+}
+
+.article-list_title {
+ margin-bottom: 0;
+ border: none;
+}
+
+.article-list_title a, .article-list_title a:visited {
+ text-decoration: none;
+ color: c.$second_color;
+}
+
+article p {
+ margin-top: 0;
+}
+
+.service_boxes {
+ text-align: center;
+}
+
+.service_box {
+ display: inline-block;
+ width: 144px;
+ padding-top: 4px;
+ border: 2px solid transparent;
+ vertical-align: top;
+}
+
+.service_box-img {
+ max-width: 128px;
+ max-height: 128px;
+}
+
+.service_box-img_wrap {
+ width: 128px;
+ height: 128px;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.service_box-link, .service_box-link:visited {
+ color: #000;
+ font-size: 120%;
+ text-decoration: none;
+}
+
+.service_box-title {
+ position: relative;
+ top: 14px;
+ display: inline-block;
+ padding-bottom: 14px;
+}
+
+.service_box:hover, .service_box:focus {
+ border-top-color: #000;
+ border-left-color: #000;
+ border-bottom-color: #f00;
+ border-right-color: #f00;
+}
+
+@media screen and (min-width: 1301px) {
+ .pagetoc {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 1300px) {
+ .sidenav {
+ display: none;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ h2 {
+ border-bottom: 2px solid c.$main_color_shade;
+ }
+
+ h3 {
+ border-bottom: 1px solid c.$main_color_shade;
+ }
+
+ h4 {
+ border-bottom: 1px dotted c.$main_color_shade;
+ }
+
+ .sidenav {
+ background-color: #111a;
+ }
+
+ .sidenav:hover, .sidenav:focus {
+ background-color: #111d;
+ }
+
+ .sidenav a, .sidenav a:visited {
+ color: c.$main_color;
+ }
+
+ .sidenav a:hover, .sidenav a:visited:hover, .sidenav a:focus, .sidenav a:visited:focus {
+ color: #ddd;
+ }
+
+ .article-list_title a, .article-list_title a:visited {
+ color: c.$main_color;
+ }
+
+ .article-list_title a:hover, .article-list_title a:visited:hover, .article-list_title a:focus, .article-list_title a:visited:focus {
+ color: #ddd;
+ }
+}
diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss
new file mode 100644
index 0000000..400231d
--- /dev/null
+++ b/sass/css/_fonts.scss
@@ -0,0 +1,25 @@
+@font-face {
+ font-family: "Libertinus Sans";
+ font-weight: normal;
+ font-style: normal;
+ src: url("/fonts/LibertinusSans-Regular.otf");
+}
+
+@font-face {
+ font-family: "Libertinus Sans";
+ font-weight: bold;
+ font-style: normal;
+ src: url("/fonts/LibertinusSans-Bold.otf");
+}
+
+@font-face {
+ font-family: "Libertinus Sans";
+ font-weight: normal;
+ font-style: italic;
+ src: url("/fonts/LibertinusSans-Italic.otf");
+}
+
+@font-face {
+ font-family: "Fira Code";
+ src: url("/fonts/FiraCode-Regular.woff2");
+}
diff --git a/sass/css/_footer.scss b/sass/css/_footer.scss
new file mode 100644
index 0000000..293c8eb
--- /dev/null
+++ b/sass/css/_footer.scss
@@ -0,0 +1,42 @@
+@use "_fonts";
+@use "_consts" as c;
+
+footer {
+ background-color: c.$footer_bg;
+ color: c.$footer_text_color;
+ padding: 8px;
+ margin-top: 32px;
+ box-sizing: border-box;
+
+ // The simplest trick for sticky footer that works well!
+ // It also needs html,body {min-height: 100vh}
+ position: sticky;
+ top: 100vh;
+}
+
+.footer-wrapper {
+ display: flex;
+ max-width: 1100px;
+ padding: 16px 4px;
+ margin: auto;
+ gap: 20px;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer-pane {
+ flex: 1;
+ max-width: 800px;
+}
+
+footer a, footer a:visited {
+ color: c.$footer_link_color;
+}
+
+@media screen and (max-width: 800px) {
+ .footer-wrapper {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/sass/css/_header.scss b/sass/css/_header.scss
new file mode 100644
index 0000000..a60ff07
--- /dev/null
+++ b/sass/css/_header.scss
@@ -0,0 +1,37 @@
+@use "_fonts";
+@use "_consts" as c;
+
+header {
+ background-color: c.$header_bg;
+ color: c.$header_text_color;
+ padding: 8px;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+header a {
+ box-sizing: border-box;
+ display: inline-block;
+ padding: 4px;
+ color: c.$header_text_color;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-bottom: 1px solid c.$header_content_border;
+}
+
+header a:hover, header a:active, header a:focus {
+ border: 1px solid c.$header_content_border;
+}
+
+.header-site-title {
+ float: left;
+}
+
+.header-link {
+ float: left;
+ margin-left: 8px;
+}
+
+.langs {
+ float: right;
+}
diff --git a/sass/css/_page.scss b/sass/css/_page.scss
new file mode 100644
index 0000000..ba96c5a
--- /dev/null
+++ b/sass/css/_page.scss
@@ -0,0 +1,75 @@
+@use "_fonts";
+@use "_consts" as c;
+
+.page:first-of-type {
+ margin-top: 32px;
+}
+
+.page {
+ box-sizing: border-box;
+ padding: 20px;
+ margin: auto;
+ max-width: 800px;
+ background-color: c.$page_bg;
+ color: c.$page_text_color;
+
+ border-image-source: url("/img/border.png");
+ border-image-outset: 0 8px;
+ border-image-width: 16px 16px;
+ border-image-slice: 4 4 4 4;
+ border-image-repeat:round;
+ image-rendering: pixelated;
+}
+
+.page.page-left {
+ margin-left: 32px;
+}
+
+.page.page-right {
+ margin-right: 32px;
+}
+
+.page.page-wide {
+ max-width: 100%;
+ margin-left: 32px;
+ margin-right: 32px;
+}
+
+.page img {
+ image-rendering: initial;
+}
+
+.page a, .page a:visited {
+ color: c.$page_text_color;
+}
+
+@media screen and (max-width: 864px) {
+ .page {
+ margin-left: 16px;
+ margin-right: 16px;
+ }
+
+ .page.page-left {
+ margin-left: 16px;
+ }
+
+ .page.page-right {
+ margin-right: 16px;
+ }
+
+ .page.page-wide {
+ margin-left: 16px;
+ margin-right: 16px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .page {
+ background-color: #111;
+ color: #ddd;
+ }
+
+ .page a, .page a:visited {
+ color: #ddd;
+ }
+}
diff --git a/sass/css/style.scss b/sass/css/style.scss
index 0fc5594..00363a6 100644
--- a/sass/css/style.scss
+++ b/sass/css/style.scss
@@ -1,235 +1,7 @@
-@font-face {
- font-family: Caladea;
- src: url("/fonts/Caladea-Regular.ttf");
-}
-
-@font-face {
- font-family: CMU-Bright;
- src: url("/fonts/cmunbmr.ttf");
-}
-
-@font-face {
- font-family: "Libertinus Sans";
- font-weight: normal;
- font-style: normal;
- src: url("/fonts/LibertinusSans-Regular.otf");
-}
-
-@font-face {
- font-family: "Libertinus Sans";
- font-weight: bold;
- font-style: normal;
- src: url("/fonts/LibertinusSans-Bold.otf");
-}
-
-@font-face {
- font-family: "Libertinus Sans";
- font-weight: normal;
- font-style: italic;
- src: url("/fonts/LibertinusSans-Italic.otf");
-}
-
-@font-face {
- font-family: "Fira Code";
- src: url("/fonts/FiraCode-Regular.woff2");
-}
-
-html, body {
- font-family: "Libertinus Sans", "Linux Biolinum", "Liberation Sans", "Helvetica", "Arial";
- font-size: 110%;
-}
-
-body {
- padding: 16px;
-}
-
-h1, h2, h3 {
- font-family: Caladea;
- font-weight: normal;
-}
-
-h1 {
- font-size: 2.5em;
-}
-
-h2 {
- font-size: 2em;
-}
-
-h3 {
- font-size: 1.5em;
-}
-
-main p, main li {
- max-width: 800px;
-}
-
-.service_boxes {
- text-align: center;
-}
-
-.service_box {
- display: inline-block;
- width: 144px;
- padding-top: 4px;
- border: 2px solid transparent;
- vertical-align: top;
-}
-
-.service_box-img {
- max-width: 128px;
- max-height: 128px;
-}
-
-.service_box-img_wrap {
- width: 128px;
- height: 128px;
- margin: auto;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.service_box-link, .service_box-link:visited {
- color: #000;
- font-family: CMU-Bright;
- text-decoration: none;
-}
-
-.service_box-title {
- position: relative;
- top: 14px;
- display: inline-block;
- padding-bottom: 14px;
-}
-
-.service_box:hover, .service_box:focus {
- border-top-color: #000;
- border-left-color: #000;
- border-bottom-color: #f00;
- border-right-color: #f00;
-}
-
-.article-list_title {
- margin-bottom: 0;
-}
-
-code, pre {
- font-family: "Fira Code", monospace, monospace;
- font-variant-ligatures: none;
-}
-
-code {
- background-color: rgba(255, 128, 0, 0.3);
-}
-
-pre code {
- background-color: initial;
-}
-
-.anchor, .anchor:visited {
- margin-left: -1rem;
- margin-right: 0.75rem;
- color: #aaa;
- text-decoration: none;
- font-size: 2rem;
- font-family: LinBiolinum;
-}
-
-.anchor:hover, .anchor:focus {
- color: #f00;
- text-decoration: none;
-}
-
-table {
- border-collapse: collapse;
-}
-
-table td, table th {
- border: 1px solid #888;
-}
-
-@media (prefers-color-scheme: dark) {
- html {
- background-color: #000;
- color: #fff;
- }
-
- a {
- color: #fa4;
- }
-
- a:visited {
- color: #fc8;
- }
-
- .service_box:hover, .service_box:focus {
- border-top-color: #fff;
- border-left-color: #fff;
- }
-
- .service_box-img_wrap {
- background-color: #fff;
- box-shadow: 0 0 3px 5px #fff;
- }
-
- .service_box-link, .service_box-link:visited {
- color: #fff;
- }
-
- .toc {
- border: 1px solid #333;
- }
-}
-
-.float_img {
- float: right;
- max-width: 100%;
- margin: 4px;
-}
-
-blockquote {
- border-left: 2px solid #fa4;
- border-radius: 4px 0 0 4px;
- margin: 16px;
- padding: 0 16px;
-}
-
-footer {
- margin-top: 64px;
-}
-
-footer hr {
- border: 1px dashed #fa4;
-}
-
-.footer-icons img {
- margin: 24px;
-}
-
-.toc {
- border: 1px solid #bbb;
-}
-
-.hidden {
- opacity: 0;
-}
-
-.hidden:hover, .hidden:focus {
- opacity: 1;
-}
-
-h1 a, h2 a, h3 a,
-#breadcrumb a, #langs a,
-.article-tags a, .toc a {
- text-decoration: none;
-}
-
-h1 a:hover, h2 a:hover, h3 a:hover,
-#breadcrumb a:hover, #langs a:hover,
-.article-tags a:hover, .toc a:hover,
-h1 a:focus, h2 a:focus, h3 a:focus,
-#breadcrumb a:focus, #langs a:focus,
-.article-tags a:focus, .toc a:focus {
- text-decoration: underline;
-}
+@use "_fonts";
+@use "_consts" as c;
+@use "_base";
+@use "_header";
+@use "_page";
+@use "_content";
+@use "_footer";
diff --git a/static/fonts/Caladea-Regular.ttf b/static/fonts/Caladea-Regular.ttf
deleted file mode 100644
index a080253..0000000
Binary files a/static/fonts/Caladea-Regular.ttf and /dev/null differ
diff --git a/static/fonts/cmunbmr.ttf b/static/fonts/cmunbmr.ttf
deleted file mode 100644
index 5ed1086..0000000
Binary files a/static/fonts/cmunbmr.ttf and /dev/null differ
diff --git a/static/humans.txt b/static/humans.txt
index 82bae00..fe75184 100644
--- a/static/humans.txt
+++ b/static/humans.txt
@@ -2,12 +2,12 @@
Author: tuxmain
Contact: t åt txmn døt tk
Site: https://txmn.tk
-Location: Bègles, France
+Location: Bordeaux, France
/* THANKS */
h30x: https://git.42l.fr/HugoTrentesaux/toucan
/* SITE */
-Language: English, French, Esperanto, Spanish
+Language: English, French, Esperanto
Components: katex
-Software: Zola, VSCodium, Forgejo, webhookd, Apache
+Software: Zola, VSCodium, Forgejo, webhookd, Apache, Gimp, Darktable
diff --git a/static/img/axiom-dark.svg b/static/img/axiom-dark.svg
new file mode 100644
index 0000000..b03e528
--- /dev/null
+++ b/static/img/axiom-dark.svg
@@ -0,0 +1,594 @@
+
+
+
+
diff --git a/static/img/border.png b/static/img/border.png
new file mode 100644
index 0000000..6b85f95
Binary files /dev/null and b/static/img/border.png differ
diff --git a/static/img/gbreve-white.svg b/static/img/gbreve-white.svg
new file mode 100644
index 0000000..fe441d3
--- /dev/null
+++ b/static/img/gbreve-white.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/static/img/line.png b/static/img/line.png
new file mode 100644
index 0000000..40777d7
Binary files /dev/null and b/static/img/line.png differ
diff --git a/static/img/pia23121.webp b/static/img/pia23121.webp
new file mode 100644
index 0000000..bc5e04c
Binary files /dev/null and b/static/img/pia23121.webp differ
diff --git a/templates/anchor-link.html b/templates/anchor-link.html
index 7147520..43fd8f4 100644
--- a/templates/anchor-link.html
+++ b/templates/anchor-link.html
@@ -1 +1 @@
-§
\ No newline at end of file
+#
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 04bb418..d0b8386 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,4 +1,9 @@
{% import "macros.html" as macros %}
+{% for lk, lv in config.extra.tr %}
+ {% if lk == lang %}
+ {% set_global tr = lv %}
+ {% endif %}
+{% endfor %}
@@ -12,5 +17,46 @@
{% block head %}{% endblock head %}
- {% block body %}{% endblock body %}
+
+