Merge pull request #1633 from 18F/print-stylesheet

Print stylesheet

_includes/how-it-works/offshore_oil_gas_steps.html

@@ -1,7 +1,7 @@
 
 <section class="container-outer">
 
-  <div accordion="offshore-oilgas-dkk" accordion-item class="revenues_subpage-dyk">
+  <div accordion="offshore-oilgas-dyk" accordion-item class="revenues_subpage-dyk">
 
     <h2 class="revenues_subpage-dyk_heading">Did you know?</h2>
 

_layouts/default.html

@@ -51,7 +51,8 @@
 
     <!-- Styles
     ================================================== -->
-    <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css" type="text/css" media="all">
+    <link rel="stylesheet" href="{{ site.baseurl }}/css/print.css" type="text/css" media="print">
 
     <!-- Scripts
     ================================================== -->

_sass/_print.scss

@@ -0,0 +1,10 @@
+@media print {
+  @import 'print/layout';
+  @import 'print/home';
+  @import 'print/about';
+  @import 'print/landing';
+  @import 'print/how-it-works';
+  @import 'print/content';
+  @import 'print/state-page';
+  @import 'print/page-breaks';
+}

_sass/print/_about.scss

@@ -0,0 +1,23 @@
+.bureau img,
+.bureau-img {
+  width: 100px;
+}
+
+.article_img-60 {
+  max-width: 30;
+  width: 250px;
+
+
+  &.article_img-centered {
+    margin: 0;
+  }
+}
+
+.about_intro-highlight {
+  padding-left: 0;
+  text-align: left;
+}
+
+.about_intro-callout {
+  padding-left: 0;
+}

_sass/print/_content.scss

@@ -0,0 +1,14 @@
+.layout-content {
+  .container-left-7 {
+    margin: 0;
+    width: 100%;
+  }
+
+  .case_studies_intro-select {
+    display: none !important;
+  }
+
+  .case_studies-maps {
+    text-align: left;
+  }
+}

_sass/print/_home.scss

@@ -0,0 +1,40 @@
+.carousel,
+.eiti-tabs,
+.card-image_link,
+.eiti-tab-panel .explore_home-button,
+.home-bottom-links {
+  display: none !important;
+}
+
+.card {
+  display: block;
+  float: none;
+  height: inherit !important;
+
+  img {
+    display: none !important;
+  }
+}
+
+.eiti-tab-panel {
+  display: block;
+  float: none;
+  margin-bottom: $base-padding-jumbo;
+
+  img {
+    margin: 0;
+    padding: 0;
+  }
+
+  &[aria-hidden=true] {
+    display: block !important;
+  }
+}
+
+.header-image_link,
+.card > a,
+.explore_home-img {
+  &::after {
+    content: '';
+  }
+}

_sass/print/_how-it-works.scss

@@ -0,0 +1,10 @@
+.revenues_page-footer,
+.revenues_subpage-involved_video,
+.break {
+  display: none !important;
+}
+
+
+.revenues_subpage-steps_group {
+  width: 100%;
+}

_sass/print/_landing.scss

@@ -0,0 +1,35 @@
+.landing-section,
+.landing-section_open {
+  margin-top: 0;
+
+  div[class^='landing-'] {
+    background: initial !important;
+    height: initial !important;
+  }
+}
+
+.landing-section a,
+.landing-section_open a,
+.hero-right a,
+.landing-wrapper section a {
+  &::after {
+    content: '';
+  }
+}
+
+.hero-right_caption {
+  padding-left: 0;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.hero-right_square {
+  border: 0;
+}
+
+.hero-right_image {
+  text-align: left;
+}
+

_sass/print/_layout.scss

@@ -0,0 +1,43 @@
+section.banner,
+.header-nav,
+.header-bars,
+footer,
+#glossary,
+#nav-drawer,
+iframe,
+.term .icon-book,
+.carousel-button,
+[accordion-button],
+.hash_selector,
+.sticky_nav {
+  display: none !important;
+}
+
+header,
+.container-outer {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+@page {
+  margin: 0.5cm;
+}
+
+img {
+  max-width: 500px !important;
+}
+
+a::after{
+  @include font-size(1);
+  content: ' (' attr(href) ') ';
+}
+
+.term {
+  border-bottom: 0;
+}
+
+
+[accordion-content],
+[accordion-item] div[aria-hidden='true'] {
+  display: block !important;
+}

_sass/print/_page-breaks.scss

@@ -0,0 +1,17 @@
+.chart-item,
+.row-container,
+tr,
+figure,
+figcaption,
+eiti-data-map,
+eiti-bar-chart,
+img {
+  page-break-before: always;
+  page-break-inside: avoid;
+}
+
+h1:not(#title),
+h2,
+h3 {
+  page-break-after: avoid;
+}

_sass/print/_state-page.scss

@@ -0,0 +1,7 @@
+.layout-state-pages figure {
+  min-height: 300px;
+}
+
+.chart-list {
+  width: 100%;
+}

css/print.scss

@@ -0,0 +1,22 @@
+---
+# Jekyll only builds Sass files with front matter
+---
+
+// include reset
+@import 'reset';
+
+// include Bourbon & Neat
+@import 'lib/bourbon/bourbon';
+@import 'lib/neat/neat';
+
+// include site specific base styles
+@import 'base';
+
+// include fonts (and @import font-face declarations from /css/fonts)
+@import 'fonts';
+
+// include FontAwesome Sass variables, etc.
+@import 'lib/font-awesome/font-awesome';
+
+// include print stylesheet overrides
+@import 'print';

index.html

@@ -66,7 +66,7 @@ <h4>Production from federal vs. non-federal lands and waters</h4>
       </div>
     </section>
 
-    <section class="explore_home-main" id="impact" role="tabpanel" aria-hidden="true">
+    <section class="eiti-tab-panel explore_home-main" id="impact" role="tabpanel" aria-hidden="true">
       <div class="container-left-3">
         <p>Extractive industries account for 2.6 percent of the national GDP, and contribute to exports and employment in many parts of the country.</p>
         <a href="{{ site.baseurl }}/explore/#economic-impact" class="button-primary explore_home-button">Explore data</a>