couleurs sombre NoK et hidden mal mis

This commit is contained in:
Thierry Fenasse 2024-04-02 17:37:09 +02:00
parent bc0e9ad644
commit aaf65e6a3c
Signed by: tfenasse
GPG Key ID: 56BF2A3A07DDEB1F
2 changed files with 33 additions and 37 deletions

View File

@ -13,46 +13,40 @@
* *
* Les couleurs sont définies en tant que variables sous la forme * Les couleurs sont définies en tant que variables sous la forme
--nom: contenu; --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) var(--nom)
* *
* Cela facilite le changement de couleur pour « tout le site » en quelques corrections. * 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. * 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 :). * Quelques Jeux de couleurs sont proposer pour jouer avec :).
* Si tous les Jeux de coudeurs mis en commentaire, le site sera en noir&blanc. * Si tous les Jeux de couleurs sont mis en commentaire, le site sera en noir&blanc.
* Mais le menu sera moche en * 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 /* Jeu de couleur de base
* Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site. * Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site.
*/ */
:root { :root {
--fond: #EEE; --fond: #EEE;
--primaire: #222; --primaire: #222;
--liens: #fe1976; --liens: #fe1976;
--deco: #96D321; --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 » /* Jeu de couleurs « Belgique »
* Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser. * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
:root { :root {
--fond: black; --fond: white;
--primaire: white; --primaire: black;
--liens: gold; --liens: gold;
--deco: red; --deco: red;
} }
*/ */
/* Jeu de couleurs « Europe » /* Jeu de couleurs « Europe »
* Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser. * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
@ -61,7 +55,7 @@
--primaire: #039; --primaire: #039;
--liens: rgb(18, 116, 207); --liens: rgb(18, 116, 207);
--deco: #FC0; --deco: #FC0;
} }
*/ */
/* Expériences /* Expériences
@ -395,7 +389,6 @@ th {
tr:nth-child(even) { tr:nth-child(even) {
/* Pour colorer différemment une ligne sur deux (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)); background-color: color-mix(in srgb, var(--primaire) 20%, var(--fond));
} }
@ -403,14 +396,17 @@ tr:nth-child(even) {
/* Coloration du code (highlight) /* Coloration du code (highlight)
* voir aussi le fichier highlight.css * 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. /* 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, * 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. * et qui utilise la coloration syntaxique définie dans le fichier highlight.css.
*/ */
background-color: var(--primaire); background-color: color-mix(in srgb, var(--primaire) 10%, var(--fond));
color: var(--fond); border: solid var(--deco);
padding: .3em; border-width: .1em;
border-radius: .3em;
padding: .2em .4em;
font-weight: bold;
} }

View File

@ -23,20 +23,20 @@
<nav class="pagination"> <nav class="pagination">
<a href="{{ SITEURL }}/{{ first_page.url }}" <a href="{{ SITEURL }}/{{ first_page.url }}"
{%- if articles_page.has_previous() %} {%- if articles_page.has_previous() %}
{%- else %}class="hidden"{% endif %}> {%- else %} class="hidden"{% endif %}>
<i class="fa fa-angle-double-left"></i></a> <i class="fa fa-angle-double-left"></i></a>
<a href="{{ SITEURL }}/{{ articles_previous_page.url }}" <a href="{{ SITEURL }}/{{ articles_previous_page.url }}"
{%- if articles_page.has_previous() %} {%- if articles_page.has_previous() %}
{%- else %}class="hidden"{% endif %}> {%- else %} class="hidden"{% endif %}>
<i class="fa fa-angle-left"></i></a> <i class="fa fa-angle-left"></i></a>
<p><strong>{{ category }}{{ tag }}</strong> | {{ articles_page.number }} de {{ articles_paginator.num_pages }}</p> <p><strong>{{ category }}{{ tag }}</strong> | {{ articles_page.number }} de {{ articles_paginator.num_pages }}</p>
<a href="{{ SITEURL }}/{{ articles_next_page.url }}" <a href="{{ SITEURL }}/{{ articles_next_page.url }}"
{%- if articles_page.has_next() %} {%- if articles_page.has_next() %}
{%- else %}class="hidden"{% endif %}> {%- else %} class="hidden"{% endif %}>
<i class="fa fa-angle-right"></i></a> <i class="fa fa-angle-right"></i></a>
<a href="{{ SITEURL }}/{{ last_page.url }}" <a href="{{ SITEURL }}/{{ last_page.url }}"
{%- if articles_page.has_next() %} {%- if articles_page.has_next() %}
{%- else %}class="hidden"{% endif %}> {%- else %} class="hidden"{% endif %}>
<i class="fa fa-angle-double-right"></i></a> <i class="fa fa-angle-double-right"></i></a>
</nav> </nav>
{% endif %} {% endif %}