bunige-pagedjs-template/style.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: 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) " : ";
    }
}