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