Add print stylesheet

README.md

@@ -10,7 +10,7 @@ Slate helps you create beautiful single-page API documentation. Think of it as a
 Features
 ------------
 
-* **Clean, intuitive design** — with Slate, the description of your API is on the left side of your documentation, and all the code examples are on the right side. Inspired by [Stripe's](https://stripe.com/docs/api) and [Paypal's](https://developer.paypal.com/webapps/developer/docs/api/) API docs.
+* **Clean, intuitive design** — with Slate, the description of your API is on the left side of your documentation, and all the code examples are on the right side. Inspired by [Stripe's](https://stripe.com/docs/api) and [Paypal's](https://developer.paypal.com/webapps/developer/docs/api/) API docs. In addition to the design you see on screen, Slate comes with a print stylesheet, so your users can easily print out your documentation as a hard copy for reference.
 
 * **Everything on a single page** — gone are the days where your users had to search through a million pages to find what they wanted. Slate puts the entire documentation on a single page. We haven't sacrificed linkability, though. As you scroll, your browser's hash will update to the nearest header, so it's insanely easy to link to a particular point in the documentation.
 

source/layouts/layout.erb

@@ -24,7 +24,8 @@ under the License.
     <!-- Use title if it's in the page YAML frontmatter -->
     <title><%= current_page.data.title || "API Documentation" %></title>
 
-    <%= stylesheet_link_tag "all" %>
+    <%= stylesheet_link_tag "screen", media: 'screen' %>
+    <%= stylesheet_link_tag "print", media: 'print' %>
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <%= javascript_include_tag  "all" %>
 

source/stylesheets/print.css.scss

@@ -0,0 +1,110 @@
+@charset "utf-8";
+@import 'normalize';
+@import 'compass';
+@import 'variables';
+
+/*
+Copyright 2008-2013 Concur Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may
+not use this file except in compliance with the License. You may obtain
+a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations
+under the License.
+*/
+
+$print-color: #999;
+$print-color-light: #ccc;
+$print-font-size: 12px;
+
+body {
+  @extend %body-font;
+}
+
+.tocify, .toc-footer {
+  display: none;
+}
+
+.tocify-wrapper>img {
+  margin: 0 auto;
+  display: block;
+}
+
+.content {
+  font-size: 12px;
+
+  pre, code {
+    @extend %code-font;
+    @extend %break-words;
+    border: 1px solid $print-color;
+    border-radius: 5px;
+    font-size: 0.8em;
+  }
+
+  pre {
+    padding: 1.3em;
+  }
+
+  code {
+    padding: 0.2em;
+  }
+
+  table {
+    border: 1px solid $print-color;
+    tr {
+      border-bottom: 1px solid $print-color;
+    }
+    td,th {
+      padding: 0.7em;
+    }
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  h1 {
+    @extend %header-font;
+    font-size: 2.5em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    margin-top: 1em;
+    margin-bottom: $h1-margin-bottom;
+    border: 2px solid $print-color-light;
+    border-width: 2px 0;
+    text-align: center;
+  }
+
+  h2 {
+    @extend %header-font;
+    font-size: 1.8em;
+    margin-top: 2em;
+    border-top: 2px solid $print-color-light;
+    padding-top: 0.8em;
+  }
+
+  h1+h2, h1+div+h2 {
+    border-top: none;
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  h3 {
+    @extend %header-font;
+    font-size: 0.8em;
+    margin-top: 1.5em;
+    margin-bottom: 0.8em;
+    text-transform: uppercase;
+  }
+}