From 86459de6dd66d27f8952ded3a811ad57ed54eea4 Mon Sep 17 00:00:00 2001
From: NiloCK <NiloCK@users.noreply.github.com>
Date: Tue, 27 Feb 2018 08:35:40 -0700
Subject: [PATCH] Improve typography for print media (#1439) (#1440)

* Update styles to enable printing docs (#1425)

The sidebar, header, footer and Advertisement elements are now hidden
when users print docs from the website.

* Improve typography for print media (#1439)

- _common.styl
 - Grey(ish) text replaced with black
 - page-breaks now avoided in code snippets
 - shaded BG colors replaced with border-boxes
- _demo.styl
 - Demonstration box padding, margins tightened up
 - page-breaks avoided
- _page.styl
 - remove padding from left of page
 - reduce line-height - dense reading is more comfortable from the page
 - shaded BG colors in 'tip' boxes replaced with border-box

* Improve typography for print media (#1439)

- _common.styl
 - Grey(ish) text replaced with black
 - page-breaks now avoided in code snippets
 - shaded BG colors replaced with border-boxes
- _demo.styl
 - Demonstration box padding, margins tightened up
 - page-breaks avoided
- _page.styl
 - remove padding from left of page
 - reduce line-height - dense reading is more comfortable from the page
 - shaded BG colors in 'tip' boxes replaced with border-box

* Add links to printed typography
---
 themes/vue/source/css/_common.styl | 25 +++++++++++++++++++++++++
 themes/vue/source/css/_demo.styl   |  7 +++++++
 themes/vue/source/css/page.styl    | 10 +++++++++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
index 8364b0923..6c306a3e6 100644
--- a/themes/vue/source/css/_common.styl
+++ b/themes/vue/source/css/_common.styl
@@ -208,3 +208,28 @@ sup.beta.beta
   margin-left: .7em
   text-transform: uppercase
   opacity: .6
+
+@media print
+  body
+    color: rgb(0,0,0)
+  .highlight
+    padding: 0
+    page-break-inside: avoid
+    .code
+      pre
+        color: rgb(0,0,0)
+        background-color: rgb(255,255,255)
+        border-style: solid
+        border-width: 2px 2px 2px 2px
+        border-color: #e8e8e8
+        page-break-inside: avoid
+  h1,h2,h3,h4,h5
+    color: rgb(0,0,0)
+    page-break-after: avoid
+    page-break-before: 
+  img
+    page-break-inside: avoid
+  h2+p
+    page-break-before: avoid
+  a:link:after, a:visited:after { content:" [" attr(href) "] "; }
+  
diff --git a/themes/vue/source/css/_demo.styl b/themes/vue/source/css/_demo.styl
index 0f7d25170..f53c05cb9 100644
--- a/themes/vue/source/css/_demo.styl
+++ b/themes/vue/source/css/_demo.styl
@@ -60,3 +60,10 @@ ul#demo, ul.demo
 
   th, td
     padding: 3px 7px
+
+@media print
+  #demo, .demo, .content .demo
+    page-break-inside: avoid
+    padding: 1em
+    margin-bottom: 1em
+    border-width: 2px
\ No newline at end of file
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
index c65e36296..6f8dd19b5 100644
--- a/themes/vue/source/css/page.styl
+++ b/themes/vue/source/css/page.styl
@@ -250,4 +250,12 @@
 
 @media print
   .footer
-    display: none
\ No newline at end of file
+    display: none
+  .content
+    padding-left: 0px
+  .content p
+    line-height: 1.35em
+    &.tip
+      background-color: rgb(255,255,255)
+      border: 2px solid #e8e8e8
+      border-left: 4px solid $red
\ No newline at end of file