commentaires et petit tweak
This commit is contained in:
parent
5a05f8c50d
commit
10a5a0a677
GPG Key ID:
56BF2A3A07DDEB1F
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user