251 lines
6.0 KiB
CSS
251 lines
6.0 KiB
CSS
@media print {
|
||
|
||
/* **************************
|
||
* 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: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("static/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;
|
||
}
|
||
}
|
||
|
||
/* **************************
|
||
* 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);
|
||
}
|
||
|
||
/* *****************
|
||
* Page de titre *
|
||
* *************** */
|
||
|
||
.logo {
|
||
display: inline-flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 60%;
|
||
margin: 2em auto 1em auto;
|
||
}
|
||
.logo img {
|
||
max-width: 50%;
|
||
padding: .5em;
|
||
}
|
||
|
||
#title-block-header {
|
||
/* Concerne le bloc titre sur la page de titre */
|
||
text-align: center;
|
||
margin: 4em 0;
|
||
}
|
||
|
||
.authors {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.author {
|
||
margin: 0;
|
||
padding: 0 1em;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* ***************************
|
||
* Structure du document *
|
||
* ************************* */
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* *************
|
||
* 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;
|
||
}
|
||
figcaption {
|
||
text-align: center;
|
||
font-size: 90%;
|
||
counter-increment: figureNumber;
|
||
padding-top: .5em;
|
||
}
|
||
figcaption::before {
|
||
content: "Figure " counter(figureNumber) " : ";
|
||
}
|
||
|
||
.exercise {
|
||
background-color: #f2f1f1;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
border: 2px solid #d80669;
|
||
border-radius: .5em;
|
||
padding: 0 .5em;
|
||
}
|
||
|
||
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) " : ";
|
||
}
|
||
}
|