Download raw (8.6 KB)
/* __________________________________ LOCAL SETTINGS __________________________________ */
@page-height: 200mm;
@page-width: 170mm;
@spread: @page-width*2;
@crop-length: 7mm;
@crop-offset: 5mm;
@crop: @crop-length + @crop-offset; // Based on Scribus cropmarks with 5mm of bleed -> 7mm of marks + 5mm of offset
@page-width-crop: @page-width + (@crop*2);
@page-height-crop: @page-height + (@crop*2);
@page-margin-inside: 20mm;
@page-margin-outside: 20mm;
@page-margin-top: 10mm;
@page-margin-bottom: 15mm;
@header-height: 10mm;
@header-text: "f-u-t-u-r-e.org";
@footer-height: 10mm;
@footer-text: counter(page-counter);
/* __________________________________ DEBUG __________________________________ */
.debug {
/*outline: 1pt solid purple;*/
.page {
outline: 1pt solid blue;
}
.header {
outline: 1pt solid pink;
}
.main-section {
outline: 1pt solid cyan;
}
.footer {
outline: 1pt solid pink;
}
.middle {
/*outline: 1pt solid red;*/
}
.region-break {
border-top: 1pt dashed blue;
}
.moveable {
outline: 1pt solid yellow;
}
}
/* __________________________________ INTERFACE CLASSES __________________________________ */
@media print {
#print-interface {
display: none;
}
}
nav,
.screen-only {
display: none;
}
#print-interface button {
z-index: 1000;
background-color: black;
font-family:sans-serif;
text-transform: uppercase;
font-size: 9pt !important;
letter-spacing: 1pt;
color: white;
margin: 0;
padding: 5pt 7pt;
cursor: pointer;
border: 0;
&:hover {
background-color: white;
color: black;
outline: 1pt solid black;
}
}
#print-interface .button-active {
background-color: white;
color: black;
outline: 1pt solid black;
}
.lo-res {
outline: 10px solid red;
}
div#print-interface {
font-family:sans-serif;
text-transform: uppercase;
font-size: 9pt !important;
line-height: 14pt;
letter-spacing: 1pt;
position: fixed;
bottom: 10pt;
right: 10pt;
z-index: 20000;
a {
text-decoration: none;
position: static;
}
div.dropdown {
display: inline-block;
position: relative;
ul {
padding: 0.5em 0;
display: none;
background-color: black;
position: absolute;
right: 0;
bottom: 2em;
height: 200pt;
width: 80pt;
overflow: auto;
a {
padding: 0 1em;
color: white;
display: block;
&:hover {
background-color: white;
color: black;
}
}
}
button {
width: 80pt;
}
}
}
/* __________________________________ ABSOLUTE POSITIONNED OBJECTS __________________________________ */
/* Adding .moveable class to an object makes it absolutely positionned on the page.
* You can then move it around and resize it.
* Copy its properties (i.e. "top: 22px; left: 101px; width: 212px; height: 244px;).
* Paste those properties back to the object's "style" attribute.
*/
.inside {
position: relative;
height: @page-height;
}
.moveable {
position: absolute;
overflow: hidden;
z-index: -1010 !important;
&.foreground {
z-index: 1000 !important;
}
figure {
width: 100%;
height: 100%;
}
}
.moveable .properties {
display: none;
position: absolute;
bottom: 0.5em;
right: 0.5em;
text-transform: none;
height: 2em;
}
.moveable:hover .properties {
display: block;
}
/* __________________________________ PAGE SETTINGS __________________________________ */
* {
-webkit-print-color-adjust: exact; /* Allows printing of background colors */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
-moz-font-feature-settings: "liga", "dlig", "clig", "kern";
font-feature-settings: "liga", "dlig", "clig", "kern";
}
@page {
//size: @page-width @page-height; // format coupé
size: @page-width-crop @page-height-crop; // format avec cropmarks
margin: 0;
orphans: 2;
widows: 2;
}
html.spread {
.page {
outline: 1px solid black;
float: left;
&:nth-child(odd) {
margin-left: -@crop * 2;
left: 1px;
}
}
#page-1 {
margin-left: @page-width !important;
}
}
html {
width: @page-width-crop;
position: absolute;
}
body {
position: absolute;
width: 100%;
}
html,
body,
.wrap,
.middle {
margin: 0;
padding: 0;
}
/* __________________________________ PRINT MARKS __________________________________ */
div.print-marks {
position: absolute;
top: 0;
z-index: -1000;
width: @page-width-crop;
height: @page-height-crop;
}
#master-page,
.page {
width: @page-width-crop;
height: @page-height-crop;
position: relative;
z-index: -10;
outline-offset: -@crop;
counter-increment: page-counter;
page-break-inside: avoid;
page-break-after: always;
overflow: visible;
&:nth-child(odd) .header {
text-align: right;
}
&:nth-child(odd) .header,
&:nth-child(odd) .main-section,
&:nth-child(odd) .footer {
padding-left: @page-margin-inside;
padding-right: @page-margin-outside;
}
&:nth-child(even) .header,
&:nth-child(even) .main-section,
&:nth-child(even) .footer {
padding-left: @page-margin-outside;
padding-right: @page-margin-inside;
}
}
/* __________________________________ CROP MARKS __________________________________ */
div.crop-top-left,
div.crop-top-right,
div.crop-bottom-right,
div.crop-bottom-left {
height: @crop;
width: @crop;
position: absolute;
}
div.crop-top-left {
left: 0;
top: 0;
}
div.crop-top-right {
right: 0;
top: 0;
}
div.crop-bottom-right {
right: 0;
bottom: 0;
}
div.crop-bottom-left {
left: 0;
bottom: 0;
}
div.crop-top,
div.crop-right,
div.crop-bottom,
div.crop-left {
width: @crop-length;
height: @crop-length;
position: absolute;
}
div.crop-top {
border-top: 1pt solid black;
}
div.crop-right {
border-right: 1pt solid black;
}
div.crop-bottom {
border-bottom: 1pt solid black;
}
div.crop-left {
border-left: 1pt solid black;
}
/* __________________________________ HEADER __________________________________ */
section.header {
position: absolute;
top: @crop;
left: @crop;
right: @crop;
padding-top: @page-margin-top;
height: @header-height;
text-align: left;
&:after {
content: @header-text;
}
}
/* __________________________________ MAIN SECTION __________________________________ */
section.main-section {
padding-top: @header-height;
padding-bottom: @footer-height;
page-break-inside: avoid;
page-break-before: always;
top: @crop;
left: @crop;
right: @crop;
bottom: @crop;
position: absolute;
}
div.column {
-webkit-flow-from: myFlow;
-adobe-flow-from: myFlow;
height: 100%;
float: left;
width: 100%;
}
div.column + div.column {
padding-left: 1em;
}
#content,
div.footnote {
-webkit-flow-into: myFlow;
-adobe-flow-into: myFlow;
width: 100%;
}
.include #content,
.include div.footnote {
-webkit-flow-into: none;
-adobe-flow-into: none;
}
/* __________________________________ FOOTER __________________________________ */
section.footer {
position: absolute;
bottom: @crop;
left: @crop;
right: @crop;
height: @footer-height;
text-align: center;
&:after {
content: @footer-text;
}
}
/* __________________________________ CONTENT __________________________________ */
h1, h2, h3, h4, h5, h6 {
/* Avoids headings to be cut or to be orphans.
* But it doesn't seem to work
* if the element after has a page-break-inside avoid. It tries its best! */
-webkit-region-break-inside: avoid;
-webkit-region-break-after: avoid;
}
.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;
}
/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
* HERE NO PARAGRAPH WILL BE CUT,
* BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
/*-webkit-region-break-inside: avoid;*/
}