Improve typography for print media (vuejs#738)

* Update styles to enable printing docs (vuejs#1425)

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

* Improve typography for print media (vuejs#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 (vuejs#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

@@ -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) "] "; }
+

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

themes/vue/source/css/page.styl

@@ -250,4 +250,12 @@
 
 @media print
   .footer
-    display: none
+    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