table des matières (TOC)

static/css/bidouille.css

@@ -1,7 +1,9 @@
 /* Ceci est une feuille de style.
- * Elle est constituée de règles qui influenceront l'affichage de la page html.
+ *
+ * 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 la constitue seront dont les premières règles de la cascade.
+ * 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.
@@ -23,14 +25,14 @@
 */
 
 /* 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 {
-    --fond: #EEE;
-    --primaire: #222;
-    --liens: #fe1976;
-    --deco: #96D321;
-}
+ :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.
@@ -54,19 +56,19 @@
 
 /* Jeu de couleurs « Europe »
  * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
-:root {
-    --fond: white;
-    --primaire: #039;
+ :root {
+     --fond: white;
+     --primaire: #039;
     --liens: rgb(18, 116, 207);
     --deco: #FC0;
 }
 */
 
-
-
 /* Expériences
 */
 
+
+
 /* Pour « toute » la page.
 */
 html {
@@ -201,14 +203,7 @@ header a.current::first-letter{
 /* Contenu principal
 */
 main {
-    margin-left: 2em;
-    margin-right: 2em;
-}
-
-main a:hover {
-    text-decoration: underline;
-    text-decoration-color: var(--deco);
-    color: unset;
+    margin-left: 2em ;
 }
 
 .pagination {
@@ -254,12 +249,33 @@ hgroup a {
 
 /* 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;
@@ -271,37 +287,55 @@ article blockquote {
     margin: 1em;
 }
 
-/* tires coquets
+/* 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::after {
+article h2 a:after {
     content: " ··";
     color: var(--deco);
 }
 
-article h3::after {
+article h3 a:after {
     content: " ···";
     color: var(--deco);
 }
 
-article h4::after {
+article h4 a:after {
     content: " ··· ·";
     color: var(--deco);
 }
 
-article h5::after {
+article h5 a:after {
     content: " ··· ··";
     color: var(--deco);
 }
 
-article h6::after {
+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
 */
@@ -409,6 +443,55 @@ article p code {
     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 {
@@ -430,8 +513,7 @@ footer a:hover {
 /* Pour ne pas imprimer le menu.
 */
 @media print {   
-    header
-    {
+    header, .toc {
         display: none !important;
     }
 }
@@ -491,4 +573,15 @@ footer a:hover {
         padding-right: 1.5em;
         font-size: 1em;
     }
+
+    .toc {
+        visibility: hidden;
+        height: 0em;
+    }
+
+    article {
+        display: block;
+        padding-right: unset;
+    }
+    
 }