Download raw (5.5 KB)

@import "variables.css";


/**
 * Computation
 */


:root {
    /* computes the edge size of the paper, which is the sum of the bleed and the
    * crop sizes */
    --edge: calc(var(--crop-size ) + var(--bleed));

    /* Computes the size of the paper sheet */
    --paper-width: calc(var(--page-width) + ( var(--edge) * 2 ));
    --paper-height: calc(var(--page-height) + ( var(--edge) * 2 ));
}

/**
 * DEFINITION OF THE PAPER SHEET
 */

/**
 * The @page CSS at-rule is used to define some properties of printed
 * documents. We make it the size of the elements with the .paper class and
 * remove any margins so they don't add up with margins specifed in elements
 * with the .page class (or it's children, like .header, .body and .footer)
 *
 * We add 2pt to circumvent a rounding number bug in some browsers that make
 * them include extra pages or shifts.
 */
@page {
    /* size: var(--paper-width) calc(var(--paper-height) + 2pt); */
    size: var(--paper-width) var(--paper-height);
    margin: 0;
}


/**
 * CANVAS
 */

@media all {
    body {
        margin: 0;

        /* Activate opentype features and kernings */
        -webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
        text-rendering: optimizeLegibility;
    }

    .paper {
        /* width: var(--paper-width); */
        /* height: var(--paper-height); */
        padding: var(--edge);
        /* float: left; */
        /* box-sizing: border-box; */

        /* defines a named counter and increments it every page, so we can use
         * it to compute the page number */
        counter-increment: folio;

        /* makes sure that pages aren't cut because of pootential unprecise unit
         * conversion at printing time */
        page-break-inside: avoid;
        page-break-after: always;

        /* clips the content if it goes out of the page, so it doesn't increase
         * the format */
        overflow: hidden;

        /* Crop marks */
        /* padding: var(--edge); */
        /* position: relative; */

        /* Crop marks */
        background-image:
            linear-gradient(to left, black 0, black 1px, transparent 1px),
            linear-gradient(to top, black 0, black 1px, transparent 1px),
            linear-gradient(to right, black 0, black 1px, transparent 1px),
            linear-gradient(to top, black 0, black 1px, transparent 1px),
            linear-gradient(to right, black 0, black 1px, transparent 1px),
            linear-gradient(to bottom, black 0, black 1px, transparent 1px),
            linear-gradient(to left, black 0, black 1px, transparent 1px),
            linear-gradient(to bottom, black 0, black 1px, transparent 1px)
        ;
        background-size:
            var(--edge) var(--crop-size),
            var(--crop-size) var(--edge),
            var(--edge) var(--crop-size),
            var(--crop-size) var(--edge),
            var(--edge) var(--crop-size),
            var(--crop-size) var(--edge),
            var(--edge) var(--crop-size),
            var(--crop-size) var(--edge)
        ;
        background-position:
            left top,
            left top,
            right top,
            right top,
            right bottom,
            right bottom,
            left bottom,
            left bottom
        ;
        background-repeat: no-repeat;
    }

    .page {
        /* defines the page size */
        width: var(--page-width);
        height: var(--page-height);

        /* allows for absolutely positioned elements as settings the position
         * property to relative as the side effect of making this elements
         * top-left corner the reference point */
        position: relative;
        /* position: absolute; */ /* FIXME: test it for printing issues */
    }

    /* TODO: changer le format du papier en spread pour pouvoir imprimer en planche */
    .spread .paper { float: left; }

    .spread:not(.facing) .paper:nth-child(odd)  { margin-left:  calc(-1 * var(--edge)); }
    .spread:not(.facing) .paper:nth-child(even) { margin-right: calc(-1 * var(--edge)); }
    .spread:not(.facing) .paper:first-child     { margin-left: var(--page-width); }

    .spread.facing .paper:nth-child(even)       { margin-right: initial; margin-left: calc(-1 * var(--edge)); }
    .spread.facing .paper:nth-child(odd)        { margin-left: initial; margin-right: calc(-1 * var(--edge)); }
    .spread.facing .paper:first-child           { margin-left: 0; }
}

@media screen {
    /* defines the background color of the workspace */
    /* UI */
    body { background-color: #F0F0F0; }

    #pages {
        width: var(--paper-width);
        height: var(--paper-height);

        margin-left: auto;
        margin-right: auto;
    }
    /* FIXME: allows for printing spreads as well */
    .spread #pages {
        width: calc(var(--paper-width) * 2);
        height: calc(var(--paper-height) * 2);
    }
    .paper {
        /* centrer la page à l'écran */
        /* UI */
        background-color: white;
        /* UI */
        margin-top: 1em;
        /* UI */
        margin-bottom: 1em;
    }
    /* UI */
    .normal .page { outline: 1px dotted lightsalmon; }
    /* UI */
    .preview .paper { background: transparent; }
    /* UI */
    .preview .page {
        outline: 1px solid lightgray;
        background-color: white;
        overflow: hidden;
    }
}


@media print {
    html { width: var(--paper-width); }
    body {
        /* Allows for background colors printing */
        background-color: transparent;
        -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
    }
}