re_integrated html2print boilerplate from osp

2017-04-22 16:56:29 +02:00
parent b68f53c0b0
commit 6366f20dcb
26 changed files with 1293 additions and 565 deletions
@@ -0,0 +1,98 @@
+.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;*/
+}