commentaires et petit tweak

static/css/latest.css

@@ -1,28 +1,39 @@
-/* Couleurs
+/* Ceci est une feuille de style.
-Pour éviter de chercher dans le code les couleurs utilisées
+ * Elle est constituée de règles qui influenceront l'affichage de la page html.
-sont sous forme de variables CSS.
+ * C'est la dernière que la page html charge (voir html > head).
-Si aucune couleur n'est définie, tout le site sera en noir&blanc.
+ * Les règles qui la constitue seront dont les premières règles de la cascade.
+ * CSS voulant dire en anglais Cascading Style Sheet(s), ou Feuilles de Style en Cascade.
+ *
+ * Ah oui ! Ceci est un commentaire.
 */
 
-/* Europe
+/* Les couleurs
+ *
+ * Les couleurs sont définies en tant que variables sous la forme
+   --nom: contenu;
+ * Elles sont appelables dans les régles css sous la forme 
+   var(--nom)
+ *
+ * Cela facilite le changement de couleur pour « tout le site » en quelques corrections.
+ * Merci de préférer travailler avec des couleurs sous forme de variable telles que les 4 ci-dessous.
+ *
+ * Quelques Jeux de couleurs sont proposer pour … jouer avec :).
+ * Si tous les Jeux de coudeurs mis en commentaire, le site sera en noir&blanc.
+ * Mais le menu sera moche en 
+*/
+
+/* Jeu de couleur de base
+ * Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site.
+ */
 :root {
-    --fond: white;
+    --fond: #EEE;
-    --primaire: #039;
+    --primaire: #222;
-    --liens: rgb(18, 116, 207);
+    --liens: #fe1976;
-    --deco: #FC0;
+    --deco: #96D321;
 }
-*/
     
-/* Belgique
+/* Jeu de couleur de base mais inversé
-:root {
+ * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
-    --fond: black;
-    --primaire: white;
-    --liens: gold;
-    --deco: red;
-}
-*/
-
-/* compuThings inversé
 :root {
     --fond: #222;
     --primaire: #EEE;
@@ -31,22 +42,41 @@ Si aucune couleur n'est définie, tout le site sera en noir&blanc.
 }
 */
 
-/* compuThings 
+/* Jeu de couleurs « Belgique »
-*/
+ * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
 :root {
-    --fond: #EEE;
+    --fond: black;
-    --primaire: #222;
+    --primaire: white;
-    --liens: #fe1976;
+    --liens: gold;
-    --deco: #96D321;
+    --deco: red;
 }
+*/
+
+/* Jeu de couleurs « Europe »
+ * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
+:root {
+    --fond: white;
+    --primaire: #039;
+    --liens: rgb(18, 116, 207);
+    --deco: #FC0;
+}
+*/
+
 
 
 /* Expériences
 */
 
-
 /* Pour « toute » la page.
 */
