gitbook-html2print/assets/css/styles.scss

@import "setup.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;


    }
    .page {
        width: $page-width;
        height: $page-height;
        position: relative;
    }

}

@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
 */

.page-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-after: region;
}

// section.level1, section.level2{
//   break-after: always;
// }

/* __________________________________ LAYOUT __________________________________ */

.header,
.body,
.footer {
    box-sizing: border-box;
}

/* __________________________________ HEADER __________________________________ */
.header {
    top: 0;
    margin: 0;
    padding-top: $page-margin-top;
    width: 100%;
    height: $header-height;
    text-align: left;

    &:after {
        content: $header-text;
    }
}
/* __________________________________ MAIN SECTION __________________________________ */
.body {
    height: $page-height - $header-height - $footer-height;
    width: $page-width;
    margin-bottom: $page-margin-bottom;
    padding-top: $page-margin-top + $header-height;
    padding-bottom: $page-margin-bottom;
    position: absolute;
}

.recipient {
  -webkit-flow-from: contentFlow;
  flow-from: contentFlow;
}

#content > * {
  -webkit-flow-into: contentFlow;
  flow-into: contentFlow contents;
}



/* __________________________________ FOOTER __________________________________ */
.footer {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: $footer-height;
    text-align: center;

    &:after {
        content: $footer-text;
    }
}

/* mirrored pages */
.paper {

    &:nth-child(odd) .header {
        @if $page-layout == 2 {text-align: right;}
    }

    &:nth-child(odd) .header,
    &:nth-child(odd) .body,
    &:nth-child(odd) .footer {
        padding-left: $page-margin-inside;
        padding-right: $page-margin-outside;
    }
    &:nth-child(even) .header,
    &:nth-child(even) .body,
    &:nth-child(even) .footer {
        padding-left: $page-margin-outside;
        padding-right: $page-margin-inside;
    }
}

img {
    max-width: 100%;
}

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;
     break-inside: avoid;
     break-after: avoid;
}

/* 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;*/
}


/**
 * DEBUG STYLES
 */
.debug .paper {
  outline: 1px solid blue;
}
.debug .page {
 outline: 1px solid green;
}
.debug .header {
    outline: 1px solid pink;
}
.debug .body {
    outline: 1px solid purple;
}
.debug .footer {
    outline: 1px solid pink;
}

.debug .region-break {
    border-top: 1px dashed blue;
    box-sizing: border-box;
}

.debug img {
    outline: 1px solid blue;
}


/**
 * Style
 */

@media screen{
  body{
    background-color: #EEE;
  }

  .paper{
    background-color: #fff;
    box-shadow: 0 0 10px 7px #AAA;
    margin: 20px;
  }
}

@import "custom.scss";