bidouille/static/css/bidouille.css

/* Ceci est une feuille de style.
 *
 * Elle est constituée de règles qui influencent l'affichage de la page html.
 *
 * C'est la dernière que la page html charge (voir html > head).
 * Les règles qui sont décrites dans le fichier actuel sont donc les premières règles de la cascade CSS.
 * CSS voulant dire en anglais Cascading Style Sheet(s), ou Feuilles de Style en Cascade.
 *
 * Ah oui ! Ceci est un commentaire.
*/

/* 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 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 couleurs « Belgique »
 * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
 :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;
    }
*/

/* 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;
    background-color: var(--fond);
    color: var(--primaire);
}

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 {
    max-width: 90vw;
    display: block;
}

.hidden {
    visibility: hidden;
}

.red {
    color: red;
}

/* pour les images en Markdown.
 * En markdown : ![alt](path/file.png#class "titre")
 * Sauf si leur nom est trop similaire, plusieurs classes peuvent se succéder.
 *  ex qui ne fonctionnerait pas : #small et #smaller
 *  ex en markown: ![alt](path/file.png#verysmall#right "titre")
*/
img[src*="#left"] {
    float: left;
    padding-right: 1em;
}

img[src*="#right"] {
    float: right;
    padding-left: 1em;
}

img[src*="#center"] {
    margin: auto;
}

img[src*="#verysmall"] {
    max-width: 10vw;
}

img[src*="#small"] {
    max-width: 30vw;
}

img[src*="#medium"] {
    max-width: 60vw;
}

img[src*="#round"] {
    border-radius: 50%;
}

/* Pour la balise header.
 * Elle est utilisée une seule fois sur la page.
 * Pour y afficher les deux menus, le principal et le social.
*/
header {
    background-color: var(--primaire);
    color: var(--fond);
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
}

header a {
    color: var(--fond);
    padding: .5em;
    display: inline-block;
}

header a::first-letter {
    color: var(--deco);
}

header a:hover{
    background: var(--liens);
}

header a:hover::first-letter{
    color: unset;
}

header a.current {
    text-decoration: underline .2em;
    text-decoration-color: var(--liens);
}

header a.current::first-letter{
    color: unset;
}

.social {
    background-color: var(--deco);
}

/* Si c'est du texte et pas un fa-icon,
 * il faut pouvoir lire la première lettre.
*/
.social a::first-letter{
    color: unset;
}

.social a:hover {
    color: var(--fond);
}

/* Contenu principal
*/
main {
    margin-left: 2em ;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top:auto;
}

.pagination p {
  margin: .5em;
}

.pagination a:hover {
  color: var(--primaire);
}

.pagination a {
  padding-left: 2em;
  padding-right: 3em;
  font-size: 1.5em;
}

/* Le tire et des infos
*/

hgroup h1 {
    margin-bottom: 0em;
    line-height: 1.2em;
}

hgroup p{
    /* pour les infos des articles (date, auteurs, …)
    */
    margin-top: 0em;
    color: color-mix(in srgb, var(--primaire), transparent);
}

hgroup a {
    color: color-mix(in srgb, var(--liens) 70%, transparent);
}

/* un article ou une page
*/

article h1 a {
    visibility: hidden;
}

article h2 a, 
article h3 a,
article h4 a, 
article h5 a,
article h6 a  {
    padding-left: .3em;
}


article p {
    padding-left: 1em;
    line-height: 1.5em;
    margin: .5em 0em;
}

article p a:hover {
    text-decoration: underline;
    text-decoration-color: var(--deco);
    color: unset;
}


article footer {
    text-align: center;
    font-size: smaller;
}

article blockquote {
    border-left-style: dotted;
    border-left-color: gray;
    margin: 1em;
}

/* Perma-liens sur les titres et sous-tittres, sous forme de points médians colorés.
 * Nécessite d'activer les fonctionnalités de Table des matières (TOC)
 * au travers de la variable MARKDOWN dans le pelicanconf.py.
*/
article h1 {
    font-size: xx-large;
}

article h2 a:after {
    content: " ··";
    color: var(--deco);
}

