generated from igor/bunige-document
Compare commits
No commits in common. "vanillahtml" and "main" have entirely different histories.
vanillahtm
...
main
1
Makefile
1
Makefile
|
|
@ -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=$@ $<
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 |
541
static/style.css
541
static/style.css
|
|
@ -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;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ***************************
|
h2 {
|
||||||
* Structure du document *
|
color: #d80669;
|
||||||
* ************************* */
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
/* Ajouter ou supprimer les ID de titre pour un saut de page.
|
pre {
|
||||||
* Les IDs #first-section et #bibliography peuvent être ajoutés
|
background-color: #f2f1f1;
|
||||||
* dans la source markdown. */
|
border: 2px solid #d80669;
|
||||||
#first-section,
|
border-radius: .5em;
|
||||||
#bibliography,
|
padding: .5em 1em;
|
||||||
.newpage,
|
/* Évite que les blocs de code ne soient séparés sur 2 pages */
|
||||||
.footnotes {
|
break-inside: avoid;
|
||||||
break-before: page;
|
}
|
||||||
}
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
/* --- Règles par défaut --- */
|
.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 {
|
||||||
* Contenu *
|
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) " : ";
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
.exercise,
|
||||||
font-family: "Noto Sans", "Open Sans", Arial, Helvetica, sans-serif;
|
.warning {
|
||||||
counter-reset: figureNumber toc tableNumber;
|
background-color: #f2f1f1;
|
||||||
}
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 2px solid #d80669;
|
||||||
|
border-radius: .5em;
|
||||||
|
padding: .5em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen {
|
.exercice > p,
|
||||||
body {
|
.warning > p {
|
||||||
max-width: 960px;
|
margin: 0;
|
||||||
margin: 0 auto;
|
padding-left: .5em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* *****************
|
.exercice::before,
|
||||||
* Page de titre *
|
.warning::before {
|
||||||
* *************** */
|
content: "⚠️";
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
blockquote {
|
||||||
display: inline-flex;
|
font-style: italic;
|
||||||
justify-content: center;
|
}
|
||||||
width: 60%;
|
blockquote em {
|
||||||
margin: 2em auto 1em auto;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
.logo img {
|
|
||||||
max-width: 25%;
|
|
||||||
padding: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#TOC ul {
|
div.csl-entry {
|
||||||
list-style: none;
|
padding: .5em;
|
||||||
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 {
|
table {
|
||||||
display: none;
|
width: 90%;
|
||||||
}
|
margin: 1em auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
#title-block-header {
|
th, td {
|
||||||
/* Concerne le bloc titre sur la page de titre */
|
padding: 5px;
|
||||||
text-align: center;
|
border: 1px solid;
|
||||||
margin: 4em 0;
|
}
|
||||||
|
table > caption {
|
||||||
|
counter-increment: tableNumber;
|
||||||
|
caption-side: bottom;
|
||||||
|
font-size: small;
|
||||||
|
padding-top: .5em;
|
||||||
|
}
|
||||||
|
table > caption:before {
|
||||||
|
content: "Table " counter(tableNumber) " : ";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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)$
|
$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$
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue