Merge pull request #214 from marcom-unimelb/print-styles

add basic print styles, prep for 0.7 fix #211
unimelb · Mar 13, 2015 · 77971cc · 77971cc
2 parents 40c256e + e979f77
commit 77971cc
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 19 deletions.
diff --git a/demo-site/app/app.rb b/demo-site/app/app.rb
@@ -77,7 +77,7 @@ class App < Sinatra::Base
     get '/' do
       @components = settings.components
       @layouts    = settings.layouts
-      @ver        = "v0.6"
+      @ver        = "v0.7"
       slim :index
     end
 

diff --git a/pages/articles/usage-instructions.slim.md b/pages/articles/usage-instructions.slim.md
@@ -25,8 +25,8 @@ section
 ==syntax_highlight :html
   erb:
     <!--[if lt IE 9]><script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->
-    <link rel="stylesheet" href="//uom-design-system.s3.amazonaws.com/v0.6/uom.css">
-    <script src="//uom-design-system.s3.amazonaws.com/v0.6/uom.js"></script>
+    <link rel="stylesheet" href="//uom-design-system.s3.amazonaws.com/v0.7/uom.css">
+    <script src="//uom-design-system.s3.amazonaws.com/v0.7/uom.js"></script>
 
 section
   p The first provides a universal <abbr title="Reproduce modern functionality in older browser">polyfill</abbr> for styling on HTML5 semantic elements such as <code>header</code>, <code>nav</code> and <code>section</code> We use these elements as selectors in the design system stylesheet.
@@ -44,8 +44,8 @@ section
       <title> (any page title) </title>
 
       <!--[if lt IE 9]><script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->
-      <link rel="stylesheet" href="//uom-design-system.s3.amazonaws.com/v0.6/uom.css">
-      <script src="//uom-design-system.s3.amazonaws.com/v0.6/uom.js"></script>
+      <link rel="stylesheet" href="//uom-design-system.s3.amazonaws.com/v0.7/uom.css">
+      <script src="//uom-design-system.s3.amazonaws.com/v0.7/uom.js"></script>
     </head>
 
     <body>
@@ -62,7 +62,7 @@ section
     </html>
 
 section
-  p: em Please note that in the example above, <b class="red">v0.6</b> refers to a specific version of the design system and may not be the current version! Please refer to the homepage.
+  p: em Please note that in the example above, <b class="red">v0.7</b> refers to a specific version of the design system and may not be the current version! Please refer to the homepage.
 
 hr
 

diff --git a/templates/_print.scss b/templates/_print.scss
@@ -1,21 +1,107 @@
 // Print
-
 $black: #000000;
+$gray: #aaaaaa;
 $white: #ffffff;
-@mixin defaultfont {
-  font-family: Arial, Helvetica, sans-serif !important;
+
+@mixin defaults {
+  background-color: $white;
+  font-size: 11pt;
+  font-weight: 400;
+  line-height: 1.2;
 }
 
 @media print {
-  body {
-    @include defaultfont;
+  body .uomcontent {
+    @include defaults();
     color: $black !important;
-    background: $white !important;
-    font-size: 11pt;
-    line-height: 1.2;
-  }
-  body>header,
-  body>footer {
-    display: none !important;
+    font-family: Arial, Helvetica, sans-serif;
+
+    * {
+      @include defaults();
+    }
+
+    .page-header-tools,
+    .page-footer,
+    [role="sitemap"],
+    [role="navigation"],
+    .sitemap-label {
+      display: none;
+    }
+
+    .page-header {
+      position: static !important;
+
+      header {
+        border: 0 none;
+        box-shadow: 0 0 0 0;
+        height: auto;
+
+        a.page-header-logo {
+          display: none;
+        }
+      }
+
+      .page-header-navigation {
+        display: block;
+        height: auto;
+        padding-left: 20px;
+        padding-top: 10px;
+        text-align: left;
+
+        .page-local-history {
+          color: $gray;
+
+          a {
+            color: $gray;
+          }
+        }
+      }
+    }
+
+    .page-inner {
+      padding-top: 0;
+    }
+
+    [role="main"] {
+      hr,
+      ul.jump-navigation {
+        display: none;
+      }
+
+      a[href^="http"]:after {
+        content: " (" attr(href) ") ";
+        color: $gray;
+        display: inline-block;
+        font-size: 90%;
+        padding-left: 5px;
+        text-decoration: none;
+      }
+
+      h1,
+      h2,
+      h3,
+      p {
+        color: $black;
+      }
+
+      header,
+      section,
+      pre,
+      footer,
+      footer.contrib {
+        border: 0 none;
+        margin: 0;
+        padding: 0 0 1em;
+        text-align: left;
+      }
+
+      pre,
+      code {
+        border: 0 none;
+        font-family: 'Courier New', Courier, fixed !important;
+        overflow: visible;
+        white-space: pre-wrap;
+      }
+    }
   }
 }
diff --git a/templates/components/base/base.scss b/templates/components/base/base.scss
@@ -9,4 +9,4 @@
 @import 'layout';
 @import 'courses';
 @import 'profile';
-@import 'timetable';
+@import 'timetable';