Le CSS (Cascade Style Sheet) c'est ce qui permet d'avoir des jolis pages (je grossis un peu le trait mais vous avez pas besoin d'en savoir beaucoup plus).

La sobriété de cette explication se justifie par le fait que si vous vous y connaissez en informatique, vous savez ce que c'est, sinon, vous n'avez pas besoin d'en savoir plus que ça.

Euhhh c'est mieux d'avoir un CSS, sinon la page ressemblerait à ça, pas très agréable hein :).

Ah et aussi avant j'utilisais le CSS de readthedocs, qui est très joli, mais où est la fierté, l'originalité ?

J'ai commencé ma documentation via ce site, qui permet de réapprendre les bases de la mise en page.

Je veux un CSS minimaliste qui laisse place au texte plutôt qu'à l'esthétisme du site, donc juste assez pour ne pas être dérangé par la mocheté du site.

C'est pourquoi j'opte pour un thème clair simple, avec un fond gris clair et un texte gris foncé. Pour la couleur d'accentuation, elle changera sûrement, mais je vais partir sur un cyan pastel.

De là, je débute mon fichier style.css de manière assez basique, juste ce qu'il faut pour un site un peu plus propre, je prends pour exemple cette page afin d'expérimenter avec mon fichier

j'essaie des trucs (petit brouillon perso :p (pas très pro ce blog))

print("J'essaie encore des trucs")
for i in range(0,5)
    print i

Si vous regardez le CSS issu de cette page, vous remarquerez peut-être une balise content, c'est la balise utilisée pour le conteneur principal du org-mode, car j'écris le HTML via Emacs ;).

Aussi, je m'inspire beaucoup de CSS trouvés en ligne, notamment du post de niklasfasching parlant à peu près de ce que je veux faire

Je parle bien sûr de ce qui est cool pour mon cas, ce que je dis ne s'applique pas à tous les usages du CSS

• prenez pas des couleurs flashy, même pour les liens
• laissez de l'espace et des marges entre tout, aérez bien votre contenu
• centrez le texte et faites pas des grosses lignes (c'est intéressant de limiter les lignes à 70 caractères)

Voici mon fichier style.css actuel, il est sujet à des changements, j'ai fait ça en une soirée :)

* {
    box-sizing: border-box;

}

#content {
    max-width: 70ch; /*Je limite ma ligne à en gros 70 caractères*/
    /*sinon c'est un peu compliqué à lire */
    margin: 4rem auto;
    padding: 0 2rem;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    color: #3A3532;
    background-color: #F8EEEC; /* Je trouverai jamais la couleur de*/
    /* fond parfaite */
    line-height: 1.6;
}

h1, h2, h3, h4 {
    margin: 3rem 0 1.2rem 0;
    color: #2D2926; /* J'hésite un peu entre les titres plus clairs*/
    /* que le texte et l'inverse */
    line-height: 1.2;
    font-weight: 700;

}

p {
    margin-bottom: 1.5rem;
}

pre.src {
    font-family: "Iosevka Nerd Font", monospace;
    background-color: #F0E4E2;
    padding: 1.2rem;
    border-radius: 8px;
    overflow-x: auto;
    max-height: 500px;
    border: 1px solid rgba(0,0,0,0.05);
}

code {
    font-family: "Iosevka Nerd Font", monospace;
    background-color: #F0E4E2;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

a {
    color: #9D4D3F;
    text-decoration:none ;
    transition: color 0.2s ease;
}

a:hover {
    color: #B08968;
    border-bottom: none;
}

Si vous ne l'aviez pas déjà remarqué, j'utilise Emacs, il est donc obligatoire pour moi d'utiliser ce logiciel à 100% de ses capacités, c'est pourquoi je vais créer un setupfile, me permettant d'invoquer mon fichier style.css via la balise #+SETUPFILE

Pour ce faire, je vais devoir créer un fichier style.setup

OPTIONS: html-style:nil num:nil toc:t
HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css" />

Et… c'est tout, il ne me reste plus qu'à insérer la balise du SETUPFILE:

#+SETUPFILE: style.setup

au début de chacun de mes fichiers. Bien heureusement, c'est automatisable via yasnippet

Pour ce faire, il suffit d'entrer la commande C-c & C-n (un jeu d'enfant) suite à quoi le fichier template sera généré automatiquement et il sera plutôt simple de l'éditer pour créer sa macro

# -*- mode: snippet -*-
# name: stf
# key: stf
# --

#+SETUPFILE: style.setup

Maintenant, il suffit d'écrire stf puis faire <TAB> afin d'insérer mon SETUPFILE au début de mon fichier.