global: génère du HTML non paginé

- Adapte le projet pour pouvoir construire des fichiers HTML
  indépendamment de l'interface pagedjs, par exemple pour pouvoir
  réutiliser le HTML dans d'autres contextes.
- Reprend la feuille de style pour trier entre les règles par défaut,
  les règles spécifiques à l'écran (HTML « normal ») et les règles pour
  l'impression (HTML « pagedjs »).
- Adapte le template et le frontmatter de la source pour ajouter un
  texte alternatif aux images.
- Corrige une image.

Co-Authored-by: iGor milhit <igor@milhit.ch>

Makefile

@@ -16,6 +16,7 @@ all: $(PDF_FILES)
 %.html: $(SOURCES_FOLDER)/%.md
 	pandoc \
 	--css=$(CSS_FILE) --template=$(HTML_TEMPLATE) \
+	--toc --toc-depth=2 \
 	--to=html --standalone \
 	--out=$@ $<
 

source/bookmarklet.md

@@ -5,7 +5,8 @@ date: Printemps 2026
 id: 20250808095505
 tags: ["OpenAthens", "navigateur web", "bookmarklet"]
 logo:
-  - ./static/images/logo-openathens.svg
+  - path: ./static/images/logo-openathens.svg
+    alt: "Logo d'OpenAthens."
 toc-title: Table des matières
 ---
 
@@ -14,7 +15,6 @@ toc-title: Table des matières
 [CC BY-SA 4.0][12] --- [Sources][13]
 :::
 
-
 ## Description
 
 Un *bookmarklet* est un signet (marqueur, favori ou *bookmark*) ajouté au

static/style.css

@@ -1,3 +1,5 @@
+/* --- Règles pour pagedjs --- */
+
 @media print {
 
 /* ************************** 
@@ -56,11 +58,12 @@
  * ************************ */
 
   body {
-        font-family: "Noto Sans", "Open Sans",
-                     Arial, Helvetica, sans-serif;
     /* Définit les trois variables de compteur nécessaires */
-        counter-reset: figureNumber toc tableNumber;
+    /* font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif; */
+    /* counter-reset: figureNumber toc tableNumber; */
+    counter-reset: toc;
   }
+
   /* Définit que string(date) contient la date indiquée dans le frontmatter
 * de la source markdown */
   .date {
@@ -137,11 +140,68 @@
   .footnotes {
     break-before: page;
   }
+}
+
+/* --- Règles par défaut --- */
 
 /* ************* 
  *   Contenu   *
  * *********** */
 
+body {
+  font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif;
+  counter-reset: figureNumber toc tableNumber;
+}
+
+@media screen {
+  body {
+    max-width: 960px;
+    margin: 0 auto;
+  }
+}
+
+/* ***************** 
+*   Page de titre *
+* *************** */
+
+.logo {
+  display: inline-flex;
+  justify-content: center;
+  width: 60%;
+  margin: 2em auto 1em auto;
+}
+.logo img {
+  max-width: 25%;
+  padding: .5em;
+}
+
+#TOC ul {
+  list-style: none;
+  counter-reset: toc;
+  padding-left: 1.5em;
+}
+#TOC li {
+  counter-increment: toc;
+}
+#TOC li::before {
+  content: counter(toc) ". ";
+}
+#TOC a::after {
+  content: target-counter(attr(href url), page);
+  position: absolute;
+  right: 0;
+}
+
+#licence {
+  display: none;
+}
+
+#title-block-header {
+  /* Concerne le bloc titre sur la page de titre */
+  text-align: center;
+  margin: 4em 0;
+}
+
 h2 {
   color: #d80669;
   text-decoration: underline;
@@ -184,6 +244,13 @@
   padding-left: .5em;
 }
 
+@media screen {
+  figure {
+    max-width: max-content;
+    margin: 1em auto;
+  }
+}
+
 figure {
   display: flex;
   flex-direction: column;
@@ -262,4 +329,4 @@
 table > caption:before {
   content: "Table " counter(tableNumber) " : ";
 }
-}
+

static/template.html

@@ -65,7 +65,7 @@ $endif$
 $if(logo)$
 <div class="logo">
 $for(logo)$
-<img src="$logo$" />
+<img src="$logo.path$" alt="$logo.alt$" />
 $endfor$
 </div>
 $endif$