Merge pull request usds#294 from usds/jared/print-styles

Jared/print styles

_sass/_print.scss

@@ -0,0 +1,98 @@
+// Print overrides
+
+.usds-site {
+  text-align: left !important;
+
+  h2, h3, h4 {
+    font-weight: 700;
+    //color: #205493;
+  }
+
+  h1, h2, h3, h4, h5 {
+    font-weight: bold;
+    page-break-after: avoid;
+    page-break-inside:avoid;
+  }
+
+  h1+p, h2+p, h3+p {
+    page-break-before: avoid;
+  }
+
+  table, figure {
+    page-break-inside: avoid;
+  }
+
+  .usa-grid {
+    padding: 0;
+  }
+
+  header#fixed-header {
+    position: relative;
+
+
+    .site-navbar .desktop {
+      & > ul li.nav-item {
+        display: none;
+      }
+      #submenu-background {
+        display: none;
+      }
+    }
+
+    .site-navbar .mobile {
+      display: none;
+    }
+
+  } // </header>
+
+  main {
+    margin-top: 0;
+  }
+
+  footer .usa-grid {
+    display: none;
+  }
+
+  // Staff
+  .slick-track {
+    transform: none;
+    width: auto !important;
+  }
+
+  .staffer {
+    padding: 0 !important;
+    width: 100% !important;
+
+    img {
+      width: 50px;
+      height: 50px;
+      margin-top: 1.5em
+    }
+
+    h3 {
+      margin-top: .5em;
+    }
+  }
+
+  // Print Links
+  p a::after,
+  .story a::after {
+    content:" (" attr(href) ") ";
+    font-size:0.8em;
+    font-weight:normal;
+  }
+
+  // Hide Items
+  .usa-grid .usds-sidebar,
+  iframe[src~="youtube"],
+  iframe[allowfullscreen],
+  .slick-dots,
+  .jumbotron-text img {
+    display: none !important;
+  }
+
+  .infographic-container {
+    text-align: left;
+  }
+
+} // </.usds-site>

css/main.scss

@@ -10,7 +10,7 @@ $header-font-family:                    'Merriweather','Georgia','Times New Roma
 $background-color:                      #ffffff;
 $background-color-secondary:            #dec622;
 $navigation-background-color:           #323a45;
-                                        
+
 $text-color:                            #000000;
 $text-secondary-color:                  #0e2643;
 $link-color:                            #0071bc;
@@ -45,20 +45,20 @@ $site-album-image-height:               160px; // 320
 // $base-font-weight: 400;
 // $small-font-size:  $base-font-size * 0.875;
 // $base-line-height: 1.5;
-// 
+//
 $spacing-unit:     30px;
-// 
+//
 // $text-color:       #111;
 // $background-color: #fdfdfd;
 // $brand-color:      #2a7ae2;
-// 
+//
 // $grey-color:       #828282;
 // $grey-color-light: lighten($grey-color, 40%);
 // $grey-color-dark:  darken($grey-color, 25%);
 
 // Width of the content area
 // $content-width:    800px;
-// 
+//
 // $on-palm:          600px;
 // $on-laptop:        800px;
 
@@ -88,3 +88,7 @@ $spacing-unit:     30px;
   "slick-theme",
   "syntax-highlighting"
 ;
+
+@media print {
+  @import "print";
+}