README.md

@@ -1,248 +1,7 @@
 # Bidouille
 
-Un thème didactique pour Pelican. Il se repose sur le thème `simple` pour les fichier `.html` qui manqueraient.
+Un thème didactique pour Pelican.
 
-Le contenu de ce README et petit à petit déplacé sur [le site dédié à ce thème](https://bidouille.computhings.be).
+Il se repose sur le thème `simple` pour les fichier `.html` qui manqueraient.
 
-## Particularités du thème
+… la suite un de ces jours.
-
-### Page d'accueil
-
-Dans le dossier `pages`, il faut une page avec le paramètre `save_as: index.html` qui deviendra la home page. 
-
-Pour qu'elle soit aussi première entrée du menu principal, il faut qu'elle apparaîsse la première dans l'ordre alphabètique  du dossier `content/pages/`. Pare exemple en y ajoutant un `a. la page.md` ou `1lapage.md` ou `accueil.md`…
-
-### html meta description
-
-Se base sur les éléments `subtitle` et `description` des articles et des pages.
-
-```
----
-Title: Ma page ou mon article
-Subtitle: Un sous titre qui l'accompagne.
-Description: Une description qui la résume succinctement.
-Date: 1970-01-01
----
-Bla bla bla…
-```
-- Pour les articles, ces deux éléments sont repris sur les pages qui listent les articles d'une catégorie données.
-- Pour les pages, ces deux éléments ne sont pas visibles mais sont tout de même utilisés dans le `meta`.
-
-## ForkAwsome
-
-
-- [pour télécharger l'archive](https://forkaweso.me/Fork-Awesome/get-started/)
-- [pour la liste des icones](https://forkaweso.me/Fork-Awesome/icons/)
-
-Depuis l'archive téléchargée,
-
-- copier `fork-awesome.css` dans `/themes/nom-du-theme/static/css/`
-- copier le dossier `fonts` dans `/themes/nom-du-theme/static/`
-
-Dans le template `base.html`, appeler le `fork-awesome.css`.
-
-Les classes du genre `class=fa fa-gnu` sont alors disponibles pour les éléments devant afficher un de ces icones. Par exemple avec `<i class="fa fa-download"></i>`, soit dans les fichiers markdown soit dans les templates html.
-
-Seuls deux fichiers de ForkAwsome sont nécessaires. Je n'ai pas envie de prendre tout leur contenu dans le thème.
-
-Il faudra parfois les mettre à jours.
-
-Une autre piste qui nécessite d'utiliser `git`, c'est de l'inclure en tant que module, mais c'est encore plus technique.
-
-
-## CSS
-
-### Daisy (à approfondir)
-
-daisy : https://contrib.spip.net/Ordre-d-appel-des-feuilles-de-style ?
-
-reset.css : https://meyerweb.com/eric/tools/css/reset/ … essayé mais viré. 
-
-En utilisant le `reset.css` … le contenu des articles avec du gras ou de l'italique n'avait pas de balise html comme `strong` ou `em` et je n'ai pas compris pourquoi.  Rien qu'un supprimant le chargement de `reset.css` de l'entête html, les balises sont réaparues.
-
-### coloration syntaxique
-
-Pour utiliser la **coloration syntaxique** disponible par défaut dans python/pelican, cela dépend du thème utilisé et des CSS qui l'accompagnent.
-
-Cela fonctionne avec un thème *par défaut* comme `notmyidea` parce que ce thème inclut des fichiers CSS comme…
-
-```bash
-/theme/css/main.css
-/theme/css/reset.css
-/theme/css/pygment.css
-/theme/css/typogrify.css
-/theme/css/fonts.css
-```
-
-Mais si, par exemple il fallait générer un nouveau CSS contenant de quoi faire de la coloration syntaxique, ceci peut aider…
-
-```bash
-pygmentize -S default -f html -a .codehilite > styles.css
-pygmentize -L style
-```
-The first command creates a CSS file styles.css with default style. The -f html option specifies the formatter and -a .codehilite option specifies a class in the styles.css file. The second command lists all the styles that comes with Pygments package. 
-
-Comme expliqué [sur cette page](https://georgexyz.com/code-highlight-in-pelican.html)
-
-### Utile pour affiner la sélection d'éléments
-
-Par exemple pour les images, c'est utilisé dans le thème.
-
-- [Sélecteus d'attribut](https://developer.mozilla.org/fr/docs/Web/CSS/Attribute_selectors)
-- [CSS Selector Reference](https://www.w3schools.com/cssref/css_selectors.php)
-
-### Mix de Couleurs / transparent
-
-- [How do I apply opacity to a CSS color variable?](https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable) = `color-mix`, mais c'est nouveau.
-
-## menu hamburger
-
-Pas utilisé dans le thème, mais au cas où … 
-
-- https://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events 
-- https://developer.mozilla.org/fr/docs/Web/CSS/:target
-
-
-## recherche
-
-Pas prévu pour le moment dans le thème.
-
-Je suppose qu'un plugin s'imposera… mais est-ce vraiment nécessaire ?
-
-
-## feeds, rss, atoms, etc.
-
-Actuellement c'est un peu broullion mais un icône RSS apparaîtra dans le menu `social` pour les pages *catégories* et les *articles*.
-
-À cogiter, voir dans [la doc de pelican](https://docs.getpelican.com/en/latest/themes.html#feeds).
-
-
-## Open Graphs
-
-À cogiter aussi, voir [the opengraph protocol](https://ogp.me/).
-
-Ou un peu dans [la doc de pelican](https://docs.getpelican.com/en/latest/themes.html#article-html) à propos des artictles.
-
-## Traductions
-
-Actuellement c'est pour un site en français.
-
-Peut-être plus tard…
-
-## Pour les auteur·ice·s
-
-Pas encore fait.
-
-Pour que le(s) auteur·ice·s puissent disposer d'une page personnel, en créant `content/author/xxx.md`, cela ajoutera le contenu à la liste des articles de cette personne **sans** que cette catégorie `author` n'apparaisse dans le menu principal.
-
-
-## D'autres polices ?
-
-- https://fontlibrary.org/en/catalogue
-  - https://fontlibrary.org/en/font/tuffy
-  - https://fontlibrary.org/en/font/dark-garden
-  - https://fontlibrary.org/en/font/ballpoint-pen
-  - https://fontlibrary.org/en/font/artaxerxes
-- Iosevka,PragmataPro,Noto Sans Mono Condensed,Consolas,monospace ?
-
-
-## Table of content
-
-- [Add a Table of Contents using Markdown in Pelican](https://cloudbytes.dev/snippets/add-a-table-of-contents-using-markdown-in-pelican). 
-- [Python Markdown - Table of Content](https://python-markdown.github.io/extensions/toc/)
-- [Pour en faire une variable utilisable dans les templates](https://github.com/getpelican-plugins/extract_toc) *à essayer un jour*.
-
-Ajouter au `pelicanconf.py`
-
-```python
-MARKDOWN = {
-    "extension_configs": {
-        # Needed for code syntax highlighting
-        "markdown.extensions.codehilite": {"css_class": "highlight"},
-        "markdown.extensions.extra": {},
-        "markdown.extensions.meta": {},
-        # This is for enabling the TOC generation
-        "markdown.extensions.toc": {"title": ""},
-    },
-    "output_format": "html5",
-}
-```
-
-Ajouter dans les articles où il faut une TOC : `[TOC]`.
-
-Un début de custom css…
-
-```css
-/* Expériences
-*/
-
-article {
-    display: grid;
-    grid-column-start: 1;
-    grid-column-end: 3;
-}
-
-article * {
-    grid-column: 1;
-}
-
-.toc {
-    /* Pour la table des matières d'un article (ou d'une page).
-    */
-    grid-column: 3;
-    position: -webkit-sticky;
-    position: sticky;
-    top: 4em;
-    padding: 0em 1.5em;
-    background-color: var(--primaire);
-    float: right;
-    margin-left: 1em;
-}
-
-.toc ul {
-    padding-left: .5em;
-}
-
-.toc li::marker {
-    color: var(--deco);
-    content: unset;
-}
-
-.toc a {
-    color: var(--fond);
-}
-
-```
-
-
-## Mais qu'est-ce que je veux vraiment ?
-
-- [x] Que le site soit « responsive ».
-  - [x] qu'il soit fonctionnel sur grands écrans avec un affichage **adaptable** en fonction de la résolution.
-  - [x] que les pages / articles soient imprimable SANS les menus.
-  - [x] qu'il soit fonctionnel sur bidulephone
-  - [ ] qu'une page « fcktmrtphn » apparaîsse à la place ou en plus ?
-- [x] Que les images soient le plus simple à ajouter, soit avec la balise `img` soit avec d'autres mécanismes plus simple associés au Markdown
-- [x] Qu'il y ait un `favicon`
-- [ ] Qu'il y ait une page `auteurs` même si il n'y en a qu'un seul, et donc prévoir qu'il y en ait plusieurs *(mais c'est pas pour moi)*.
-- [x] Que la structure du `output` reflète le plus possible la structure du `content`.
-- [ ] Une [404](https://docs.getpelican.com/en/latest/tips.html#custom-404-pages)
-- [x] Une table des matières pour les longs articles *(en tout cas, pas quand il n'y a qu'un ou deux « sous titres »)*
-- [x] Des ancres pour la TOC mais aussi pour avoir de quoi pointer vers un sous titre et pas toute la page pour partager un lien vers un sous titre de la page.
-- [x] Qu'il y ait un menu de pagination fonctionnel.
-
-## Qu'est-ce que je devrais encore explorer ?
-
-- [ ] Que je me décide à propos des `catégories` et des `tags` *(mots-clés)*.
-- [ ] La notion des `archives`.
-- [ ] La notion de `drafts` et/ou de `hidden` *(par exemple pourquoi c'est dans le `output` si c'est des brouillons ou du contenu caché)* ?
-- [ ] Le multilinguisme comme dans le fichier `translations.html` du theme simple.
-
-## À l'occasion j'aimerais aussi…
-
-- [ ] les cases à cocher en markdown/html
-- [ ] les bulles d'info comme danc HedgeDoc `:::info` en markdown/html
-- [ ] pouvoir basculer en clair/sombre automatiquement (ou à la demande). S'informer sur la balise html `<meta name="color-scheme" content="dark light" />
-` [ici](https://developer.mozilla.org/fr/docs/Web/HTML/Element/meta).
-- [ ] dans le cas d'un thème sombre il faut d'autre `highlight` pour le `code` parce que `highlight.css` est pour un thème clair.
-- [ ] que les mises à jours du thème s'intègrent automatiquement au deux sites sur lesquels je l'utilise et donc … explorer `pelican-themes`.

static/css/latest.css

@@ -1,9 +1,7 @@
 /* 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 sont décrites dans le fichier actuel sont donc les premières règles de la cascade CSS.
+ * Les règles qui la constitue seront dont les premières règles de la cascade.
  * CSS voulant dire en anglais Cascading Style Sheet(s), ou Feuilles de Style en Cascade.
  *
  * Ah oui ! Ceci est un commentaire.
@@ -13,24 +11,20 @@
  *
  * 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 
+ * 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.
+ * Si tous les Jeux de coudeurs 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.
+ * Mais le menu sera moche en 
- *
- * 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.
+ * Celui-ci n'étant pas commenté, c'est le jeu de base utilisé pour le site.
-*/
+ */
 :root {
     --fond: #EEE;
     --primaire: #222;
@@ -38,31 +32,41 @@
     --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 »
  * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
- :root {
+:root {
-     --fond: white;
+    --fond: black;
-     --primaire: black;
+    --primaire: white;
-     --liens: gold;
+    --liens: gold;
-     --deco: red;
+    --deco: red;
-    }
+}
-    */
+*/
 
 /* Jeu de couleurs « Europe »
  * Commentez les autres jeux de couleur sauf celui-ci pour l'utiliser.
- :root {
+:root {
-     --fond: white;
+    --fond: white;
-     --primaire: #039;
+    --primaire: #039;
-     --liens: rgb(18, 116, 207);
+    --liens: rgb(18, 116, 207);
-     --deco: #FC0;
+    --deco: #FC0;
-    }
+}
 */
 
+
+
 /* Expériences
 */
 
-
-
 /* Pour « toute » la page.
 */
 html {
@@ -183,13 +187,6 @@ header a.current::first-letter{
     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);
 }
@@ -197,7 +194,14 @@ header a.current::first-letter{
 /* Contenu principal
 */
 main {
-    margin-left: 2em ;
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+main a:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--deco);
+    color: unset;
 }
 
 .pagination {
@@ -229,10 +233,7 @@ 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);
 }
@@ -243,33 +244,12 @@ 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;
@@ -281,55 +261,37 @@ article blockquote {
     margin: 1em;
 }
 
-/* Perma-liens sur les titres et sous-tittres, sous forme de points médians colorés.
+/* tires coquets
- * 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 {
+article h2::after {
     content: " ··";
     color: var(--deco);
 }
 
-article h3 a:after {
+article h3::after {
     content: " ···";
     color: var(--deco);
 }
 
-article h4 a:after {
+article h4::after {
     content: " ··· ·";
     color: var(--deco);
 }
 
-article h5 a:after {
+article h5::after {
     content: " ··· ··";
     color: var(--deco);
 }
 
-article h6 a:after {
+article h6::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
 */
@@ -389,6 +351,7 @@ th {
 
 tr:nth-child(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));
 }
@@ -396,17 +359,14 @@ tr:nth-child(even) {
 /* Coloration du code (highlight)
  * voir aussi le fichier highlight.css
 */
-code:not(div.highlight code) {
+article p 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));
+    background-color: var(--primaire);
-    border: solid var(--deco);
+    color: var(--fond);
-    border-width: .1em;
+    padding: .3em;
-    border-radius: .3em;
-    padding: .2em .4em;
-    font-weight: bold;
 }
 
 
@@ -439,55 +399,6 @@ code:not(div.highlight 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 {
@@ -509,7 +420,8 @@ footer a:hover {
 /* Pour ne pas imprimer le menu.
 */
 @media print {   
-    header, .toc {
+    header
+    {
         display: none !important;
     }
 }
@@ -569,15 +481,4 @@ footer a:hover {
         padding-right: 1.5em;
         font-size: 1em;
     }
-
-    .toc {
-        visibility: hidden;
-        height: 0em;
-    }
-
-    article {
-        display: block;
-        padding-right: unset;
-    }
-    
 }

templates/base.html

@@ -33,7 +33,7 @@
   {% endif %}
   <link rel="stylesheet" href="{% if SITEURL %}{{ SITEURL }}{% endif %}/theme/css/fork-awesome.css">
   <link rel="stylesheet" href="{% if SITEURL %}{{ SITEURL }}{% endif %}/theme/css/highlight.css">
-  <link rel="stylesheet" href="{% if SITEURL %}{{ SITEURL }}{% endif %}/theme/css/bidouille.css">
+  <link rel="stylesheet" href="{% if SITEURL %}{{ SITEURL }}{% endif %}/theme/css/latest.css">
   <link rel="icon" type="image/png" href="{% if SITEURL %}{{ SITEURL }}{% endif %}/theme/img/favicon.png" />
 {%- endblock head %}
 </head>
@@ -67,17 +67,11 @@
     {% endif %}
     {% endif %}
   </nav>
+  {% if SOCIAL %}
   <nav class="social">
-    {% if SOCIAL_WITH_FA %}
+    {% for text, link, icon in SOCIAL %}
-    {% for text, link, icon in SOCIAL_WITH_FA %}
     <a href="{{ link }}" title="{{ text }}"><i class="fa {{ icon }}"></i></a>
     {% endfor %}
-    {% endif %}
-    {% if SOCIAL %}
-    {% for text, link in SOCIAL %}
-    <a href="{{ link }}" title="{{ text }}">{{ text }}</i></a>
-    {% endfor %}
-    {% endif %}
     {% if CATEGORY_FEED_ATOM and category %}
     <a href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}{% endif %}" title="Flux pour {{ category }}" target="_blank"><i class="fa fa-rss"></i></a>
     {% endif %}
@@ -85,6 +79,7 @@
     <a href="{{ FEED_DOMAIN }}/{% if TAG_FEED_ATOM_URL %}{{ TAG_FEED_ATOM_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_ATOM.format(slug=tag.slug) }}{% endif %}" type="application/atom+xml" title="Flux pour {{ tag }}" target="_blank"><i class="fa fa-rss"></i></a>
     {% endif %}
   </nav>
+  {% endif %}
   {% endblock %}
 </header>
 

templates/listing.html

@@ -2,9 +2,9 @@
 {% block content %}
 {% for article in articles_page.object_list %}
   <article>
-    <h2>
+    <h1>
       {{ article.title }}
-    </h2>
+    </h1>
     <p>
       {{ article.subtitle }}<br/>
       {{ article.description }} <br/>
@@ -23,20 +23,20 @@
 <nav class="pagination">
   <a href="{{ SITEURL }}/{{ first_page.url }}" 
     {%- if articles_page.has_previous() %}
-    {%- else %} class="hidden"{% endif %}>
+    {%- else %}class="hidden"{% endif %}>
     <i class="fa fa-angle-double-left"></i></a>
   <a href="{{ SITEURL }}/{{ articles_previous_page.url }}"
     {%- if articles_page.has_previous() %}
-    {%- else %} class="hidden"{% endif %}>
+    {%- else %}class="hidden"{% endif %}>
     <i class="fa fa-angle-left"></i></a>
   <p><strong>{{ category }}{{ tag }}</strong> | {{ articles_page.number }} de {{ articles_paginator.num_pages }}</p>
   <a href="{{ SITEURL }}/{{ articles_next_page.url }}"
   {%- if articles_page.has_next() %}
-  {%- else %} class="hidden"{% endif %}>
+  {%- else %}class="hidden"{% endif %}>
   <i class="fa fa-angle-right"></i></a>
   <a href="{{ SITEURL }}/{{ last_page.url }}"
   {%- if articles_page.has_next() %}
-  {%- else %} class="hidden"{% endif %}>
+  {%- else %}class="hidden"{% endif %}>
   <i class="fa fa-angle-double-right"></i></a>
 </nav>
 {% endif %}

templates/page.html

@@ -8,20 +8,6 @@
 
 {% block content %}
 <article>
-{% if DISPLAY_PAGE_HEADER %}
-<hgroup>
-  <h1>
-    {{ page.title }}
-  </h1>
-  <p>
-    {% if page.modified %}
-    Modifié le <time datetime="{{ page.modified.isoformat() }}">{{ page.modified|strftime('%A %d %B %Y') }}</time>
-    {% else %}
-    Publié le <time datetime="{{ page.date.isoformat() }}">{{ page.date|strftime('%A %d %B %Y') }}</time>
-    {% endif %}
-  </p>
-</hgroup>
-{% endif %}
   {{ page.content }}
 </article>
 {% endblock %}