From 834119ecd8dbeb9451bdb0204622a9ad28e00a2d Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Fri, 25 Oct 2013 11:33:19 -0700 Subject: [PATCH] Add print stylesheet --- README.md | 2 +- source/layouts/layout.erb | 3 +- source/stylesheets/print.css.scss | 110 ++++++++++++++++++ .../{all.css.scss => screen.css.scss} | 0 4 files changed, 113 insertions(+), 2 deletions(-) create mode 100644 source/stylesheets/print.css.scss rename source/stylesheets/{all.css.scss => screen.css.scss} (100%) diff --git a/README.md b/README.md index c94c65b..b72397b 100644 --- a/README.md +++ b/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. diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index 6690edb..d1e1795 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -24,7 +24,8 @@ under the License. <%= current_page.data.title || "API Documentation" %> - <%= stylesheet_link_tag "all" %> + <%= stylesheet_link_tag "screen", media: 'screen' %> + <%= stylesheet_link_tag "print", media: 'print' %> <%= javascript_include_tag "all" %> diff --git a/source/stylesheets/print.css.scss b/source/stylesheets/print.css.scss new file mode 100644 index 0000000..4d44642 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/source/stylesheets/all.css.scss b/source/stylesheets/screen.css.scss similarity index 100% rename from source/stylesheets/all.css.scss rename to source/stylesheets/screen.css.scss