163 lines
3.7 KiB
SCSS
163 lines
3.7 KiB
SCSS
/**
|
|
* Computation
|
|
*/
|
|
|
|
|
|
/* 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: $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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|