article h3 a:after {
    content: " ···";
    color: var(--deco);
}

article h4 a:after {
    content: " ··· ·";
    color: var(--deco);
}

article h5 a:after {
    content: " ··· ··";
    color: var(--deco);
}

article h6 a:after {
    content: " ··· ···";
    color: var(--deco);
}

article h2 a:hover:after,
article h3 a:hover:after,
article h4 a:hover:after,
article h5 a:hover:after,
article h6 a:hover:after {
    color: var(--liens);
}

article h2 a:hover,
article h3 a:hover,
article h4 a:hover,
article h5 a:hover,
article h6 a:hover {
    color: var(--deco);
}


/* listes à puces
*/
li {
    line-height: 1.8em;
}
ul li {
    /* pour écarter le symbole du texte
    */
    padding-left: .5em;
}

ul li::marker {
    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) {
    /* Pour colorer différemment une ligne sur deux (even)
    */
    background-color: color-mix(in srgb, var(--primaire) 20%, var(--fond));
}

/* Coloration du code (highlight)
 * voir aussi le fichier highlight.css
*/
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: 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;
}


.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;
    overflow: auto;
}

.highlighttable {
    /* Sinon le code avec numérotation des lignes
     * se retrouve centré parcequ'il est fait avec une table.
    */
    margin-left: unset;
    margin-right: unset;
}

/* notes en bas de page
*/
.footnote hr {
    color: var(--fond);
}

.footnote p {
    font-size: 1em;
    line-height: 1em;
}


/* Pour la table des matières si [TOC] est utilisé dans un article ou une page.
*/
article {
    /* 3fr = 3/4 de l'affichage pour le contenu de l'article ou de la page.
     * 1fr = 1/4 de l'affichage pour la table des matière (ou une zone vide si elle n'est pas activée).
    */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75vw, 1fr));
    padding-right: 2em;
}

article * {
    /* Pour que tout les éléments SAUF la table des matières, se trouvent dans la première colone.
    */
    grid-column: 1;
}

.toc {
    /* Pour la table des matières d'un article (ou d'une page).
    */
    grid-column: 2;
    padding: 0em 1.5em;
    background-color: var(--primaire);
    margin-left: 2em;
    margin-right: -2em; /* pour couvrir de couleur la marge du <main></main> */
    grid-row: span 1000; /* un nombre arbitrairement grand */
}

.toc ul {
    position: -webkit-sticky;
    position: sticky;
    top: 4em;
    padding-left: .5em;
}

.toc li::marker {
    color: var(--deco);
    content: unset;
}

.toc a {
    color: var(--fond);
}

.toc a:hover {
    color: var(--deco);
}

/* Pied de page
*/
footer {
    text-align: center;
    font-size: smaller;
    border-top: .1em dashed color-mix(in srgb, var(--primaire), transparent);;
    padding: .5em;
}
footer a {
    text-decoration: none;
}

footer a:hover {
    color: var(--deco);
}



/* Pour ne pas imprimer le menu.
*/
@media print {   
    header, .toc {
        display: none !important;
    }
}

/* Pour un minimum de responsivenessitude…
*/
@media screen and (max-width: 800px) {

    img {
        min-width: 30vw;
    }

    header {
        position: unset;
        top: unset;
    }

    nav:last-child {
        width: min-content;
    }

    main {
        margin-left: unset;
        margin-right: unset;
    }

    hgroup, article, article>div.highlight, blockquote, table {
        margin-left: .5em;
        margin-right: .5em;
    }

    ul {
        padding-left: 1em;
    }

    hgroup {
        border-bottom: dashed var(--deco) 10px;
        border-width: 50%;
    }
    
    footer {
        color: var(--fond);
        background-color: var(--primaire);
        border-top: unset;
    }

    footer a {
        color: var(--deco);
    }

    .pagination p {
        margin: 0em;
    }
    
    .pagination a {
        padding-left: 1.5em;
        padding-right: 1.5em;
        font-size: 1em;
    }

    .toc {
        visibility: hidden;
        height: 0em;
    }

    article {
        display: block;
        padding-right: unset;
    }
    
}