core-layout printing

app/assets/stylesheets/core-layout-print.scss

@@ -0,0 +1,2 @@
+// reuse the header-footer-only print styles
+@import "header-footer-only-print";

app/assets/stylesheets/govuk-component/_component-print.scss

@@ -0,0 +1,6 @@
+// Container file for all govuk-component print specific styling
+
+// Components styles
+@import "govspeak-print";
+@import "metadata-print";
+@import "title-print";

app/assets/stylesheets/govuk-component/_govspeak-print.scss

@@ -0,0 +1,5 @@
+.govuk-govspeak {
+  .play-container {
+    display: none;
+  }
+}

app/assets/stylesheets/govuk-component/_metadata-print.scss

@@ -0,0 +1,15 @@
+.govuk-metadata {
+  dt {
+    float: left;
+    font-weight: bold;
+    clear: both;
+    min-width: 120px;
+  }
+  dd {
+    margin-left: 120px;
+  }
+  dd p {
+    margin: 0;
+    padding: 0;
+  }
+}

app/assets/stylesheets/govuk-component/_title-print.scss

@@ -0,0 +1,8 @@
+.govuk-title {
+  .context {
+    margin: 0;
+  }
+  h1 {
+    margin-top: 0;
+  }
+}

app/assets/stylesheets/print.scss → app/assets/stylesheets/header-footer-only-print.scss

@@ -16,4 +16,5 @@ $is-print: true;
 
 // OUTPUT
 // The following files and inline CSS will form the output of print.css
-@import "helpers/core-print";
+@import "helpers/print-base";
+@import "govuk-component/component-print";

app/assets/stylesheets/helpers/_core-print.scss

@@ -3,26 +3,6 @@ html {
   font-size: 62.5%;
 }
 
-// Remove link underlines for better reading clarity
-a {
-  text-decoration: none;
-}
-
-#logo {
-  @include core-48;
-  font-size: 28pt;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-
-  img {
-    width: 46px;
-    height: 40px;
-    padding-right: 6px;
-    display: block;
-    float: left;
-  }
-}
-
 main > header {
   position: relative;
 
@@ -51,29 +31,8 @@ article {
   margin-bottom: 1cm;
   width: 80%;
 
-  header h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: bold;
-  }
-
-  h2,
-  h3,
-  h4,
-  p,
-  ul {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3,
-  h4,
   .info-notice {
-      page-break-after: avoid;
+    page-break-after: avoid;
   }
 
   header h1 {
@@ -83,63 +42,10 @@ article {
     padding-bottom: 7pt;
   }
 
-  h2 {
-    @include core-19;
-    padding-top: 7pt;
-  }
-
-  h3 {
-    @include core-16;
-  }
-
-  h4 {
-    @include core-14;
-  }
-
-  p {
-    @include core-14;
-  }
-
-  ul,
-  ol {
-    @include core-14;
-    padding-left: 13pt;
-    list-style: disc;
-  }
-
-  li {
-    line-height: 1.5em;
-
-    p {
-      margin: 0;
-    }
-  }
-
   table {
-    border: 1pt solid $border-colour;
-    border-collapse: collapse;
-    width: 100%;
-    margin: $gutter-half 0;
-
-    thead {
-      display: table-header-group;
-    }
-
-    th,
-    td {
-      border: 1pt solid $border-colour;
-      padding: 0.25em 0.5em;
-      text-align: left;
-    }
-
     td:first-child ~ td {
       text-align: right;
     }
-
-    caption {
-      @include core-19;
-      margin: 14pt 0;
-    }
   }
 
   select {
@@ -193,15 +99,10 @@ article {
 }
 
 /* hide the unnecessary page elements */
-.dont-print,
-#global-header #search,
-#global-header .search-toggle,
-#global-breadcrumb,
 body #global-user-location,
 body .related-positioning,
 header.page-header div h1 span,
 header nav,
-.header-proposition,
 body .actions,
 #local-locator-form,
 #location-loading,
@@ -213,13 +114,8 @@ body .actions,
 .done-questions .start-again,
 .done-questions .question-number,
 .done-questions li.done .undo,
-.print-link,
 .player-container,
 .video-transcript-toggle
-#global-browser-prompt,
-#user-satisfaction-survey,
-.report-a-problem-toggle,
-.report-a-problem-container,
 .show-all-parts,
 .return-to-top {
   display: none !important;

app/assets/stylesheets/helpers/_print-base.scss

@@ -0,0 +1,96 @@
+/* Global print stylesheet */
+
+a {
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+
+h2,
+h3,
+h4,
+p,
+ul {
+  orphans: 3;
+  widows: 3;
+}
+
+h2,
+h3,
+h4 {
+  page-break-after: avoid;
+}
+
+h2 {
+  @include core-19;
+  padding-top: 7pt;
+}
+
+h3 {
+  @include core-16;
+}
+
+h4 {
+  @include core-14;
+}
+
+p {
+  @include core-14;
+}
+
+ul,
+ol {
+  @include core-14;
+  padding-left: 13pt;
+  list-style: disc;
+}
+
+li {
+  line-height: 1.5;
+  p {
+    margin: 0;
+  }
+}
+
+figure {
+  margin: $gutter-half 0;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: $gutter-half 0;
+
+  th,
+  td {
+    border: 1pt solid $border-colour;
+    padding: $gutter-one-third;
+    text-align: left;
+  }
+
+  caption {
+    @include core-19;
+    margin: $gutter-half 0;
+  }
+}
+
+/* hide the unnecessary page elements */
+.dont-print,
+#global-header #search,
+#global-header .search-toggle,
+#global-header .header-proposition,
+#global-breadcrumb,
+#global-browser-prompt,
+#user-satisfaction-survey,
+.print-link,
+.report-a-problem-toggle,
+.report-a-problem-container {
+  display: none;
+}

app/assets/stylesheets/static-print.scss

@@ -0,0 +1,6 @@
+// PRINT STYLESHEET COMPILER
+
+// OUTPUT
+// The following files and inline CSS will form the output of print.css
+@import "header-footer-only-print";
+@import "helpers/core-print";

app/views/root/_stylesheet.html.erb

@@ -6,4 +6,4 @@
 <!--[if IE 7]><%= stylesheet_link_tag "#{css_file}-ie7" %><script>var ieVersion = 7;</script><![endif]-->
 <!--[if IE 8]><%= stylesheet_link_tag "#{css_file}-ie8" %><script>var ieVersion = 8;</script><![endif]-->
 
-<%= stylesheet_link_tag "print", :media => "print" %>
+<%= stylesheet_link_tag "#{css_file}-print", media: "print" %>