From 10a5a0a6773f7e8d02deda654f0bbeb41ffabfe0 Mon Sep 17 00:00:00 2001 From: "tierce (Thierry Fenasse)" Date: Tue, 19 Mar 2024 12:07:00 +0100 Subject: [PATCH] commentaires et petit tweak --- static/css/latest.css | 146 +++++++++++++++++++++++++++++++----------- templates/base.html | 6 +- 2 files changed, 112 insertions(+), 40 deletions(-) diff --git a/static/css/latest.css b/static/css/latest.css index 007a945..7591ba1 100644 --- a/static/css/latest.css +++ b/static/css/latest.css @@ -1,28 +1,39 @@ -/* Couleurs -Pour éviter de chercher dans le code les couleurs utilisées -sont sous forme de variables CSS. -Si aucune couleur n'est définie, tout le site sera en noir&blanc. +/* Ceci est une feuille de style. + * Elle est constituée de règles qui influenceront l'affichage de la page html. + * C'est la dernière que la page html charge (voir html > head). + * 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; - --primaire: #039; - --liens: rgb(18, 116, 207); - --deco: #FC0; + --fond: #EEE; + --primaire: #222; + --liens: #fe1976; + --deco: #96D321; } -*/ - -/* Belgique -:root { - --fond: black; - --primaire: white; - --liens: gold; - --deco: red; -} -*/ - -/* compuThings inversé + +/* Jeu de couleur de base mais inversé + * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser. :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; - --primaire: #222; - --liens: #fe1976; - --deco: #96D321; + --fond: black; + --primaire: white; + --liens: gold; + --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) - * voir aussi highlight.css +/* Coloration du code (highlight) + * 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-right: 1.5em; - font-size: 1em; + padding-left: 1.5em; + padding-right: 1.5em; + font-size: 1em; } } \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 3ff854c..6dcef0f 100644 --- a/templates/base.html +++ b/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" %} {{ cat}} {% endif %} {% endfor %} - {% if DISPLAY_LINKS_ON_MENU %} | + {% if DISPLAY_LINKS_ON_MENU %} + {% if loop.first %} | {% endif %} {% for title, link in LINKS %} {{ title }} {% endfor %}