diff --git a/static/css/bidouille.css b/static/css/bidouille.css index d091273..9095dbc 100644 --- a/static/css/bidouille.css +++ b/static/css/bidouille.css @@ -13,55 +13,49 @@ * * 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 + * 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 + * Si tous les Jeux de couleurs sont mis en commentaire, le site sera en noir&blanc. + * Mais le menu sera moche lorsqu'on fait défiler le contenu parce qu'il n'aura pas de couleur de fond. + * + * La fonction color-mix, qui est utilisée dans ce CSS est récente (2023). + * Elle pourrait ne pas fonctionner sur des anciens navigateurs web. + * */ /* Jeu de couleur de base * Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site. */ - :root { - --fond: #EEE; - --primaire: #222; - --liens: #fe1976; - --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; + --fond: #EEE; + --primaire: #222; + --liens: #fe1976; + --deco: #96D321; } -*/ - + /* 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; -} -*/ + :root { + --fond: white; + --primaire: black; + --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; -} + --liens: rgb(18, 116, 207); + --deco: #FC0; + } */ /* Expériences @@ -395,7 +389,6 @@ th { tr:nth-child(even) { /* 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)); } @@ -403,14 +396,17 @@ tr:nth-child(even) { /* Coloration du code (highlight) * voir aussi le fichier highlight.css */ -article p code { +code:not(div.highlight 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; + background-color: color-mix(in srgb, var(--primaire) 10%, var(--fond)); + border: solid var(--deco); + border-width: .1em; + border-radius: .3em; + padding: .2em .4em; + font-weight: bold; } diff --git a/templates/listing.html b/templates/listing.html index 5e03aea..f51e497 100644 --- a/templates/listing.html +++ b/templates/listing.html @@ -23,20 +23,20 @@ {% endif %}