layout.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. .header,
  2. .body,
  3. .footer {
  4. box-sizing: border-box;
  5. }
  6. /* __________________________________ HEADER __________________________________ */
  7. .header {
  8. top: 0;
  9. margin: 0;
  10. padding-top: $page-margin-top;
  11. width: 100%;
  12. height: $header-height;
  13. text-align: left;
  14. &:after {
  15. content: $header-text;
  16. }
  17. }
  18. /* __________________________________ MAIN SECTION __________________________________ */
  19. .body {
  20. height: $page-height - $header-height - $footer-height;
  21. width: $page-width;
  22. margin-bottom: $page-margin-bottom;
  23. padding-top: $page-margin-top + $header-height;
  24. padding-bottom: $page-margin-bottom;
  25. position: absolute;
  26. }
  27. .recipient {
  28. -webkit-flow-from: myStory;
  29. flow-from: myStory;
  30. }
  31. #my-story {
  32. -webkit-flow-into: myStory;
  33. flow-into: myStory;
  34. }
  35. /* __________________________________ FOOTER __________________________________ */
  36. .footer {
  37. position: absolute;
  38. bottom: 0;
  39. margin: 0;
  40. width: 100%;
  41. height: $footer-height;
  42. text-align: center;
  43. &:after {
  44. content: $footer-text;
  45. }
  46. }
  47. /* mirrored pages */
  48. .paper {
  49. &:nth-child(odd) .header {
  50. text-align: right;
  51. }
  52. &:nth-child(odd) .header,
  53. &:nth-child(odd) .body,
  54. &:nth-child(odd) .footer {
  55. padding-left: $page-margin-inside;
  56. padding-right: $page-margin-outside;
  57. }
  58. &:nth-child(even) .header,
  59. &:nth-child(even) .body,
  60. &:nth-child(even) .footer {
  61. padding-left: $page-margin-outside;
  62. padding-right: $page-margin-inside;
  63. }
  64. }
  65. img {
  66. max-width: 100%;
  67. }
  68. h1,
  69. h2,
  70. h3,
  71. h4,
  72. h5,
  73. h6 {
  74. /* Avoids headings to be cut or to be orphans.
  75. * But it doesn't seem to work
  76. * if the element after has a page-break-inside avoid. It tries its best! */
  77. -webkit-region-break-inside: avoid;
  78. break-inside: avoid;
  79. -webkit-region-break-after: avoid;
  80. break-after: avoid;
  81. }
  82. /* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
  83. * HERE NO PARAGRAPH WILL BE CUT,
  84. * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
  85. p {
  86. /*-webkit-region-break-inside: avoid;*/
  87. /* break-inside: avoid;*/
  88. }
  89. .story-page, .page-break {
  90. /* Apply this class to an element to put it on a new region.
  91. * Hint:
  92. * You can also use an empty <div class="page-break"></div>
  93. * if you want to put manual page breaks without attaching it to an HTML element
  94. */
  95. -webkit-region-break-after:always;
  96. break-after:always;
  97. }