Download raw (8.2 KB)

/* __________________________________ LOCAL SETTINGS __________________________________ */

:root {
    --page-height: 200mm;
    --page-width: 170mm;
    --spread: calc(var(--page-width)*2);

    --crop-length: 7mm;
    --crop-offset: 5mm;
    --crop: calc(var(--crop-length) + var(--crop-offset));    /* Based on Scribus cropmarks with 5mm of bleed -> 7mm of marks + 5mm of offset */
    --page-width-crop: calc(var(--page-width) + calc(var(--crop)*2)); 
    --page-height-crop: calc(var(--page-height) + calc(var(--crop)*2));

    --page-margin-inside: 20mm;
    --page-margin-outside: 20mm;
    --page-margin-top: 10mm;
    --page-margin-bottom: 15mm;

    --header-height: 20mm;
    --header-text: "ethertoff";
    --footer-height: 10mm;
    --footer-text: counter(page-counter);
}

/* __________________________________ DEBUG __________________________________ */
.debug {
    /*outline: 1pt solid purple;*/
}

.debug .page {
    outline: 1pt solid blue;
}

.debug .header {
    outline: 1pt solid pink;
}

.debug .main-section {
    outline: 1pt solid cyan;
}

.debug .footer {
    outline: 1pt solid pink;
}

.debug .middle {
    /*outline: 1pt solid red;*/
}
.debug .region-break {
    border-top: 1pt dashed blue;
}
.debug .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;

}
#print-interface button: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;
}

div#print-interface a {
    text-decoration: none;
    position: static;
}

div#print-interface div.dropdown {
    display: inline-block;
    position: relative;
}
div#print-interface div.dropdown ul {
    padding: 0.5em 0;
    display: none;
    background-color: black;
    position: absolute;
    right: 0;
    bottom: 2em;
    height: 200pt;
    width: 80pt;
    overflow: auto;
}
div#print-interface div.dropdown ul a {
    padding: 0 1em;
    color: white;
    display: block;
}
div#print-interface div.dropdown ul a:hover {
    background-color: white;
    color: black;
}
div#print-interface div.dropdown button {
    width: 80pt;
}


/* __________________________________ 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: var(--page-width) var(--page-height); */  /* format coupé*/
    size: var(--page-width-crop) var(--page-height-crop);  /* format avec cropmarks */
    margin: 0;
    orphans: 2;
    widows: 2;
}

/*-- SPREADS ---------------------------------*/
html.spread .page {
    outline: 1px solid black;
    float: left;
}
html.spread .page:nth-child(odd) {
    margin-left: -calc(var(--crop) * 2);
    left: 1px;
}
html.spread #page-1 {
    margin-left: var(--page-width) !important;
}


html {
    width: var(--page-width-crop);
    position: absolute;
}

body {
    position: absolute;
    /*width: var(--page-width-crop);*/
    width: 100%;
}

html,
body,
.wrap,
.middle {
    margin: 0;
    padding: 0;
}



/* __________________________________ PRINT MARKS  __________________________________ */
div.print-marks {
    position: absolute;
    top: 0;
    z-index: -1000;
    width: var(--page-width-crop); 
    height: var(--page-height-crop);
}

#master-page,
.page {
    width: var(--page-width-crop); 
    height: var(--page-height-crop);
    position: relative;
    z-index: -10;
    outline-offset: -var(--crop);
    counter-increment: page-counter;
    page-break-inside: avoid;
    page-break-after: always;
    overflow: visible;
}
#master-page:nth-child(odd) .header,
.page:nth-child(odd) .header {
    text-align: right;
}

#master-page:nth-child(odd) .header,
#master-page:nth-child(odd) .main-section,
#master-page:nth-child(odd) .footer,
.page:nth-child(odd) .header,
.page:nth-child(odd) .main-section,
.page:nth-child(odd) .footer {
    padding-left: var(--page-margin-inside);
    padding-right: var(--page-margin-outside);
}
#master-page:nth-child(even) .header,
#master-page:nth-child(even) .main-section,
#master-page:nth-child(even) .footer,
.page:nth-child(even) .header,
.page:nth-child(even) .main-section,
.page:nth-child(even) .footer {
    padding-left: var(--page-margin-outside);
    padding-right: var(--page-margin-inside);
}


/* __________________________________ CROP MARKS  __________________________________ */
div.crop-top-left,
div.crop-top-right,
div.crop-bottom-right,
div.crop-bottom-left {
    height: var(--crop);
    width:  var(--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: var(--crop-length);
    height: var(--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: var(--crop);
    left: var(--crop);
    right: var(--crop);
    padding-top: var(--page-margin-top);
    height: var(--header-height);
    text-align: left;
}
section.header:after {
    content: var(--header-text);
}

/* __________________________________ MAIN SECTION __________________________________ */

section.main-section {
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    page-break-inside: avoid;
    page-break-before: always;
    top: var(--crop);
    left: var(--crop);
    right: var(--crop);
    bottom: var(--crop);
    position: absolute;

}
div.column {
    /*-webkit-flow-from: myFlow;*/
    flow-from: myFlow;
    height: 100%;
    float: left;
    width: 100%;
}
#content,
div.footnote {
    /*-webkit-flow-into: myFlow;*/
    flow-into: myFlow;
    width: 100%;
}
.include #content,
.include div.footnote {
    /*-webkit-flow-into: none;*/
    flow-into: none;
}


/* __________________________________ FOOTER __________________________________ */
section.footer {
    position: absolute;
    bottom: var(--crop);
    left: var(--crop);
    right: var(--crop);
    height: var(--footer-height);
    text-align: center;
}

section.footer:after {
    content: var(--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 */
figure, 
img {
    -webkit-region-break-inside: avoid;
}