Fix figurecaption

2 files changed, 86 insertions, 58 deletions

diff --git a/articles/a-vanity-vnc-server.md b/articles/a-vanity-vnc-server.md
index 381fed2..f2b48a9 100644
--- a/articles/a-vanity-vnc-server.md
+++ b/articles/a-vanity-vnc-server.md
@@ -49,11 +49,13 @@ It's worth noting that it has now become common to have a TLS overlay that makes
 For my project, I turned to the rfb library and spent about an hour creating a screen.
 I managed to get this far:
 
-<picture>
-  <source srcset="res/ache-screen-rfb.avif" />
-  <img src="res/ache-screen-rfb.jpg" alt="End-of-game screen of Portal, in black and white, modified to display my personal logo and some QR codes along with my contact information." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/ache-screen-rfb.avif" />
+    <img src="res/ache-screen-rfb.jpg" alt="End-of-game screen of Portal, in black and white, modified to display my personal logo and some QR codes along with my contact information." class="no-dark">
+  </picture>
   <figcaption>"Screen" to show on my vanity VNC server.</figcaption>
-</picture>
+</figure>
 
 It's both a "visiting card" and a joke inspirated from the end-of-game screen of Portal.
 
@@ -130,52 +132,64 @@ I found some publicly available VNC servers that were similar, often with server
 
 One of this servers was named « chloe was here ».
 
-<picture>
-  <source srcset="res/chloe_was_here.avif" />
-  <img src="res/chloe_was_here.jpg" alt="Two ponies from &quote;My Little Pony&quote; who are kissing. Starlight, with confidence, is gently kissing Trixie, who looks slightly flustered." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/chloe_was_here.avif" />
+    <img src="res/chloe_was_here.jpg" alt="Two ponies from &quote;My Little Pony&quote; who are kissing. Starlight, with confidence, is gently kissing Trixie, who looks slightly flustered." class="no-dark">
+  </picture>
   <figcaption>The server was named «&nbsp;chloe was here&nbsp;»</figcaption>
