gitbook-html2print/assets/css/layout.scss

.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: myStory;
            flow-from: myStory;
}

#my-story {
    -webkit-flow-into: myStory;
            flow-into: myStory;
}
/* __________________________________ 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 {
        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;
                   break-inside: avoid;
    -webkit-region-break-after: 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;*/
    /*               break-inside: avoid;*/
}

.story-page, .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-after:always;
                   break-after:always;
}