Merge pull request #71 from carpentries/media-print-solution

Format printing of lesson contents

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: varnish
 Title: Front-end for The Carpentries Lesson Template
-Version: 0.2.10
+Version: 0.2.11
 Authors@R: c(
     person(given = "Zhian N.",
            family = "Kamvar",

NEWS.md

@@ -1,5 +1,11 @@
 # varnish 0.2.10
 
+* Formatted print media to avoid breaking in important contexts (code blocks,
+  callout blocks, instructor notes) and shows solutions and instructor notes.
+  (reported: Anonymous, #70; fixed: @zkamvar, #71)
+
+# varnish 0.2.10
+
 * Fix issue with bullet points in callouts being mis-aligned 
   (reported: @sstevens2, #68; fixed: @zkamvar, #69)
 

source/stylesheets/styles.css.scss

@@ -262,3 +262,41 @@ figcaption {
   }
 
 }
+
+@media print {
+  // force solutions and instructor notes to show on print
+  .accordion-collapse {
+    display: unset !important;
+  }
+  // do not display navigation or search forms or extraneous decoration
+  button, nav, footer, form.search-form, #to-top, div.callout-square, .lesson-progress {
+    display: none !important;
+  }
+  // source: <https://css-tricks.com/almanac/properties/p/page-break/#aa-example>
+  h2 { 
+    page-break-before: auto;
+  }
+  h3, h4 {
+    page-break-after: avoid;
+  }
+  pre, blockquote, .callout, .instructor-note, .challenge-accordion {
+    page-break-inside: avoid;
+    border-style: solid;
+  }
+  // add solution heading before the solution
+  .challenge-accordion::before {
+    content: "Solution";
+    display: block;
+    text-size: 18pt;
+    text-decoration: underline;
+  }
+  .instructor-note::before {
+    content: "Instructor Note";
+    display: block;
+    text-size: 18pt;
+    text-decoration: underline;
+  }
+  pre {
+    overflow: unset !important;
+  }
+}