Download raw (6.0 KB)

/**
 * Computation
 */
/* computes the edge size of the paper sheet, which is the sum of the bleed and
 * the crop sizes */

@edge: @crop-size + @bleed;

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


/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */
// TODO: find a more appropriate name
/*@crop: @crop-size + @bleed; 
*/
/* GEOMETRY OF THE PAPER SHEET */
/*@paper-width: @page-width + ( @crop * 2 );
@paper-height: @page-height + ( @crop * 2 );*/

/* SIZE OF SPREAD */
@spread: @page-width * 2;



/**
 * DEFINITION OF THE PAPER SHEET
 */
@page {
    size: @paper-width (@paper-height + 1); 
    margin: 0;
}


/**
 * CANVAS
 */

@media all {
    body {
        margin: 0;
    }
    .paper {
        width: @paper-width; 
        height: @paper-height;
        box-sizing: border-box;

        counter-increment: page-counter;

        // To make sure that one paper sheet is not splitted into different pages in the PDF
        page-break-inside: avoid;
        page-break-after: always;
        overflow: hidden;


 /* Crop marks */
        padding: @edge;
        position: relative;

        /* Crop marks */
        background-image:
            -webkit-linear-gradient(90deg, black 0, black 100%),
            -webkit-linear-gradient(0deg, black 0, black 100%),
            -webkit-linear-gradient(90deg, black 0, black 100%),
            -webkit-linear-gradient(0deg, black 0, black 100%),
            -webkit-linear-gradient(90deg, black 0, black 100%),
            -webkit-linear-gradient(0deg, black 0, black 100%),
            -webkit-linear-gradient(90deg, black 0, black 100%),
            -webkit-linear-gradient(0deg, black 0, black 100%)
        ;
        background-size:
            @crop-size 1px,
            1px @crop-size,
            @crop-size 1px,
            1px @crop-size,
            @crop-size 1px,
            1px @crop-size,
            @crop-size 1px,
            1px @crop-size
        ;
        background-position:
            left @edge,
            @edge top,
            right @edge,
            (@paper-width - @edge) top,
            right (@paper-height - @edge),
            (@paper-width - @edge) bottom,
            left (@paper-height - @edge),
            @edge bottom
        ;
        background-repeat: no-repeat;
    }


        /* Crop marks */
      /*  padding: @crop;
        position: relative;
        .crops {
            width: @paper-width; 
            height: @paper-height;
            position: absolute;
            top: 0;
            left: 0;

            div {
                border-style: solid;
                border-color: black;
                border-width: 0;
                width: @crop;
                height: @crop;
                position: absolute;
                box-sizing: border-box;

                span {
                    width: @bleed;
                    height: @bleed;
                    background-color: white;
                    position: absolute;
                }
            }
            .crop-top-left {
                border-right-width: 1px;
                border-bottom-width: 1px;
                top: 0;
                left: 0;

                span { right: -1px; bottom: -1px;}
            }
            .crop-top-right {
                border-left-width: 1px;
                border-bottom-width: 1px;
                top: 0;
                right: 0;

                span { left: -1px; bottom: -1px;}
            }
            .crop-bottom-right {
                border-left-width: 1px;
                border-top-width: 1px;
                right: 0;
                bottom: 0;

                span { left: -1px; top: -1px;}
            }
            .crop-bottom-left {
                border-right-width: 1px;
                border-top-width: 1px;
                left: 0;
                bottom: 0;

                span { right: -1px; top: -1px;}
            }*/
        
    }
    .page {
        width: @page-width;
        height: @page-height;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
    }

    // TODO: changer le format du papier en spread pour pouvoir imprimer en planche
/*    .spread {
        .paper {
            float: left;
        }
        .paper:nth-child(odd) {
            margin-left: -@crop;
        }
        .paper:nth-child(even) {
            margin-right: -@crop;
        }
        .paper:first-child {
            margin-left: @page-width;
        }
    }
    .facing.spread {
        .paper {
            float: left;
        }
        .paper:nth-child(even) {
            margin-left: -@crop;
        }
        .paper:nth-child(odd) {
            margin-right: -@crop;
        }
        .paper:first-child {
            margin-left: @page-width;
        }
    }
}*/

    .spread .sheet { float: left; }

    .spread:not(.facing) .sheet:nth-child(odd) { margin-left: -@edge; }
    .spread:not(.facing) .sheet:nth-child(even) { margin-right: -@edge; }
    .spread:not(.facing) .sheet:first-child { margin-left: @page-width; }

    .spread.facing .sheet:nth-child(even) { margin-right: initial; margin-left: -@edge; }
    .spread.facing .sheet:nth-child(odd) { margin-left: initial; margin-right: -@edge; }
    .spread.facing .sheet:first-child { margin-left: 0; }

@media print {
    html {
        width: @paper-width;
    }
    body {
        /* Allows printing of background colors */
        background-color: white;
        -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
        /* Activate opentype features and kernings */
        -webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
        text-rendering: optimizeLegibility;
    }
		
}



/**
 * Helpers
 */

.region-break {
    /* Apply this class to an element to put it on a new region.
     * Hint: 
     * You can also use an empty <div class="page-break"></div> 
     * if you want to put manual page breaks without attaching it to an HTML element
     */
    -webkit-region-break-before: always;
                   break-before: always;
}