+html {
+    /* Pour que lorsqu'on clique sur le lien de retour 
+     * d'une note en bas de page, le texte ne se cache pas
+     * sous le header (menu en haut de la page).
+     */
+    scroll-padding-top: 2.5em;
+}
+
 body {
 	margin: 0;
     font-family: sans-serif;
@@ -57,6 +87,10 @@ body {
 a {
     text-decoration: none;
     color: var(--liens);
+    /* Décommentez pour ajouter une bordure en pointillés autour de tous les liens,
+     * pour voir ce que ça fait… histoire de rigoler un peu.
+     border: dotted var(--deco) 5px;
+     */
 }
 
 img {
@@ -259,50 +293,87 @@ article h6::after {
 }
 
 
-/* listes
+/* listes à puces
 */
 li {
     line-height: 1.8em;
 }
 ul li {
-    /* pour écarter les fa-icons du texte
+    /* pour écarter le symbole du texte
     */
     padding-left: .5em;
 }
 
 ul li::marker {
-    content: "ɷ";
     color: var(--deco);
+    /*
+     * Il existe une multitude de caractères Unicode qui peuvent être utilisé pour les listes à puce.
+     * https://en.wikipedia.org/wiki/List_of_Unicode_characters
+     *
+    */
+    content: "❖";
+    /* Il est également possible d'utiliser un icône de la police FontAwsome incluse dans ce thème.
+     *
+     * content: "\f058";
+     * font-family: 'ForkAwesome';
+     * 
+     * Vous trouverez le code sur le site de ForkAwsome.
+     * Par exemple f058 pour https://forkaweso.me/Fork-Awesome/icon/check-circle/
+    */
 }
 
 li>ul {
+    /* Contrôler le retrait d'une liste de second niveau (une liste dans une liste)
+    */
     padding-left: .7em;
 }
 
 li>ul li::marker {
+    /* Chanher la couleur des puces d'une liste de second niveau (une liste dans une liste)
+    */
     color: color-mix(in srgb, var(--primaire) 60%, transparent);
 }
 
 /* tables
 */
 table {
+    /* Pour centrer les tables
+    */
     margin-left: auto;
     margin-right: auto;
 }
 
 th {
+    /* Pour souligner la ligne de titre des tables
+    */
     border-bottom: solid var(--deco) 1px;
 }
 
 tr:nth-child(even) {
-    /*background-color: var(--secondaire);*/
+    /* Pour colorer différemment une ligne sur deux (even)
+     * La fonction color-mix est récente (2023) en CSS et pourrait ne pas fonctionner sur des anciens navigateurs web.
+    */
     background-color: color-mix(in srgb, var(--primaire) 20%, var(--fond));
 }
 
-/* coloration du code (highlight)
+/* Coloration du code (highlight)
- * voir aussi highlight.css
+ * voir aussi le fichier highlight.css
 */
+article p code {
+    /* Pour que, dans le texte, le code soit de couleur et de fond différent.
+     * Mais PAS pour la class .highlight qui contiendra du code sur plusieurs lignes,
+     * et qui utilise la coloration syntaxique définie dans le fichier highlight.css.
+    */
+    background-color: var(--primaire);
+    color: var(--fond);
+    padding: .3em;
+}
+
+
 .highlight {
+    /* Permettre les retours à la ligne automatiques quand on affiche du code, peut le rendre difficile à lire.
+     * Pour éviter cela le défillement en cas de débordement (overflow) dans les zones affichant du code est activé.
+    */
     margin-left: 2em;
     width: auto;
     height: auto;
@@ -319,7 +390,6 @@ tr:nth-child(even) {
 
 /* notes en bas de page
 */
-
 .footnote hr {
     color: var(--fond);
 }
@@ -407,8 +477,8 @@ footer a:hover {
     }
     
     .pagination a {
-    padding-left: 1.5em;
+        padding-left: 1.5em;
-    padding-right: 1.5em;
+        padding-right: 1.5em;
-    font-size: 1em;
+        font-size: 1em;
     }
 }

templates/base.html

@@ -52,13 +52,15 @@
     {% endif %}
     {% endfor %}
     {% endif %}
-    {% if DISPLAY_CATEGORIES_ON_MENU %} | 
+    {% if DISPLAY_CATEGORIES_ON_MENU %} 
     {% for cat, null in categories %}
+    {% if loop.first %} | {% endif %}
     {% if cat!="author" %}
     <a href="{{ SITEURL }}/{{ cat.url }}"{% if cat==category %} aria-current="page" class="current"{% endif %}>{{ cat}}</a>
     {% endif %}
     {% endfor %}
-    {% if DISPLAY_LINKS_ON_MENU %} | 
+    {% if DISPLAY_LINKS_ON_MENU %}
+    {% if loop.first %} | {% endif %}
     {% for title, link in LINKS %}
     <a href="{{ link }}">{{ title }}</a>
     {% endfor %}