print.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /*
  2. Theme Name: Calm (Twenty Nineteen)
  3. Adding print support. The print styles are based on the the great work of
  4. Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
  5. */
  6. /*--------------------------------------------------------------
  7. >>> TABLE OF CONTENTS:
  8. ----------------------------------------------------------------
  9. # Margins
  10. # Typography
  11. # Page breaks
  12. # Links
  13. # Visibility
  14. --------------------------------------------------------------*/
  15. @media print {
  16. /* Margins */
  17. @page {
  18. margin: 2cm;
  19. }
  20. .entry {
  21. margin-top: 1em;
  22. }
  23. .entry .entry-header, .site-footer .site-info {
  24. margin: 0;
  25. }
  26. /* Fonts */
  27. body {
  28. font: 13pt Georgia, "Times New Roman", Times, serif;
  29. line-height: 1.3;
  30. background: #fff !important;
  31. color: #000;
  32. }
  33. h1 {
  34. font-size: 24pt;
  35. }
  36. h2,
  37. h3,
  38. h4,
  39. .has-regular-font-size,
  40. .has-large-font-size,
  41. h2.author-title,
  42. p.author-bio,
  43. .comments-title, h3 {
  44. font-size: 14pt;
  45. margin-top: 25px;
  46. }
  47. /* Page breaks */
  48. a {
  49. page-break-inside: avoid
  50. }
  51. blockquote {
  52. page-break-inside: avoid;
  53. }
  54. h1,
  55. h2,
  56. h3,
  57. h4,
  58. h5,
  59. h6 {
  60. page-break-after: avoid;
  61. page-break-inside: avoid
  62. }
  63. img {
  64. page-break-inside: avoid;
  65. page-break-after: avoid;
  66. }
  67. table, pre {
  68. page-break-inside: avoid;
  69. }
  70. ul, ol, dl {
  71. page-break-before: avoid;
  72. }
  73. /* Links */
  74. a:link, a:visited, a {
  75. background: transparent;
  76. font-weight: bold;
  77. text-decoration: underline;
  78. text-align: left;
  79. }
  80. a {
  81. page-break-inside: avoid;
  82. }
  83. a[href^=http]:after {
  84. content: " < " attr(href) "> ";
  85. }
  86. a:after > img {
  87. content: "";
  88. }
  89. article a[href^="#"]:after {
  90. content: "";
  91. }
  92. a:not(:local-link):after {
  93. content: " < " attr(href) "> ";
  94. }
  95. /* Visibility */
  96. .main-navigation,
  97. .site-title + .main-navigation,
  98. .social-navigation,
  99. .site-branding-container:before,
  100. .entry .entry-title:before,
  101. .entry-footer,
  102. .author-description:before,
  103. .post-navigation,
  104. .widget-area,
  105. .comment-form-flex,
  106. .comment-reply,
  107. .comment .comment-metadata .edit-link {
  108. display: none;
  109. }
  110. .entry .entry-content .wp-block-button .wp-block-button__link,
  111. .entry .entry-content .button {
  112. color: #000;
  113. background: none;
  114. }
  115. /* Site Header (With Featured Image) */
  116. .site-header.featured-image {
  117. min-height: 0;
  118. .main-navigation a,
  119. .main-navigation a + svg,
  120. .social-navigation a,
  121. .site-title a,
  122. .site-featured-image a,
  123. .site-branding .site-title,
  124. .site-branding .site-description,
  125. .main-navigation a:after,
  126. .main-navigation .main-menu > li.menu-item-has-children:after,
  127. .main-navigation li,
  128. .social-navigation li,
  129. .entry-meta,
  130. .entry-title,
  131. &#masthead .site-title a {
  132. color: #000;
  133. text-shadow: none;
  134. }
  135. .site-featured-image .entry-header,
  136. .site-branding-container {
  137. margin-top: 0;
  138. margin-bottom: 0;
  139. }
  140. .site-featured-image .post-thumbnail img {
  141. position: relative;
  142. height: initial;
  143. width: initial;
  144. object-fit: none;
  145. min-width: 0;
  146. min-height: 0;
  147. max-width: 100%;
  148. margin-top: 1rem;
  149. }
  150. }
  151. /* Remove image filters from featured image */
  152. .image-filters-enabled {
  153. *:after {
  154. display: none !important;
  155. }
  156. .site-header.featured-image .site-featured-image:before {
  157. display: none;
  158. }
  159. .site-header.featured-image .site-featured-image .post-thumbnail img {
  160. filter: none;
  161. }
  162. }
  163. }