Compare commits

..

No commits in common. "vanillahtml" and "main" have entirely different histories.

5 changed files with 241 additions and 309 deletions

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -1,332 +1,265 @@
/* --- Règles pour pagedjs --- */
@media print { @media print {
/* ************************** /* **************************
* Définition des pages * * Définition des pages *
* ************************ */ * ************************ */
@page { @page {
size: A4; size: A4;
margin: 25mm; margin: 25mm;
bleed: 6mm; bleed: 6mm;
/* Numérotation de page au centre en bas /* Numérotation de page au centre en bas
* de la page. Le compteur est définit * de la page. Le compteur est définit
* dans le selecteur body. */ * dans le selecteur body. */
@bottom-center { @bottom-center {
content: counter(page); content: counter(page);
}
} }
} @page:left {
@page:left { margin-left: 25mm;
margin-left: 25mm; margin-right: 15mm;
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%;
} }
/* Place le bloc de la licence en bas à gauche @page:right {
* de la première page. Voir le sélecteur margin-left: 15mm;
* #licence plus bas. */ margin-right: 25mm;
@bottom-left{
content: element(licenceBlock);
font-size: small;
} }
@bottom-center { @page:first {
content: none; /* 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;
}
} }
/* Insert la date en bas à droite de la
* première page. Voir le sélecteur .date */ /* **************************
@bottom-right { * Définitions globales *
content: string(date); * ************************ */
font-size: small;
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);
} }
}
/* ************************** /* *****************
* Définitions globales * * Page de titre *
* ************************ */ * *************** */
body { .logo {
/* Définit les trois variables de compteur nécessaires */ display: inline-flex;
/* font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif; */ justify-content: center;
/* counter-reset: figureNumber toc tableNumber; */ width: 60%;
counter-reset: toc; margin: 2em auto 1em auto;
} }
.logo img {
max-width: 25%;
padding: .5em;
}
/* Définit que string(date) contient la date indiquée dans le frontmatter #title-block-header {
* de la source markdown */ /* Concerne le bloc titre sur la page de titre */
.date { text-align: center;
string-set: date content(text); margin: 4em 0;
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);
}
/* ***************** .authors {
* Page de titre * display: flex;
* *************** */ justify-content: center;
}
.author {
margin: 0;
padding: 0 1em;
}
.logo { /* Les 4 règles suivantes mettent en forme la table des matières:*
display: inline-flex; * Suppression des liste à puce, numérotation des chapitres et affichage du
justify-content: center; * numéro de page. */
width: 60%; #TOC ul {
margin: 2em auto 1em auto; list-style: none;
} counter-reset: toc;
.logo img { padding-left: 1.5em;
max-width: 25%; }
padding: .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;
}
#title-block-header { /* ***************************
/* Concerne le bloc titre sur la page de titre */ * Structure du document *
text-align: center; * ************************* */
margin: 4em 0;
}
.authors { /* Ajouter ou supprimer les ID de titre pour un saut de page.
display: flex; * Les IDs #first-section et #bibliography peuvent être ajoutés
justify-content: center; * dans la source markdown. */
} #first-section,
.author { #bibliography,
margin: 0; .newpage,
padding: 0 1em; .footnotes {
} break-before: page;
}
/* Les 4 règles suivantes mettent en forme la table des matières:* /* *************
* Suppression des liste à puce, numérotation des chapitres et affichage du * Contenu *
* numéro de page. */ * *********** */
#TOC ul {
list-style: none; h2 {
counter-reset: toc; color: #d80669;
padding-left: 1.5em; text-decoration: underline;
} }
#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;
}
/* *************************** pre {
* Structure du document * 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;
}
/* Ajouter ou supprimer les ID de titre pour un saut de page. .footnotes::before {
* Les IDs #first-section et #bibliography peuvent être ajoutés content: "Notes";
* dans la source markdown. */ color: #d80669;
#first-section, font-size: 120%;
#bibliography, font-weight: bold;
.newpage, }
.footnotes { .footnote-ref {
break-before: page; text-decoration: none;
} padding-left: 2px;
} }
.footnote-back {
font-size: small;
text-decoration: none;
padding-left: .5em;
}
/* --- Règles par défaut --- */ 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,
* Contenu * .warning {
* *********** */ background-color: #f2f1f1;
width: 90%;
margin: 0 auto;
border: 2px solid #d80669;
border-radius: .5em;
padding: .5em;
display: flex;
align-items: center;
}
body { .exercice > p,
font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif; .warning > p {
counter-reset: figureNumber toc tableNumber; margin: 0;
} padding-left: .5em;
}
@media screen { .exercice::before,
body { .warning::before {
max-width: 960px; content: "⚠️";
margin: 0 auto; font-size: larger;
} }
}
/* ***************** blockquote {
* Page de titre * font-style: italic;
* *************** */ }
blockquote em {
font-style: normal;
}
.logo { div.csl-entry {
display: inline-flex; padding: .5em;
justify-content: center; }
width: 60%;
margin: 2em auto 1em auto;
}
.logo img {
max-width: 25%;
padding: .5em;
}
#TOC ul { table {
list-style: none; width: 90%;
counter-reset: toc; margin: 1em auto;
padding-left: 1.5em; border-collapse: collapse;
} }
#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 { th, td {
display: none; 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) " : ";
}
} }
#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) " : ";
}

View File

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