Setup the dark theme for the last article

2 files changed, 43 insertions, 42 deletions

diff --git a/articles/framasoft-et-les-mascottes-du-libre.md b/articles/framasoft-et-les-mascottes-du-libre.md
index ba8d3bf..b7c827c 100644
--- a/articles/framasoft-et-les-mascottes-du-libre.md
+++ b/articles/framasoft-et-les-mascottes-du-libre.md
@@ -359,7 +359,7 @@ Si vous êtes une association, renseignez-vous sur [Framaspace](#li).
 
 ### Sepia
 
-<img alt="Sepia: La mascotte de PerrTube" src="res/sepia_peertube_mascot.svg" style="float: right;">
+<img alt="Sepia: La mascotte de PerrTube" src="res/sepia_peertube_mascot.svg" style="float: right;" class="no-dark">
 
 La [seiche](https://fr.wikipedia.org/wiki/Seiche_(animal)) de [PeerTube](https://joinpeertube.org/)[^calmar]. 
 Son nom est Sepia.
@@ -391,7 +391,7 @@ Sepia, pour cette version, est représenté avec une cape et une aura de [super
 ### GNU
 
 <a href="https://www.gnu.org/graphics/agnuhead.html">
-    <img alt="GNU: La tête de GNU" src="res/heckert_gnu.svg" style="float: right">
+    <img alt="GNU: La tête de GNU" src="res/heckert_gnu.svg" style="float: right" class="no-dark">
 </a>
 
 C'est le logo utilisé par le projet GNU, comme son nom l'indique, c'est une [gnou](https://fr.wikipedia.org/wiki/Gnou).  
@@ -409,7 +409,7 @@ Elle est réutilisée, ici, en respectant les conditions imposées par le projet
 
 <picture>
   <source srcset="res/rose-mobilizon.avif" />
-  <img src="res/rose-mobilizon.png" alt="Rose: La mascotte de Mobilizon" width=250 />
+  <img src="res/rose-mobilizon.png" alt="Rose: La mascotte de Mobilizon" width=250 class="no-dark">
 </picture>
 
 La mascotte de [Mobilizon](https://joinmobilizon.org/fr/) est une sorte de renard hérisson.
@@ -421,7 +421,7 @@ Illustration de David Revoy sous Licence CC-BY 4.0.
 ### Tux
 
 <a href="https://fr.wikipedia.org/wiki/Tux">
-    <img alt="Le manchot Tux, logo de Linux" src="res/tux.svg" style="float: right;">
+    <img alt="Le manchot Tux, logo de Linux" src="res/tux.svg" style="float: right;" class="no-dark">
 </a>
 
 
@@ -453,7 +453,7 @@ L'illustration de [Tux a été réalisé par Alan Cox](https://web.archive.org/w
 
 
 <a href="https://archlinux.org/art/">
-<img src="res/archlinux-logo.svg" alt="Logo Arch Linux" width=400>
+<img src="res/archlinux-logo.svg" alt="Logo Arch Linux" width=400 class="no-dark">
 </a>
 
 Un manchot avec un le logo d'Arch linux s'est glissé dans la cohue des mascottes.  
@@ -472,7 +472,7 @@ Je ne suis pas affilié à Arch Linux et aucun usage commercial n'est fait de mo
 ### Debian
 
 <a href="https://www.debian.org/logos/#official-use">
-<img src="res/debian-logo.svg" alt="Logo debian" width=150 style="float: right">
+<img src="res/debian-logo.svg" alt="Logo debian" width=150 style="float: right" class="no-dark">
 </a>
 
 Un autre manchot s'est glissé dans la cohue des mascottes.
@@ -486,7 +486,7 @@ C'est la distribution qui est à la base d'Ubuntu, l'une des distributions Linux
 
 <picture>
   <source srcset="res/emancipasso-shane.avif" />
-  <img src="res/emancipasso-shane.png" alt="La mascotte de Emancip’Asso, Shane" width=250 />
+  <img src="res/emancipasso-shane.png" alt="La mascotte de Emancip’Asso, Shane" width=250 class="no-dark">
 </picture>
 
 Ce lynx est la mascotte d'[Emancip’Asso](https://www.emancipasso.org/), une structure dont le but est d'accompagner les associations dans une utilisation éthique des logiciels.
@@ -500,7 +500,7 @@ Illustration de David Revoy sous Licence CC-BY 4.0.
 
 <picture>
   <source srcset="res/li-framaspace.avif" />
-  <img src="res/li-framaspace.png" alt="La mascotte de Framaspace." width=250  />
+  <img src="res/li-framaspace.png" alt="La mascotte de Framaspace." width=250 class="no-dark" class="no-dark">
 </picture>
 
 La licorne mascotte de [Framaspace.org](https://www.frama.space/abc/fr/), une instance de NextCloud dédié aux structures militantes, elle est gratuite. 
@@ -520,7 +520,7 @@ Illustration de David Revoy sous Licence CC-BY 4.0.
 
 <picture>
   <source srcset="res/coincoin.avif" />
-  <img src="res/coincoin.png" alt="La mascotte du collectif Collectivisons et Convivialisons Internet." width=250/>
+  <img src="res/coincoin.png" alt="La mascotte du collectif Collectivisons et Convivialisons Internet." width=250 class="no-dark">
 </picture>
 
 
@@ -534,13 +534,13 @@ Illustration de David Revoy sous Licence CC-BY 4.0.
 <a href="https://fr.wikipedia.org/wiki/Fichier:Suzanne.png">
 <picture>
   <source srcset="res/rendu_suzanne.avif" />
-  <img src="res/rendu_suzanne.png" alt="Rendu 3D de Suzanne dans Blender" width=250/>
+  <img src="res/rendu_suzanne.png" alt="Rendu 3D de Suzanne dans Blender" width=250 class="no-dark">
 </picture>
 </a>
 
 <picture>
   <source srcset="res/suzanne.avif" />
-  <img src="res/suzanne.jpg" alt="Suzanne dans la cohue des mascottes." width=150 style="float: right">
+  <img src="res/suzanne.jpg" alt="Suzanne dans la cohue des mascottes." width=150 style="float: right" class="no-dark">
 </picture>
 
 [Suzanne](https://fr.wikipedia.org/wiki/Blender#Suzanne) est la mascotte du projet [Blender](https://www.blender.org/).  
@@ -556,7 +556,7 @@ C'est un logiciel très utilisé, même dans l'industrie du cinéma.
 ### Le plot de VLC
 
 <a href="https://fr.wikipedia.org/wiki/VLC_media_player">
-    <img alt="Logo du plot de VLC, qui est simplement un plot de signalisation" src="res/VLC.svg" width=170 style="float: right;">
+    <img alt="Logo du plot de VLC, qui est simplement un plot de signalisation" src="res/VLC.svg" width=170 style="float: right;" class="no-dark">
 </a>
 
 Alors là, c'est pas tout à fait une mascotte.  
@@ -585,7 +585,7 @@ C'est l'interface de votre système d'exploitation.
 ### Mastodon
 
 <a href="https://fr.m.wikipedia.org/wiki/Fichier:Mastodon_Mascot.png">
-<img alt="Mascotte de Mastodonte dans le style canonique et dessin animé" src="res/mastodon_mascot.svg" style="float: right;" width=200></a>
+<img alt="Mascotte de Mastodonte dans le style canonique et dessin animé" src="res/mastodon_mascot.svg" style="float: right;" width=200 class="no-dark"></a>
 
 L'éléphant de Mastodon. Il n'a pas de nom à ma connaissance.
 Il se décline beaucoup, mais reste toujours reconnaissable par sa couleur et son design.
@@ -628,7 +628,7 @@ En distribuant cette responsabilité, elle redonne le pouvoir d'expression à l'
 
 <picture>
   <source srcset="res/zebre.avif" />
-  <img src="res/zebre.png" alt="Zèbre dans la campagne de Framasfot."/>
+  <img src="res/zebre.png" alt="Zèbre dans la campagne de Framasfot." class="no-dark">
 </picture>
 
 Je ne suis pas bien sûr de qui est ce Zèbre. ¯\\*\_(ツ)\_*/¯  
@@ -670,7 +670,7 @@ D'où la nécessité de faire confiance à votre hébergeur pour tenir ses engag
 
 <picture>
   <source srcset="res/espéhef_ahemvé.avif" />
-  <img src="res/espéhef_ahemvé.png" alt="Espéhef et Ahemvé dans la cohue des mascottes."/>
+  <img src="res/espéhef_ahemvé.png" alt="Espéhef et Ahemvé dans la cohue des mascottes." class="no-dark">
 </picture>
 
 Il n'est pas bien clair pour moi, qui sont ces deux-là.
@@ -680,7 +680,7 @@ J'imagine que l'éléphant est Espéhef et l'oiseau jaune doit être Ahemvé, ri
 
 ### Démon BSD
 
-<img src="res/beastie.svg" alt="Bestie, le démon de BSD." width=200  style="float: right">
+<img src="res/beastie.svg" alt="Bestie, le démon de BSD." width=200  style="float: right" class="no-dark">
 
 Le démon BSD[^demon] (Berkeley Software Distribution) est la mascotte des systèmes FreeBSD et NetBSD.
 Souvent on le nomme « Beastie » mais il n'a pas nom, c'est plus un surnom.
@@ -706,7 +706,7 @@ Le nom de *daemon* en informatique pour désigner un processus en arrière-plan,
 
 <picture>
   <source srcset="res/superflu.avif" />
-  <img src="res/superflu.png" alt="Tête du héro Superflu qui s'est incrusté au sein des mascottes."/>
+  <img src="res/superflu.png" alt="Tête du héro Superflu qui s'est incrusté au sein des mascottes." class="no-dark">
 </picture>
 
 « Le super héros fort inutile », un super héro d'utilité modéré vivant à Fochougny.
@@ -716,7 +716,7 @@ La suite existe [en jeu vidéo](https://store.steampowered.com/app/1753370/Super
 
 ### GIMP
 
-<img src="res/gimp.svg" alt="Logo de GIMP." style="float: right" width=150>
+<img src="res/gimp.svg" alt="Logo de GIMP." style="float: right" width=150 class="no-dark">
 
 [GIMP](https://www.gimp.org/) est un célèbre logiciel d'édition d'image.
 Bien plus évolué que *MS paint* par exemple.
@@ -730,7 +730,7 @@ Le logo de GIMP a été créé par Jakub Steiner et est disponible sous licence
 
 <picture>
   <source srcset="res/kiki.avif" />
-  <img src="res/kiki.jpg" alt="Une représentation de Kiki, la mascotte de Krita." width=200 />
+  <img src="res/kiki.jpg" alt="Une représentation de Kiki, la mascotte de Krita." width=200 class="no-dark">
 </picture>
 
 Ici dessinée par Tyson Tan, c'est [la mascotte du logiciel de dessin Krita](https://krita.org/en/about/kiki/), l'illustration est sous licence libre, il n'est pas précisé laquelle.
@@ -749,7 +749,7 @@ Il permet de créer des formulaires en ligne, qu'on peut ensuite soumettre à qu
 
 ### Thunderbird
 
-<img src="res/thunderbird.svg" alt="Logo de Thunderbird" width=200 style="float: right">
+<img src="res/thunderbird.svg" alt="Logo de Thunderbird" width=200 style="float: right" class="no-dark">
 
 C'est le logo de [Thunderbird](https://www.thunderbird.net/fr/).
 
@@ -772,7 +772,7 @@ Je ne suis pas certain que cette vache représente bien Gentoo.
 
 ### Mozilla
 
-<img src="res/Mozilla_mascot.svg" alt="Mascotte officielle de Mozilla" width=200>
+<img src="res/Mozilla_mascot.svg" alt="Mascotte officielle de Mozilla" width=200 class="no-dark">
 
 C'est la mascotte de [Mozilla](https://www.mozilla.org/fr/) la fondation qui maintient Firefox, Thunderbird et d'autres.
 
@@ -783,7 +783,7 @@ Je vous laisse vous renseigner sur la page Wikipédia (en) de [la mascotte de Mo
 
 <picture>
   <source srcset="res/carrot.avif" />
-  <img src="res/carrot.jpg" alt="Carrot: Le chat personnage principale de la BD Pepper & Carrot." width=200 />
+  <img src="res/carrot.jpg" alt="Carrot: Le chat personnage principale de la BD Pepper & Carrot." width=200 class="no-dark">
 </picture>
 
 
@@ -800,7 +800,7 @@ Pepper n'est pas présente dans la cohue des mascottes, mais on y retrouve son c
 
 <picture>
   <source srcset="res/pepper_chapeau.avif" />
-  <img src="res/pepper_chapeau.jpg" alt="Le chapeau de Pepper, la sorcière personnage principale de la BD Pepper & Carrot." width=200 />
+  <img src="res/pepper_chapeau.jpg" alt="Le chapeau de Pepper, la sorcière personnage principale de la BD Pepper & Carrot." width=200 class="no-dark">
 </picture>
 
 
@@ -808,7 +808,7 @@ Pepper n'est pas présente dans la cohue des mascottes, mais on y retrouve son c
 
 <picture>
   <source srcset="res/godette.avif" />
-  <img src="res/godette.jpg" alt="La mascotte non officiel de Godot." width=250 />
+  <img src="res/godette.jpg" alt="La mascotte non officiel de Godot." width=250 class="no-dark">
 </picture>
 
 Godette n'est pas réellement [la mascotte du moteur de jeu Godot](https://twitter.com/reduzio/status/958305883976536064).
@@ -827,7 +827,7 @@ Je vous invite à consulter la vitrine de [jeux réalisées avec Godot](https://
 
 <picture>
   <source srcset="res/konqi.avif" />
-  <img alt="Konqi, la mascotte de KDE." src="res/konqi.png" style="float: right;">
+  <img alt="Konqi, la mascotte de KDE." src="res/konqi.png" style="float: right;" class="no-dark">
 </picture>
 
 
@@ -844,7 +844,7 @@ Il existe plusieurs dragons KDE mais seuls deux sont nommés. Konqi et Katie.
 
 <picture>
   <source srcset="res/katie.avif" />
-  <img alt="Katie, la mascotte féminine de KDE." src="res/katie.png">
+  <img alt="Katie, la mascotte féminine de KDE." src="res/katie.png" class="no-dark">
 </picture>
 
 
@@ -867,7 +867,7 @@ Il offre des outils pour facilement s'intégrer à la création de site web.
 ### Python
 
 <a href="https://fr.m.wikipedia.org/wiki/Fichier:Python-logo-notext.svg">
-<img alt="Logo du langage de programmation Python. On y retrouve deux pythons l'un dans l'autre. Un est bleu et celui qui est renversé la tête en bas est jaune." src="res/python_logo.svg" style="float: right;" width=150></a>
+<img alt="Logo du langage de programmation Python. On y retrouve deux pythons l'un dans l'autre. Un est bleu et celui qui est renversé la tête en bas est jaune." src="res/python_logo.svg" style="float: right;" width=150 class="no-dark"></a>
 
 Les serpents bleu et jaune de du logo de Python ne sont pas vraiment des mascottes.  
 D'ailleurs le langage Python ne porte pas son nom par rapport au serpent mais par rapport aux [*Monty Python*](https://fr.wikipedia.org/wiki/Monty_Python) très apprécié de Guido van Rossum, son créateur.
@@ -883,7 +883,7 @@ Si vous souhaitez apprendre Python, je vous invite à consulter [le cours offici
 ### eMule
 
 <a href="https://commons.wikimedia.org/wiki/File:EMule_mascot.svg">
-<img alt="Illustration de la mule qui sert de mascotte de SVG" src="res/emule_mascot.svg" style="float: right;" width=100></a>
+<img alt="Illustration de la mule qui sert de mascotte de SVG" src="res/emule_mascot.svg" style="float: right;" width=100 class="no-dark"></a>
 
 Alors là, ça commence à dater comme référence.
 [eMule](https://www.emule-project.com/home/perl/general.cgi?l=13) est un logiciel P2P d'échange de fichier.
@@ -896,7 +896,7 @@ L'illustration de la mascotte est sous licence GPL.
 
 <picture>
   <source srcset="res/écureuil_inconnue.avif" />
-  <img src="res/écureuil_inconnue.jpg" alt="Un ours que je ne reconnais pas dans la cohue des mascottes. On ne voit que le bout de sa tête." width=200 />
+  <img src="res/écureuil_inconnue.jpg" alt="Un ours que je ne reconnais pas dans la cohue des mascottes. On ne voit que le bout de sa tête." width=200 class="no-dark">
 </picture>
 Ce petit écureuil me dit quelque chose, mais je ne sais pas qui il représente.
 
@@ -914,7 +914,7 @@ Une moins connue, mais qui commence à avoir du succès, est [CodeBerg](https://
 
 <picture>
   <source srcset="res/ours_inconnu.avif" />
-  <img src="res/ours_inconnu.jpg" alt="Un ours que je ne reconnais pas dans la cohue des mascottes. On ne voit que le bout de sa tête." width=200 />
+  <img src="res/ours_inconnu.jpg" alt="Un ours que je ne reconnais pas dans la cohue des mascottes. On ne voit que le bout de sa tête." width=200 class="no-dark">
 </picture>
 
 L'ours en bas à gauche est trop caché pour m'être reconnaissable<del>, mais j'imagine que certain sauront l'identifier</del>.
@@ -926,7 +926,7 @@ Edit: D'après David Revoy, cet ours n'est personne en particulier.
 
 <picture>
   <source srcset="res/flaxy.avif" />
-  <img src="res/flaxy.jpg" alt="Une lapine bleue, mascotte de Friendica, que je n'ai pas reconnu pas dans la cohue des mascottes." width=200 />
+  <img src="res/flaxy.jpg" alt="Une lapine bleue, mascotte de Friendica, que je n'ai pas reconnu pas dans la cohue des mascottes." width=200 class="no-dark">
 </picture>
 
 [Flaxy O’Hare](https://wiki.friendi.ca/about/flaxy) est la mascotte de Friendica ! C'est une lapine bleue.
@@ -939,7 +939,7 @@ Sa particularité est d'être compatible, dans la mesure du possible, avec Faceb
 
 <picture>
   <source srcset="res/amanda.avif" />
-  <img src="res/amanda.png" alt="Illustration d'amanda." width=200 />
+  <img src="res/amanda.png" alt="Illustration d'amanda." width=200 class="no-dark">
 </picture>
 
 Je suis presque sûr que ce panda est Amanda, la mascotte de [Window Maker](https://www.windowmaker.org/), un gestionnaire de fenêtre.
@@ -953,7 +953,7 @@ La mascotte a été illustrée par Agnieszka Czajkowska.
 
 <picture>
   <source srcset="res/gnuess.avif" />
-  <img src="res/gnuess.jpg" alt="Le logo GNU féminisée et toute mignonne, dans le coin de la cohue des mascottes." width=200 />
+  <img src="res/gnuess.jpg" alt="Le logo GNU féminisée et toute mignonne, dans le coin de la cohue des mascottes." width=200 class="no-dark">
 </picture>
 
 Une gnou féminine est présent dans le coin en bas à gauche.
@@ -965,7 +965,7 @@ Personnellement, elle me fait penser à Odile Bénassy, la seule femme présente
 
 ### Moby Dock
 
-<a href="https://www.docker.com/company/newsroom/media-resources/"><img alt="Le logo de Docker. Une baleine avec des containers sur son dos." src="res/docker.svg" width=200 style="float: right"></a>
+<a href="https://www.docker.com/company/newsroom/media-resources/"><img alt="Le logo de Docker. Une baleine avec des containers sur son dos." src="res/docker.svg" width=200 style="float: right" class="no-dark"></a>
 
 [Moby dock](https://www.docker.com/blog/call-me-moby-dock/) est le nom de la mascotte de Docker.
 Un logiciel de virtualisation.
@@ -988,7 +988,7 @@ Le logo de Docker est la propriété de Docker™.
 
 ### Puppy
 
-<img src="res/puppy_logo.svg" width=200 style="float: right" alt="Le logo de Puppy Linux que j'ai interprété comme étant le logo de Mutt.">
+<img src="res/puppy_logo.svg" width=200 style="float: right" alt="Le logo de Puppy Linux que j'ai interprété comme étant le logo de Mutt." class="no-dark">
 
 Encore une fois, je ne suis pas sûr de moi pour cette mascotte. 
 J'imagine que ce chien est le logo de Mutt.
@@ -1011,7 +1011,7 @@ Le tout en restant léger, rapide et accessible.
 
 <picture>
   <source srcset="res/nitter.avif" />
-  <img src="res/nitter.jpg" alt="Un oiseau rouge que je ne reconnais pas dans la cohue des mascottes, il se trouve qu'il représente Nitter." width=200 />
+  <img src="res/nitter.jpg" alt="Un oiseau rouge que je ne reconnais pas dans la cohue des mascottes, il se trouve qu'il représente Nitter." width=200 class="no-dark">
 </picture>
 
 Cet oiseau est la représentation de [nitter](https://nitter.net/).
@@ -1028,7 +1028,7 @@ Je ne l'aurais jamais trouvé sans l'explication de David Revoy.
 
 <picture>
   <source srcset="res/papagayo.avif" />
-  <img src="res/papagayo.jpg" alt="Un oiseau vert (mascotte du projet papagayo, que je ne connaissais) pas dans la cohue des mascottes." width=200 />
+  <img src="res/papagayo.jpg" alt="Un oiseau vert (mascotte du projet papagayo, que je ne connaissais) pas dans la cohue des mascottes." width=200 class="no-dark">
 </picture>
 
 Avant son intégration à Thunderbird, il existait Sunbird, un oiseau vert, mais **je doute que ça soit lui qui soit représenté ici**.
@@ -1059,7 +1059,7 @@ Ce qui est sûr en tout cas, c'est que c'est la représentation qu'a choisi Davi
 
 <picture>
   <source srcset="res/cactus_inconnue.avif" />
-  <img src="res/cactus_inconnue.jpg" alt="Une cactus que je ne reconnais pas" width=200 />
+  <img src="res/cactus_inconnue.jpg" alt="Une cactus que je ne reconnais pas" width=200 class="no-dark">
 </picture>
 
 Je ne connais pas ce catus.
@@ -1072,7 +1072,7 @@ C'est le nouveau nom de la lettre d’info saisonnière de l'association Framaso
 
 
 <a href="https://phabricator.services.mozilla.com/D41016">
-<img src="res/firefox_logo.svg" alt="Logo de Mozilla Firefox" width=250 style="float: right">
+<img src="res/firefox_logo.svg" alt="Logo de Mozilla Firefox" width=250 style="float: right" class="no-dark">
 </a>
 
 Mascotte du navigateur Mozilla Firefox, c'est un renard[^panda].
@@ -1107,8 +1107,9 @@ Notez que WebKit étant lui-même à la base, une bifurcation (fork) de KHTML, l
 :::
 ::::
 
-
-[![Post de Alex Rock sur Mastodon.social: Meme des lunettes de Peter Parker. Sans ses lunettes il voit plein de navigateurs webs open source, avec ses lunettes, ils sont tous Chrome sauf Firefox](res/meme_masto_alex_rock.avif)](https://mastodon.social/@pierstoval/111592350286884363)
+<a href="https://mastodon.social/@pierstoval/111592350286884363">
+<img alt="Post de Alex Rock sur Mastodon.social: Meme des lunettes de Peter Parker. Sans ses lunettes il voit plein de navigateurs webs open source, avec ses lunettes, ils sont tous Chrome sauf Firefox" src="res/meme_masto_alex_rock.avif">
+</a>
 
 Malheureusement, la fondation Mozilla qui soutient financièrement le développement de Firefox n'est pas parfaite.
 Aussi, Firefox n'a qu'un petit nombre de développeurs dédiés et le web évolue tous les jours, ce qui oblige à faire des choix.
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 15c5334..f7bffae 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -217,7 +217,7 @@ article {
     h4, h5, h6 {
       color: #EFEFEF;
     }
-    img {
+    img:not(.no-dark) {
       filter: invert(1);
     }
     color: #EFEFEF;