@ -1,37 +1,29 @@
/* 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
*
* Ah oui ! Ceci est un commentaire.
*/
/* Europe
:root {
--fond: white;
--primaire: #039 ;
--liens: rgb(18, 116, 207);
--deco: #FC0;
}
/* 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
*/
/* Belgiqu e
:root {
--fond: black;
--primaire: white;
--liens: gold;
--deco: red;
}
*/
/* compuThings inversé
:root {
--fond: #222;
--primaire: #EEE;
--liens: #96D321;
--deco: #fe1976;
}
*/
/* compuThings
/* Jeu de couleur de bas e
* Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site.
*/
: root {
--fond : #EEE ;
@ -40,13 +32,51 @@ Si aucune couleur n'est définie, tout le site sera en noir&blanc.
--deco : #96D321 ;
}
/* Jeu de couleur de base mais inversé
* Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
:root {
--fond: #222;
--primaire: #EEE;
--liens: #96D321;
--deco: #fe1976;
}
*/
/* Jeu de couleurs « Belgique »
* Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
:root {
--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 «
*/
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.5 em ;
}
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.8 em ;
}
ul li {
/* pour écarter les fa-icons du texte
/* pour écarter le symbole du texte
*/
padding-left : .5 em ;
}
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 : .7 em ;
}
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 ) 1 px ;
}
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 ) ) ;
}
/* c oloration du code (highlight)
* voir aussi highlight.css
/* C oloration 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 : .3 em ;
}
. 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 : 2 em ;
width : auto ;
height : auto ;
@ -319,7 +390,6 @@ tr:nth-child(even) {
/* notes en bas de page
*/
. footnote hr {
color : var ( - - fond ) ;
}
