Commit 3a39e7e1 authored by alexandre's avatar alexandre

Les styles de base de HTML2print

parent a1171f32
/**
* 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;
margin: 0;
}
/**
* CANVAS
*/
@media all {
body {
margin: 0;
}
.paper {
width: @paper-width;
height: @paper-height;
box-sizing: border-box;
/* Crop marks */
padding: @crop;
counter-increment: page-counter;
/* utile ou non? pour éviter qu'un papier soit coupé par le format de la
* page lors de la conversion et l'arrondis des unités */
page-break-inside: avoid;
page-break-after: always;
overflow: hidden;
/* 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 @crop,
@crop top,
right @crop,
(@paper-width - @crop) top,
right (@paper-height - @crop),
(@paper-width - @crop) bottom,
left (@paper-height - @crop),
@crop bottom
;
background-repeat: no-repeat;
}
.page {
width: @page-width;
height: @page-height;
position: relative;
text-rendering: optimizeLegibility;
}
// 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 screen {
body {
background-color: #F0F0F0;
}
#pages {
width: @paper-width;
height: @paper-height;
margin-left: auto;
margin-right: auto;
}
.spread #pages {
width: @paper-width * 2;
height: @paper-height * 2;
}
.paper {
/* centrer la page à l'écran */
background-color: white;
margin-top: 1em;
margin-bottom: 1em;
}
.normal .paper {
//outline: 1px solid lightgray;
}
.normal .page {
outline: 1px dashed lightsalmon;
}
.preview .paper {
background: none;
}
.preview .page {
outline: 1px solid lightgray;
background-color: white;
}
.debug #story {
outline: 1pt solid green;
}
}
@media print {
html {
width: @paper-width;
}
body {
/* Allows printing of background colors */
background-color: white;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/**
* 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;
}
.debug .region-break {
border-top: 1pt dashed blue;
}
@import "setup.less";
@import "html2print.less";
/* the geometry of the page */
@page-width: 148mm;
@page-height: 210mm;
/* the size of the crop marks*/
@crop-size: 7mm;
/* the size of bleed */
@bleed: 5mm;
// FIXME: make a case for single page layouts
@page-margin-inside: 20mm;
@page-margin-outside: 10mm;
@page-margin-top: 10mm;
@page-margin-bottom: 15mm;
// Header & footer variables
@header-height: 10mm;
@header-text: " A Romance of Many Dimensions";
@footer-height: 10mm;
@footer-text: counter(page-counter);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment