Improve text accessibility (#1666)

This patch makes a few changes:

- Alter the "light" text colour so that it is WCAG AAA compliant for
  legibility.
- Adjust code colours to be at least WCAG AA compliant.
- Darken the "medium" and "dark" colours, so as to preserve significance
  of different shades
- Make text use the font-size set by the browser so users with visual
  impairment can choose their own size, rather than hardcoding 15px and
  forcing people to zoom. Most browsers default to 16px, in my
  understanding. Also adjust the max-width of the body, to account for
  the increased font-size and prevent aggressive line wrapping.
- Adjust some of the site meta tags to allow scaling on mobile

Author: robcresswell

themes/vue/layout/layout.ejs

@@ -6,7 +6,7 @@
     <title><%- page.title ? page.title + ' — ' : '' %>Vue.js</title>
     <meta charset="utf-8">
     <meta name="description" content="<%- theme.site_description %>">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="alternate" hreflang="x-default" href="https://vuejs.org/<%- page.path %>">
     <link rel="alternate" hreflang="zh" href="https://cn.vuejs.org/<%- page.path %>">

themes/vue/source/css/_common.styl

@@ -36,7 +36,7 @@ code, pre
   -moz-osx-font-smoothing: initial
 
 code
-  color: #e96900
+  color: #d63200
   padding: 3px 5px
   margin: 0 2px
   border-radius: 2px
@@ -129,7 +129,6 @@ input.button
       border-top: 1px solid #eee
     a
       color: lighten($dark, 10%)
-      font-size: .9em
       display: block
       &:hover
         color: $green
@@ -143,7 +142,7 @@ input.button
     height: 0
     border-left: 4px solid transparent
     border-right: 4px solid transparent
-    border-top: 5px solid #ccc
+    border-top: 5px solid $light
 
 sup.beta.beta
   font-size: .6em

themes/vue/source/css/_settings.styl

@@ -4,13 +4,13 @@ $logo-font = "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif
 $code-font = "Roboto Mono", Monaco, courier, monospace
 
 // font sizes
-$body-font-size = 16px
-$code-font-size = .8em
+$body-font-size = 1rem
+$code-font-size = .85rem
 
 // colors
-$dark   = #2c3e50
-$medium = #34495e
-$light  = #7f8c8d
+$dark   = #273849
+$medium = #304455
+$light  = #4f5959
 $green  = #42b983
 $border = #dddddd
 $codebg = #f8f8f8

themes/vue/source/css/_sidebar.styl

@@ -27,8 +27,6 @@
     margin-left: 5px
   .menu-root
     padding-left: 0
-  .menu-sub
-    font-size: .85em
   .sidebar-link
     color: $light
     &.current
@@ -92,4 +90,4 @@
 
 @media print
   .sidebar
-    display: none
+    display: none

themes/vue/source/css/_syntax.styl

@@ -7,8 +7,8 @@ pre code
   color: #525252
   white-space: pre
   padding: 1.2em 1.4em
-  line-height: 1.5em
-  font-size: 1em
+  font-size: 0.9rem;
+  line-height: 1.6rem
   display: block
 
   .hljs
@@ -55,7 +55,7 @@ pre code
 
     &-keyword,
     &-attribute
-      color: #e96900
+      color: #d63200
 
     &-number,
     &-literal
@@ -78,7 +78,7 @@ pre code
     &-shebang,
     &-apache &-sqbracket,
     &-tex &-formula
-      color: #b3b3b3
+      color: #707070
 
     &-coffeescript &-javascript,
     &-javascript &-xml,

themes/vue/source/css/page.styl

@@ -23,7 +23,7 @@
 .content
   position: relative
   padding: 2.2em 0
-  max-width: 600px
+  max-width: 700px
   margin: 0 auto
   padding-left: 50px
   &.api
@@ -186,7 +186,6 @@
   margin-top: 2em
   padding-top: 2em
   border-top: 1px solid #e5e5e5
-  font-size: .9em
 
 #main.fix-sidebar
   position: static