diff --git a/Makefile b/Makefile index 95889bb..16a3ac1 100644 --- a/Makefile +++ b/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=$@ $< diff --git a/source/bookmarklet.md b/source/bookmarklet.md index 6dc0aa0..ec64f5e 100644 --- a/source/bookmarklet.md +++ b/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 diff --git a/static/images/firefox-afficher-barre.png b/static/images/firefox-afficher-barre.png index 05807ec..6dbb2cb 100644 Binary files a/static/images/firefox-afficher-barre.png and b/static/images/firefox-afficher-barre.png differ diff --git a/static/style.css b/static/style.css index d8aac0c..6f4da53 100644 --- a/static/style.css +++ b/static/style.css @@ -1,265 +1,332 @@ +/* --- Règles pour pagedjs --- */ + @media print { - /* ************************** - * Définition des pages * - * ************************ */ +/* ************************** + * Définition des pages * + * ************************ */ - @page { - size: A4; - margin: 25mm; - bleed: 6mm; - /* Numérotation de page au centre en bas - * de la page. Le compteur est définit - * dans le selecteur body. */ - @bottom-center { - content: counter(page); - } + @page { + size: A4; + margin: 25mm; + bleed: 6mm; + /* Numérotation de page au centre en bas +* de la page. Le compteur est définit +* dans le selecteur body. */ + @bottom-center { + content: counter(page); } - @page:left { - margin-left: 25mm; - margin-right: 15mm; + } + @page:left { + margin-left: 25mm; + margin-right: 15mm; + } + @page:right { + margin-left: 15mm; + margin-right: 25mm; + } + @page:first { + /* Insertion en haut à droite du logo de la +* bibliothèque de l'UNIGE. */ + @top-right { + content: ""; + background-image: url("images/bibliotheque-logo.svg"); + background-position: right; + background-repeat: no-repeat; + background-size: 25%; } - @page:right { - margin-left: 15mm; - margin-right: 25mm; + /* Place le bloc de la licence en bas à gauche +* de la première page. Voir le sélecteur +* #licence plus bas. */ + @bottom-left{ + content: element(licenceBlock); + font-size: small; } - @page:first { - /* Insertion en haut à droite du logo de la - * bibliothèque de l'UNIGE. */ - @top-right { - content: ""; - background-image: url("images/bibliotheque-logo.svg"); - background-position: right; - background-repeat: no-repeat; - background-size: 25%; - } - /* Place le bloc de la licence en bas à gauche - * de la première page. Voir le sélecteur - * #licence plus bas. */ - @bottom-left{ - content: element(licenceBlock); - font-size: small; - } - @bottom-center { - content: none; - } - /* Insert la date en bas à droite de la - * première page. Voir le sélecteur .date */ - @bottom-right { - content: string(date); - font-size: small; - } + @bottom-center { + content: none; } + /* Insert la date en bas à droite de la +* première page. Voir le sélecteur .date */ + @bottom-right { + content: string(date); + font-size: small; + } + } - /* ************************** - * Définitions globales * - * ************************ */ +/* ************************** + * Définitions globales * + * ************************ */ - 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; - } - /* Définit que string(date) contient la date indiquée dans le frontmatter - * de la source markdown */ - .date { - string-set: date content(text); - display: none; /* Pour ne pas afficher la date sous le titre. */ - } - /* Définit que running(licenceBlock) contient le block licence. - * Le bloc licence est décrit dans le fichier markdown source, au-dessous - * de la section des objectifs. Le CSS permet de le placer correctement */ - #licence { - position: running(licenceBlock); - } + body { + /* Définit les trois variables de compteur nécessaires */ + /* font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif; */ + /* counter-reset: figureNumber toc tableNumber; */ + counter-reset: toc; + } - /* ***************** - * Page de titre * - * *************** */ + /* Définit que string(date) contient la date indiquée dans le frontmatter +* de la source markdown */ + .date { + string-set: date content(text); + display: none; /* Pour ne pas afficher la date sous le titre. */ + } + /* Définit que running(licenceBlock) contient le block licence. +* Le bloc licence est décrit dans le fichier markdown source, au-dessous +* de la section des objectifs. Le CSS permet de le placer correctement */ + #licence { + position: running(licenceBlock); + } - .logo { - display: inline-flex; - justify-content: center; - width: 60%; - margin: 2em auto 1em auto; - } - .logo img { - max-width: 25%; - padding: .5em; - } +/* ***************** + * Page de titre * + * *************** */ - #title-block-header { - /* Concerne le bloc titre sur la page de titre */ - text-align: center; - margin: 4em 0; - } + .logo { + display: inline-flex; + justify-content: center; + width: 60%; + margin: 2em auto 1em auto; + } + .logo img { + max-width: 25%; + padding: .5em; + } - .authors { - display: flex; - justify-content: center; - } - .author { - margin: 0; - padding: 0 1em; - } + #title-block-header { + /* Concerne le bloc titre sur la page de titre */ + text-align: center; + margin: 4em 0; + } - /* Les 4 règles suivantes mettent en forme la table des matières :* - * Suppression des liste à puce, numérotation des chapitres et affichage du - * numéro de page. */ - #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; - } + .authors { + display: flex; + justify-content: center; + } + .author { + margin: 0; + padding: 0 1em; + } - /* *************************** - * Structure du document * - * ************************* */ + /* Les 4 règles suivantes mettent en forme la table des matières :* +* Suppression des liste à puce, numérotation des chapitres et affichage du +* numéro de page. */ + #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; + } - /* Ajouter ou supprimer les ID de titre pour un saut de page. - * Les IDs #first-section et #bibliography peuvent être ajoutés - * dans la source markdown. */ - #first-section, - #bibliography, - .newpage, - .footnotes { - break-before: page; - } +/* *************************** + * Structure du document * + * ************************* */ - /* ************* - * Contenu * - * *********** */ - - h2 { - color: #d80669; - text-decoration: underline; - } - - pre { - background-color: #f2f1f1; - border: 2px solid #d80669; - border-radius: .5em; - padding: .5em 1em; - /* Évite que les blocs de code ne soient séparés sur 2 pages */ - break-inside: avoid; - } - pre > code { - border-radius: none; - padding: none; - } - code { - font-family: 'Lilex Nerd Font', 'Courier New', Courier, monospace; - font-size: 90%; - line-height: 1.4; - background-color: #f2f1f1; - padding: 2px; - border-radius: 5px; - } - - .footnotes::before { - content: "Notes"; - color: #d80669; - font-size: 120%; - font-weight: bold; - } - .footnote-ref { - text-decoration: none; - padding-left: 2px; - } - .footnote-back { - font-size: small; - text-decoration: none; - padding-left: .5em; - } - - figure { - display: flex; - flex-direction: column; - border: 2px solid #d80669; - border-radius: .5em; - padding: .5em; - /* Évite que les figures ne soient séparés sur 2 pages */ - break-inside: avoid; - } - figure img { - max-width: 85%; - margin: 0 auto; - max-height: 250px; - } - figcaption { - text-align: center; - font-size: 90%; - counter-increment: figureNumber; - padding-top: .5em; - } - figcaption::before { - content: "Figure " counter(figureNumber) " : "; - } - - .exercise, - .warning { - background-color: #f2f1f1; - width: 90%; - margin: 0 auto; - border: 2px solid #d80669; - border-radius: .5em; - padding: .5em; - display: flex; - align-items: center; - } - - .exercice > p, - .warning > p { - margin: 0; - padding-left: .5em; - } - - .exercice::before, - .warning::before { - content: "⚠️"; - font-size: larger; - } - - blockquote { - font-style: italic; - } - blockquote em { - font-style: normal; - } - - div.csl-entry { - padding: .5em; - } - - table { - width: 90%; - margin: 1em auto; - border-collapse: collapse; - } - - th, td { - padding: 5px; - border: 1px solid; - } - table > caption { - counter-increment: tableNumber; - caption-side: bottom; - font-size: small; - padding-top: .5em; - } - table > caption:before { - content: "Table " counter(tableNumber) " : "; - } +/* Ajouter ou supprimer les ID de titre pour un saut de page. +* Les IDs #first-section et #bibliography peuvent être ajoutés +* dans la source markdown. */ + #first-section, + #bibliography, + .newpage, + .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; +} + +pre { + background-color: #f2f1f1; + border: 2px solid #d80669; + border-radius: .5em; + padding: .5em 1em; + /* Évite que les blocs de code ne soient séparés sur 2 pages */ + break-inside: avoid; +} +pre > code { + border-radius: none; + padding: none; +} +code { + font-family: 'Lilex Nerd Font', 'Courier New', Courier, monospace; + font-size: 90%; + line-height: 1.4; + background-color: #f2f1f1; + padding: 2px; + border-radius: 5px; +} + +.footnotes::before { + content: "Notes"; + color: #d80669; + font-size: 120%; + font-weight: bold; +} +.footnote-ref { + text-decoration: none; + padding-left: 2px; +} +.footnote-back { + font-size: small; + text-decoration: none; + padding-left: .5em; +} + +@media screen { + figure { + max-width: max-content; + margin: 1em auto; + } +} + +figure { + display: flex; + flex-direction: column; + border: 2px solid #d80669; + border-radius: .5em; + padding: .5em; + /* Évite que les figures ne soient séparés sur 2 pages */ + break-inside: avoid; +} +figure img { + max-width: 85%; + margin: 0 auto; + max-height: 250px; +} +figcaption { + text-align: center; + font-size: 90%; + counter-increment: figureNumber; + padding-top: .5em; +} +figcaption::before { + content: "Figure " counter(figureNumber) " : "; +} + +.exercise, +.warning { + background-color: #f2f1f1; + width: 90%; + margin: 0 auto; + border: 2px solid #d80669; + border-radius: .5em; + padding: .5em; + display: flex; + align-items: center; +} + +.exercice > p, +.warning > p { + margin: 0; + padding-left: .5em; +} + +.exercice::before, +.warning::before { + content: "⚠️"; + font-size: larger; +} + +blockquote { + font-style: italic; +} +blockquote em { + font-style: normal; +} + +div.csl-entry { + padding: .5em; +} + +table { + width: 90%; + margin: 1em auto; + border-collapse: collapse; +} + +th, td { + padding: 5px; + border: 1px solid; +} +table > caption { + counter-increment: tableNumber; + caption-side: bottom; + font-size: small; + padding-top: .5em; +} +table > caption:before { + content: "Table " counter(tableNumber) " : "; +} + diff --git a/static/template.html b/static/template.html index 9b81653..0f82b8d 100644 --- a/static/template.html +++ b/static/template.html @@ -65,7 +65,7 @@ $endif$ $if(logo)$ $endif$