Finished new blog style (TODO: light-mode)

8 files changed, 297 insertions, 101 deletions

diff --git a/articles/data-privacy.md b/articles/data-privacy.md
index b230161..707a39b 100644
--- a/articles/data-privacy.md
+++ b/articles/data-privacy.md
@@ -1,5 +1,5 @@
 ---
-date: 02-04-2023
+date: 25-06-2023
 description: Les bonnes pratiques pour la vie privée et l'améliorer
 ---
 
@@ -51,8 +51,12 @@ Il existe tellement d'alternatives aux applications et services que vous utilise
 Afin de trouver plus de logiciel respectueux de la vie privée, je vous conseille l'excellent [annuaire de Framalibre](https://framalibre.org/).
 
 Si tout du moins vous êtes obligés de garder certaines applications peu respectueuses de la vie privée (Youtube, Instagram, Reddit..), plusieurs solutions s'offrent à vous.  
-- La première est d'utiliser le navigateur, combiné avec les bonnes extensions qui bloquent les pubs et les traqueurs, votre vie privée sera mieux protégés qu'en utilisant les applications de base (truffés de traqueurs et ayant accès à tout votre téléphone, contact, fichiers, localisation..)..
-- La deuxième, utilisé des applications proxy, un intermédiaire qui permet de vous protéger, ce sont des applications qui permettent d'accéder aux services tout en respectant votre vie privée. Et parfois sans avoir besoin d'utiliser un compte. Le paradis, non ? Par exemple pour Youtube il existe [NewPipe](https://newpipe.net/), pour Reddit - Infinity.. Pour tiktok, instagram, pinterest il en existe aussi.
+- La première est d'utiliser le navigateur, combiné avec les bonnes extensions qui bloquent les pubs et les traqueurs, votre vie privée sera mieux protégés qu'en utilisant les applications de base (truffés de traqueurs et ayant accès à tout votre téléphone, contact, fichiers, localisation..)..  
+- La deuxième, utilisé des applications proxy, un intermédiaire qui permet de vous protéger, ce sont des applications qui permettent d'accéder aux services tout en respectant votre vie privée. Et parfois sans avoir besoin d'utiliser un compte. Le paradis, non ? Par exemple pour Youtube il existe [NewPipe](https://newpipe.net/), pour Reddit - Infinity.. Pour tiktok, instagram, pinterest il en existe aussi.  
+  
+Une autre solution existe, il s'agit de passer sur [les réseaux sociaux du fédiverse](https://fediverse.party/en/miscellaneous/). Il s'agit d'un système où chaque serveur peut communiquer avec les autres et ainsi pouvoir utiliser des serveurs plus respectueux de la vie privée. C'est exactement le même principe que pour les mails. Grâce à ce système à part les informations que vous donnez au serveur votre vie privée est protégé (du moment que le serveur qui vous héberge respecte cela).  
+**Attention vos messages ne sont pas chiffrés, donc si vous voulez envoyer des messages privées utiliser Matrix ou un autre système chiffré de bout à bout**
+
 
 ### Systèmes d'exploitations
 
@@ -84,6 +88,14 @@ Pour cela il vous faudra effectuer des sauvegardes hebdomadaire, sur un disque d
 
 Pour plus d'informations sur les sauvegardes et comment en réaliser proprement je vous redirige vers mon [article]() sur ce sujet.
 
+### Decentralisation
+
+Les systèmes décentralisés & fédérer permettent une grande amélioration de la vie privée, j'ai parlé du fédiverse précédemment mais il en existe plein d'autres (Matrix, mail..).  
+  
+Pourquoi ce système est mieux pour la vie privée ? Car vous pouvez choisir le serveur qui héberge vos données, et fort probablement l'hébergé vous mêmes. Alors attention tout ceux qui auront   échangés avec vous et qui ne sont pas sur le même serveur auront les données de cet échange enregistré sur le serveur qui les héberge.  
+  
+L'autre avantage de la décentralisation est la redondance et l'indépendance, imaginer que demain Meta fasse faillite, Facebook, Instagram et autre ne fonctionnent plus du tout, et toutes vos données seront perdus. Alors qu'avec un système décentralisé, si le serveur ferme vous pourrez toujours utiliser le service sur un autre serveur. De même que si le service fait une mise à jour qui ne plait pas à l'hébergeur du serveur il peut ne pas la faire tout en continuant à être lié aux autres s'ils le souhaitent (pratique pour des mises à jour contre la vie privée).  
+
 ### Conclusion
 
 Si vous avez appliqué ces conseils, vous avez maintenant un environnement plus respectueux de votre vie privée, **attention** cela ne vous rend pas anonyme pour autant, pour cela il faudrait supprimer votre empreinte numérique et c'est une autre histoire, je ferais probablement un article dessus dans le futur.
diff --git a/assets/css/style.css b/assets/css/style.css
index 7cc08e9..8c4011a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,48 +1,140 @@
+/* Root */
+:root 
+{
+	/* Dark mode */
+	--dark-bg: #0d0d0d;
+	--dark-text: #ffdab9;
+	--dark-link: black;
+	--dark-link-bg: #f08080;
+	--dark-title: #f08080;
+	--dark-quote-border: #fbc4ab;
+
+	/* Light mode */
+	--light-bg: #ffdab9;
+	--light-text: #0d0d0d;
+	--light-link: white;
+	--light-link-bg: white;
+	--light-title: white;
+	--light-quote-border: white;
+
+	/* Default mode */
+	--bg-color: var(--dark-bg);
+	--text-color: var(--dark-text);
+	--link-color: var(--dark-link);
+	--link-bg-color: var(--dark-link-bg);
+	--title-color: var(--dark-title);
+	--quote-border: var(--dark-quote-border);
+	--switch-icon: var(--dark-switch-icon);
+	--switch-text: var(--dark-switch-text);
+}
+
+/* Body */
 body
 {
+	color: var(--text-color);
+	background-color: var(--bg-color);
+
     margin: 2vh auto;
     max-width: 80vw;
-	color:#00072D;
-	background-color: #C2EAFF;
 }
 
-h1, footer
+/*
+	HEADER
+*/
+
+/* Navbar */
+nav ul
 {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+
+	display: flex;
+	justify-content: space-between;
+}
+
+nav a 
+{
+	padding: 0.1rem 1rem;
+    margin: 0rem 0.3rem;
+
     text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+
+	background-color: var(--link-bg-color);
+    color: var(--link-color); 
 }
 
-a 
+nav a:hover 
 { 
-    color: #87B37A; 
-    text-decoration: none; 
+    color: var(--link-bg-color);
+	background-color: var(--bg-color);
+	border: 1px solid var(--link-bg-color);
 }
 
-a:hover 
-{ 
-    text-decoration:underline;
+/* 
+	MAIN
+*/
+
+main h1, main h2, main h3, main h4 
+{
+	color: var(--title-color);
+}
+
+main h1
+{
+	text-align: center;
+	text-transform: uppercase;
 }
 
-.center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 60%;
+main a 
+{
+	color: var(--link-bg-color);
 }
 
-.header{
-	margin: 1em 0;
-	display: block;
-	width:100%;
+/* Date for link */
+main li a + p 
+{
+	display: inline;
+	margin: 1vw;
+
+	font-size: small;
 }
 
-.navbar{
-	display: flex;
-	justify-content: space-between;
-	font-weight: bold;
+/* Blockquote */
+main blockquote 
+{
+	padding-left: 1vw;
+
+	background-color: var(--link-bg-color);
+	color: var(--link-color);
+	border-left: 2px solid var(--quote-border);
 }
 
-blockquote {
-	border-left: 3px solid #0077b6;
-	padding-left: 10px;
-	background-color: #90e0ef;
+/*
+	FOOTER
+*/
+
+footer 
+{
+	text-align: center;
 }
+
+footer li
+{
+	display: inline;
+}
+
+footer li a 
+{
+	padding: 0.1rem 1rem;
+    margin: 0rem 0.3rem;
+
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+
+	background-color: var(--link-bg-color);
+    color: var(--link-color); 
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c50ddac..cf30587 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <!-- Metadonnées -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Blog d'Oxbian">
@@ -8,20 +9,28 @@
     <meta property="og:url" content="https://blog.arka.rocks">
     <meta property="og:type" content="article">
     <meta property="og:article:author" content="Oxbian">
-    <title>Blog d'Oxbian</title>
+
+    <!-- CSS & Atom -->
     <link rel="alternate" href="atom.xml" type="application/atom+xml" title="RSS">
     <link rel="stylesheet" href="assets/css/style.css">
     <link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Blog d'Oxbian</title>
 </head>
 <body>
+    <!-- En tête -->
     <header>
-        <div class="navbar">
-            <a href="index.html">Accueil</a>
-            <a href="pages/how-to-read.html">Comment lire ce blog ?</a>
-            <a href="pages/about.html">À Propos</a>
-            <a href="atom.xml">RSS</a>
-        </div>
+        <nav>
+            <ul>
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="pages/about.html">À Propos</a></li>
+                <li><a href="atom.xml">RSS</a></li>
+            </ul>
+        </nav>
     </header>
+
+    <!-- Contenu principale -->
     <main>
         <article>
             <h1>Bienvenue sur mon blog</h1>
@@ -29,17 +38,23 @@
             De plus j'y partage aussi des articles sur les bonnes pratiques dans divers domaines, comme la vie privée, le sport..</p>
 
             <ul>
-				<li><a href="pages/data-privacy.html">Données et vie privée</a><p>02-04-2023</p></li>
+				<li><a href="pages/data-privacy.html">Données et vie privée</a><p>25-06-2023</p></li>
 			</ul>
         </article>
     </main>
+
+    <!-- Bas de page -->
     <hr>
     <footer>
         <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
-        <div>
-            <a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a>
-            <a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a>
-            <a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
         </div>
     </footer>
 </body>
diff --git a/pages/about.html b/pages/about.html
index 357531f..b17f931 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <!-- Metadonnées -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
@@ -8,21 +9,28 @@
     <meta property="og:type" content="article" >
     <meta property="og:article:author" content="Oxbian">
     <meta property="og:article:published_time" content="01-01-0001">
-    <meta property="og:image" content="$IMAGE_PREVIEW">
-    <title>À propos</title>
+
+    <!-- CSS & Atom -->
     <link rel="alternate" href="../atom.xml" type="application/atom+xml" title="RSS">
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="shortcut icon" href="../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>À propos</title>
 </head>
 <body>
+    <!-- En tête -->
     <header>
-        <div class="navbar">
-            <a href="../index.html">Accueil</a>
-            <a href="../pages/how-to-read.html">Comment lire ce blog ?</a>
-            <a href="../pages/about.html">À Propos</a>
-            <a href="../atom.xml">RSS</a>
-        </div>
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../pages/about.html">À Propos</a></li>
+                <li><a href="../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
     </header>
+
+    <!-- Contenu principale -->
     <main>
         <article>
             <h1>À propos</h1>
@@ -40,13 +48,19 @@
 
         </article>
     </main>
+
+    <!-- Bas de page -->
     <hr>
     <footer>
         <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
-        <div>
-            <a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a>
-            <a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a>
-            <a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
         </div>
     </footer>
 </body>
diff --git a/pages/data-privacy.html b/pages/data-privacy.html
index 87d6474..c2009af 100644
--- a/pages/data-privacy.html
+++ b/pages/data-privacy.html
@@ -1,28 +1,36 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <!-- Metadonnées -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Les bonnes pratiques pour la vie privée et l'améliorer">
     <meta property="og:title" content="Données et vie privée">
     <meta property="og:type" content="article" >
     <meta property="og:article:author" content="Oxbian">
-    <meta property="og:article:published_time" content="02-04-2023">
-    <meta property="og:image" content="$IMAGE_PREVIEW">
-    <title>Données et vie privée</title>
+    <meta property="og:article:published_time" content="25-06-2023">
+
+    <!-- CSS & Atom -->
     <link rel="alternate" href="../atom.xml" type="application/atom+xml" title="RSS">
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="shortcut icon" href="../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Données et vie privée</title>
 </head>
 <body>
+    <!-- En tête -->
     <header>
-        <div class="navbar">
-            <a href="../index.html">Accueil</a>
-            <a href="../pages/how-to-read.html">Comment lire ce blog ?</a>
-            <a href="../pages/about.html">À Propos</a>
-            <a href="../atom.xml">RSS</a>
-        </div>
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../pages/about.html">À Propos</a></li>
+                <li><a href="../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
     </header>
+
+    <!-- Contenu principale -->
     <main>
         <article>
             <h1>Données et vie privée</h1>
@@ -59,6 +67,8 @@
 	<li>La première est d'utiliser le navigateur, combiné avec les bonnes extensions qui bloquent les pubs et les traqueurs, votre vie privée sera mieux protégés qu'en utilisant les applications de base (truffés de traqueurs et ayant accès à tout votre téléphone, contact, fichiers, localisation..)..</li>
 	<li>La deuxième, utilisé des applications proxy, un intermédiaire qui permet de vous protéger, ce sont des applications qui permettent d'accéder aux services tout en respectant votre vie privée. Et parfois sans avoir besoin d'utiliser un compte. Le paradis, non ? Par exemple pour Youtube il existe <a href="https://newpipe.net/">NewPipe</a>, pour Reddit - Infinity.. Pour tiktok, instagram, pinterest il en existe aussi.</li>
 </ul>
+<p>Une autre solution existe, il s'agit de passer sur <a href="https://fediverse.party/en/miscellaneous/">les réseaux sociaux du fédiverse</a>. Il s'agit d'un système où chaque serveur peut communiquer avec les autres et ainsi pouvoir utiliser des serveurs plus respectueux de la vie privée. C'est exactement le même principe que pour les mails. Grâce à ce système à part les informations que vous donnez au serveur votre vie privée est protégé (du moment que le serveur qui vous héberge respecte cela).</p>
+<p><em></em>Attention vos messages ne sont pas chiffrés, donc si vous voulez envoyer des messages privées utiliser Matrix ou un autre système chiffré de bout à bout<em></em></p>
 <h3>Systèmes d'exploitations</h3>
 <p>Les deux parties précédentes peuvent se faire du jour au lendemain, cela demandera peut-être un petit temps d'adaptation le temps de s'habituer aux nouvelles interfaces, mais rien de plus. Changer de système d'exploitation c'est comme changer de vélo ou de voiture, ça reste globalement la même chose mais l'ergonomie, le design, les fonctionnalités peuvent être différentes. Si vous êtes débutant je vous conseil de vous faire aider pour la partie qui va suivre, des vidéos youtube, des amis / collègues peuvent aider..</p>
 <p>La première chose à faire est de décider vers quel système d'exploitation se tourner. Je pense que vous connaissez probablement les 3 grandes familles, Windows, Linux et Mac-OS, mais il en existe plein d'autres.</p>
@@ -74,6 +84,10 @@
 <p>Une dernière bonne pratique est de sauvegarder tout ce que vous avez fait / configurer. Voir même si vous en avez l'envie et les compétences d'automatiser la remise en place de ce système. Pratique en cas de perte / vol de votre ordinateur de savoir qu'en 5 minutes vous retrouvez le même environnement que vous avez tous les jours sur un autre ordinateur sans le moindre effort, non ?</p>
 <p>Pour cela il vous faudra effectuer des sauvegardes hebdomadaire, sur un disque dur externe et non dans le cloud (ne gâchons pas tout ce travail sur la vie privée pour tout stockée chez un GAFAM..).</p>
 <p>Pour plus d'informations sur les sauvegardes et comment en réaliser proprement je vous redirige vers mon <a href="">article</a> sur ce sujet.</p>
+<h3>Decentralisation</h3>
+<p>Les systèmes décentralisés & fédérer permettent une grande amélioration de la vie privée, j'ai parlé du fédiverse précédemment mais il en existe plein d'autres (Matrix, mail..).</p>
+<p>Pourquoi ce système est mieux pour la vie privée ? Car vous pouvez choisir le serveur qui héberge vos données, et fort probablement l'hébergé vous mêmes. Alors attention tout ceux qui auront   échangés avec vous et qui ne sont pas sur le même serveur auront les données de cet échange enregistré sur le serveur qui les héberge.</p>
+<p>L'autre avantage de la décentralisation est la redondance et l'indépendance, imaginer que demain Meta fasse faillite, Facebook, Instagram et autre ne fonctionnent plus du tout, et toutes vos données seront perdus. Alors qu'avec un système décentralisé, si le serveur ferme vous pourrez toujours utiliser le service sur un autre serveur. De même que si le service fait une mise à jour qui ne plait pas à l'hébergeur du serveur il peut ne pas la faire tout en continuant à être lié aux autres s'ils le souhaitent (pratique pour des mises à jour contre la vie privée).</p>
 <h3>Conclusion</h3>
 <p>Si vous avez appliqué ces conseils, vous avez maintenant un environnement plus respectueux de votre vie privée, <em></em>attention<em></em> cela ne vous rend pas anonyme pour autant, pour cela il faudrait supprimer votre empreinte numérique et c'est une autre histoire, je ferais probablement un article dessus dans le futur.</p>
 <p>J'espère que cet article vous aura servi de porte d'entrée dans le monde de la conscience numérique et l'importance de la vie privée sur internet.</p>
@@ -102,13 +116,19 @@
 
         </article>
     </main>
+
+    <!-- Bas de page -->
     <hr>
     <footer>
         <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
-        <div>
-            <a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a>
-            <a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a>
-            <a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
         </div>
     </footer>
 </body>
diff --git a/pages/how-to-read.html b/pages/how-to-read.html
index 6f1be22..62d75e8 100644
--- a/pages/how-to-read.html
+++ b/pages/how-to-read.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <!-- Metadonnées -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
@@ -8,21 +9,28 @@
     <meta property="og:type" content="article" >
     <meta property="og:article:author" content="Oxbian">
     <meta property="og:article:published_time" content="01-01-0001">
-    <meta property="og:image" content="$IMAGE_PREVIEW">
-    <title>Comment lire ce blog ?</title>
+
+    <!-- CSS & Atom -->
     <link rel="alternate" href="../atom.xml" type="application/atom+xml" title="RSS">
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="shortcut icon" href="../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Comment lire ce blog ?</title>
 </head>
 <body>
+    <!-- En tête -->
     <header>
-        <div class="navbar">
-            <a href="../index.html">Accueil</a>
-            <a href="../pages/how-to-read.html">Comment lire ce blog ?</a>
-            <a href="../pages/about.html">À Propos</a>
-            <a href="../atom.xml">RSS</a>
-        </div>
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../pages/about.html">À Propos</a></li>
+                <li><a href="../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
     </header>
+
+    <!-- Contenu principale -->
     <main>
         <article>
             <h1>Comment lire ce blog ?</h1>
@@ -37,13 +45,19 @@
 
         </article>
     </main>
+
+    <!-- Bas de page -->
     <hr>
     <footer>
         <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
-        <div>
-            <a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a>
-            <a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a>
-            <a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
         </div>
     </footer>
 </body>
diff --git a/templates/index_template.html b/templates/index_template.html
index 3ddd4e3..5a80edc 100644
--- a/templates/index_template.html
+++ b/templates/index_template.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <!-- Metadonnées -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Blog d'Oxbian">
@@ -8,20 +9,28 @@
     <meta property="og:url" content="https://blog.arka.rocks">
     <meta property="og:type" content="article">
     <meta property="og:article:author" content="Oxbian">
-    <title>Blog d'Oxbian</title>
+
+    <!-- CSS & Atom -->
     <link rel="alternate" href="atom.xml" type="application/atom+xml" title="RSS">
     <link rel="stylesheet" href="assets/css/style.css">
     <link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>Blog d'Oxbian</title>
 </head>
 <body>
+    <!-- En tête -->
     <header>
-        <div class="navbar">
-            <a href="index.html">Accueil</a>
-            <a href="pages/how-to-read.html">Comment lire ce blog ?</a>
-            <a href="pages/about.html">À Propos</a>
-            <a href="atom.xml">RSS</a>
-        </div>
+        <nav>
+            <ul>
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="pages/about.html">À Propos</a></li>
+                <li><a href="atom.xml">RSS</a></li>
+            </ul>
+        </nav>
     </header>
+
+    <!-- Contenu principale -->
     <main>
         <article>
             <h1>Bienvenue sur mon blog</h1>
@@ -31,13 +40,19 @@
             $CONTENT
         </article>
     </main>
+
+    <!-- Bas de page -->
     <hr>
     <footer>
         <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
-        <div>
-            <a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a>
-            <a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a>
-            <a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
         </div>
     </footer>
 </body>
diff --git a/templates/page_template.html b/templates/page_template.html
index acee6ba..5adfb02 100644
--- a/templates/page_template.html
+++ b/templates/page_template.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <!-- Metadonnées -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="$DESC">
@@ -8,34 +9,47 @@
     <meta property="og:type" content="article" >
     <meta property="og:article:author" content="Oxbian">
     <meta property="og:article:published_time" content="$DATE">
-    <meta property="og:image" content="$IMAGE_PREVIEW">
-    <title>$TITLE</title>
+
+    <!-- CSS & Atom -->
     <link rel="alternate" href="../atom.xml" type="application/atom+xml" title="RSS">
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="shortcut icon" href="../assets/favicon/favicon.ico" type="image/x-icon">
+
+    <title>$TITLE</title>
 </head>
 <body>
+    <!-- En tête -->
     <header>
-        <div class="navbar">
-            <a href="../index.html">Accueil</a>
-            <a href="../pages/how-to-read.html">Comment lire ce blog ?</a>
-            <a href="../pages/about.html">À Propos</a>
-            <a href="../atom.xml">RSS</a>
-        </div>
+        <nav>
+            <ul>
+                <li><a href="../index.html">Accueil</a></li>
+                <li><a href="../pages/how-to-read.html">Comment lire ce blog ?</a></li>
+                <li><a href="../pages/about.html">À Propos</a></li>
+                <li><a href="../atom.xml">RSS</a></li>
+            </ul>
+        </nav>
     </header>
+
+    <!-- Contenu principale -->
     <main>
         <article>
             <h1>$TITLE</h1>
             $CONTENT
         </article>
     </main>
+
+    <!-- Bas de page -->
     <hr>
     <footer>
         <p>Contactez-moi pour toute question ou discussion, je répond assez vite en général.</p>
-        <div>
-            <a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a>
-            <a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a>
-            <a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a>
+
+        <!-- Réseaux sociaux-->
+        <div id="social">
+            <ul>
+                <li><a class="matrix" href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
+                <li><a rel="me" class="mastodon" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>
+                <li><a class="mail" href="mailto:oxbian.noch@simplelogin.com">Mail</a></li>
+            </ul>
         </div>
     </footer>
 </body>