generated from igor/bunige-document
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>vanillahtml
parent
0769fe466d
commit
6bdfe12218
GPG Key ID:
692D97C3D0228A99
1
Makefile
1
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=$@ $<
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 38 KiB |
561
static/style.css
561
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) " : ";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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$
|
||||
|
|
|
|||
Loading…
Reference in New Issue