couleurs sombre NoK et hidden mal mis
This commit is contained in:
parent
bc0e9ad644
commit
aaf65e6a3c
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user