-</picture>
+</figure>
 
 The server 83.249.96.136, which appears to be a server of [Tele2](https://fr.wikipedia.org/wiki/Tele2), a Swedish operator.
 
-<picture>
-  <source srcset="res/fox_bw_vnc.avif" />
-  <img src="res/fox_bw_vnc.jpg" alt="A rabbit who is sleeping, snoring softly on his back. A simple black pencil drawing on a white background." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/fox_bw_vnc.avif" />
+    <img src="res/fox_bw_vnc.jpg" alt="A rabbit who is sleeping, snoring softly on his back. A simple black pencil drawing on a white background." class="no-dark">
+  </picture>
   <figcaption>The server was named «&nbsp;x11vnc&nbsp;»</figcaption>
-</picture>
+</figure>
 
 Many servers like 166.151.167.106 and 166.255.108.226 have multiple VNC servers, whose names indicate things like "just so you know this is literally me" or "i am a lesbian pony with weapons".
 I'm very intrigued by these servers that seem to be "claims" of a hacktivist more than anything else. I can't connect to them anymore but they're indexed by shodan.io and the "VNC resolver".
 
-<picture>
-  <source srcset="res/vnc-linux-fox.avif" />
-  <img src="res/vnc-linux-fox.jpg" alt="An anthropomorphized fox seen from the waist up. The gender is not identifiable. A black t-shirt with "LINUX" written in yellow on it. A keyboard under its arm." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/vnc-linux-fox.avif" />
+    <img src="res/vnc-linux-fox.jpg" alt="An anthropomorphized fox seen from the waist up. The gender is not identifiable. A black t-shirt with "LINUX" written in yellow on it. A keyboard under its arm." class="no-dark">
+  </picture>
   <figcaption>The server was named «&nbsp;just so you know this is literally me&nbsp;»</figcaption>
-</picture>
+</figure>
 
-<picture>
-  <source srcset="res/Susie_x_Noelle_Deltarune.avif" />
-  <img src="res/Susie_x_Noelle_Deltarune.jpg" alt="A drawing of the characters Susie and Noelle from the game Deltarune. They are kissing, with a blush." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/Susie_x_Noelle_Deltarune.avif" />
+    <img src="res/Susie_x_Noelle_Deltarune.jpg" alt="A drawing of the characters Susie and Noelle from the game Deltarune. They are kissing, with a blush." class="no-dark">
+  </picture>
   <figcaption>The server was named «&nbsp;i am a lesbian pony with weapons&nbsp;»</figcaption>
-</picture>
+</figure>
 
 (The original artwork is from [Rozavive](https://dynasty-scans.com/images/20543)).
 
 Another absolutely incomprehensible one: this server is that of @mastodon.staropa.net@1024x2, and it seems like the hacker is Litevex, but he claims to have hacked htwins.net. 😵‍💫
 What so ever, here is it:
 
-<picture>
-  <source srcset="res/mario_drawing.avif" />
-  <img src="res/mario_drawing.jpg" alt="A very basic drawing of Mario in white pencil on a black background, recognizable by the "M" on his hat." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/mario_drawing.avif" />
+    <img src="res/mario_drawing.jpg" alt="A very basic drawing of Mario in white pencil on a black background, recognizable by the "M" on his hat." class="no-dark">
+  </picture>
   <figcaption>The server was named «&nbsp;litevex hacked htwins.net&nbsp;»</figcaption>
-</picture>
+</figure>
 
 Regarding claims, VNC (Virtual Network Computing) is an alternative means to defacing a website in cyberwarfare.
 
-<picture>
-  <source srcset="res/hacker_against_israel.avif" />
-  <img src="res/hacker_against_israel.jpg" alt="A screen of a claim of war against Israel, on a red background with the "Free Palestine" logo, the message "You have been hacked" in white, and the Star of David (a Jewish symbol) bleeding into a sea of digital numbers." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/hacker_against_israel.avif" />
+    <img src="res/hacker_against_israel.jpg" alt="A screen of a claim of war against Israel, on a red background with the "Free Palestine" logo, the message "You have been hacked" in white, and the Star of David (a Jewish symbol) bleeding into a sea of digital numbers." class="no-dark">
+  </picture>
   <figcaption>The server was named «&nbsp;4629C81&nbsp;»</figcaption>
-</picture>
+</figure>
 
 See you next time for an article on web animation... Or QR codes. 🤷
diff --git a/articles/serveur-vnc-vaniteux.md b/articles/serveur-vnc-vaniteux.md
index d3b0ae7..5ae3b09 100644
--- a/articles/serveur-vnc-vaniteux.md
+++ b/articles/serveur-vnc-vaniteux.md
@@ -48,11 +48,13 @@ Il est à noter cependant qu'il est désormais courant d'avoir une surcouche TLS
 Pour mon projet je me suis tourner donc vers la bibliothèque [rfb](https://crates.io/crates/rfb) et j'ai passé une petite heure à créer un écran.
 Je suis parvenu à ça :
 
-<picture>
-  <source srcset="res/ache-screen-rfb.avif" />
-  <img src="res/ache-screen-rfb.png" alt="Écran de fin de jeu de portal, en noir et blanc, modifié pour afficher mon logo et quelques code QR et mes informations de contact." class="no-dark">
-    <figcaption>Image à afficher par mon serveur VNC vaniteux.</figcaption>
-</picture>
+<figure>
+  <picture>
+    <source srcset="res/ache-screen-rfb.avif" />
+    <img src="res/ache-screen-rfb.png" alt="Écran de fin de jeu de portal, en noir et blanc, modifié pour afficher mon logo et quelques code QR et mes informations de contact." class="no-dark">
+  </picture>
+  <figcaption>Image à afficher par mon serveur VNC vaniteux.</figcaption>
+</figure>
 
 C'est à la fois une carte de visite et une inspiration de l'écran de fin de jeu de Portal.
 
@@ -115,52 +117,64 @@ J'ai trouvé quelques serveurs VNC publiques qui s'en approchaient, souvent, dan
 
 Un serveur dont le nom est « chloe was here ».
 
-<picture>
-  <source srcset="res/chloe_was_here.avif" />
-  <img src="res/chloe_was_here.jpg" alt="Deux poneys de *Mon petit poney* qui s'embrassent. Starlight avec assurance embrasse Trixie légèrement génée." class="no-dark">
-    <figcaption>Le nom du serveur était «&nbsp;chloe was here&nbsp;»</figcaption>
-</picture>
+<figure>
+  <picture>
+    <source srcset="res/chloe_was_here.avif" />
+    <img src="res/chloe_was_here.jpg" alt="Deux poneys de *Mon petit poney* qui s'embrassent. Starlight avec assurance embrasse Trixie légèrement génée." class="no-dark">
+  </picture>
+  <figcaption>Le nom du serveur était «&nbsp;chloe was here&nbsp;»</figcaption>
+</figure>
 
 Le serveur `83.249.96.136` qui semble être un serveur de [Tele2](https://fr.wikipedia.org/wiki/Tele2), un opérateur suédois.
 
-<picture>
-  <source srcset="res/fox_bw_vnc.avif" />
-  <img src="res/fox_bw_vnc.jpg" alt="Un renard qui dort, sur le dos en ronflant. Un style dessin au crayon noir sur fond blanc." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/fox_bw_vnc.avif" />
+    <img src="res/fox_bw_vnc.jpg" alt="Un renard qui dort, sur le dos en ronflant. Un style dessin au crayon noir sur fond blanc." class="no-dark">
+  </picture>
   <figcaption>Le nom du serveur était «&nbsp;x11vnc&nbsp;»</figcaption>
-</picture>
+</figure>
 
 De nombreux serveurs comme `166.151.167.106` et `166.255.108.226` possèdent plusieurs serveurs VNC, dont les noms indiquent « *just so you know this is literally me* » ou « *i am a lesbian pony with weapons* ».
 Je suis très intrigué par ces serveurs qui semblent être des « revendications » d'une hackeuse plus qu'autre chose. Je n'arrive plus à m'y connecter mais ils sont indexés par shodan.io et le « VNC resolver ».
 
-<picture>
-  <source srcset="res/vnc-linux-fox.avif" />
-  <img src="res/vnc-linux-fox.jpg" alt="Un renard anthropomorphisé vu de face jusqu'à la taille. Le genre n'est pas identifiable. Un T-shirt noir avec écrit LINUX en jaune dessus. Un clavier sous le bras." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/vnc-linux-fox.avif" />
+    <img src="res/vnc-linux-fox.jpg" alt="Un renard anthropomorphisé vu de face jusqu'à la taille. Le genre n'est pas identifiable. Un T-shirt noir avec écrit LINUX en jaune dessus. Un clavier sous le bras." class="no-dark">
+  </picture>
   <figcaption>Le nom du serveur était «&nbsp;just so you know this is literally me&nbsp;»</figcaption>
-</picture>
+</figure>
 
-<picture>
-  <source srcset="res/Susie_x_Noelle_Deltarune.avif" />
-  <img src="res/Susie_x_Noelle_Deltarune.jpg" alt="Un dessin des personnages Susie et Noelle issues du jeu Deltarune. Elles s'embrassent génée." class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/Susie_x_Noelle_Deltarune.avif" />
+    <img src="res/Susie_x_Noelle_Deltarune.jpg" alt="Un dessin des personnages Susie et Noelle issues du jeu Deltarune. Elles s'embrassent génée." class="no-dark">
+  </picture>
   <figcaption>Le nom du serveur était «&nbsp;i am a lesbian pony with weapons&nbsp;»</figcaption>
-</picture>
+</figure>
 
 (Œuvre originale par [Rozavive](https://dynasty-scans.com/images/20543))
 
 Encore un absolument incompréhensible, le serveur est celui de @mastodon.staropa.net@1024x2, le hackeur semble être [Litevex](https://litevex.sys42.net/), mais celui-ci affirme avoir hacké htwins.net. 😵‍💫
 Bref !
 
-<picture>
-  <source srcset="res/mario_drawing.avif" />
-  <img src="res/mario_drawing.jpg" alt="Dessin au crayon blanc sur fond noir très très basique de Mario reconnaissable par le M sur la casquette. " class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/mario_drawing.avif" />
+    <img src="res/mario_drawing.jpg" alt="Dessin au crayon blanc sur fond noir très très basique de Mario reconnaissable par le M sur la casquette. " class="no-dark">
+  </picture>
   <figcaption>Le nom du serveur était «&nbsp;litevex hacked htwins.net&nbsp;»</figcaption>
-</picture>
+</figure>
 
 Au sujet des revendications, VNC est un moyen alternatif à la défiguration de site web dans la cyberguerre.
 
-<picture>
-  <source srcset="res/hacker_against_israel.avif" />
-  <img src="res/hacker_against_israel.jpg" alt="Écran de revendication de la guerre contre Israel, sur fond rouge avec le logo « Free Palestine », le message « You have been hacked » en blanc et la croix de David qui coule dans une mer numérique" class="no-dark">
+<figure>
+  <picture>
+    <source srcset="res/hacker_against_israel.avif" />
+    <img src="res/hacker_against_israel.jpg" alt="Écran de revendication de la guerre contre Israel, sur fond rouge avec le logo « Free Palestine », le message « You have been hacked » en blanc et la croix de David qui coule dans une mer numérique" class="no-dark">
+  </picture>
   <figcaption>Le nom du serveur était «&nbsp;4629C81 &nbsp;»</figcaption>
-</picture>
+</figure>
 
 À la prochaine fois pour un article sur l'animation sur le Web ... Ou sur les code QR (encore !). 🤷