More readable text, no webfonts

_includes/2017/head.html

@@ -9,14 +9,18 @@
   <script src='https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js'></script>
   <script src='https://unpkg.com/prismjs@1.6.0'></script>
   {% for lang in page.prism_languages %}
-  <script src='https://unpkg.com/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>
+  <script src='https://unpkg.com/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
-  {% endfor %}
   <script src='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
+
+  <!-- 3rd-party CSS -->
   <link rel='stylesheet' href='https://unpkg.com/sanitize.css@5.0.0/sanitize.css'>
-  <!-- <link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/themes/prism.css'> -->
   <link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
+
+  {% comment %}
+  <!-- No custom fonts -->
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Code:400'>
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'>
+  {% endcomment %}
 
   <!-- 2017 layout -->
   <link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'>

_sass/2017/base/base.scss

@@ -34,7 +34,7 @@ pre {
  * Antialias
  */
 
-* {
+*:not(pre):not(code) {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

_sass/2017/components/pages-list.scss

@@ -69,5 +69,5 @@
   margin: 16px 0;
   padding: 0 0 16px 0;
   font-weight: normal;
-  color: $base-b;
+  color: $base-a;
 }

_sass/2017/markdown/code.scss

@@ -22,7 +22,7 @@
   }
 
   pre > code {
-    color: $base-text;
+    color: $base-head;
     max-height: auto;
     padding: 0;
     background: transparent;
@@ -62,11 +62,11 @@
 
 .token {
   $cA: $base-b;
-  $cA-3: adjust-color($cA, $lightness: 15%, $hue: -10deg);
+  $cA-3: adjust-color($cA, $lightness: 8%, $hue: -10deg);
-  $cA-7: adjust-color($cA, $lightness: -15%, $hue: 10deg);
+  $cA-7: adjust-color($cA, $lightness: -8%, $hue: 10deg);
 
   $cB: $base-c;
-  $cB-3: adjust-color($cB, $lightness: 15%, $hue: -10deg);
+  $cB-3: adjust-color($cB, $lightness: 8%, $hue: -10deg);
 
   $cM: #aaa; // Mute
 

_sass/2017/variables.scss

@@ -5,17 +5,18 @@
 $gut-small: 16px; // max 480px width
 $gut: 16px;
 $column: 400px;
-$code-size: 0.92em;
+$code-size: 1em;
 $area-width: $column * 3 + 32px;
 
 /*
  * Fonts
  */
 
-$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$system-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-$body-font: 'Roboto', $system-font;
+$system-mono: 'SFMono-Regular', Consolas, Menlo, 'Liberation Mono', 'Ubuntu Mono', Courier, monospace;
-$heading-font: 'Roboto', $system-font;
+$body-font: $system-sans;
-$monospace-font: 'Fira Mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
+$heading-font: $system-sans;
+$monospace-font: $system-mono;
 
 /*
  * Base colors
@@ -27,9 +28,9 @@ $base-head: #111;
 $base-text: #345;
 $base-mute: #667788; // gray
 
-$base-a: #8370bd; // indigo
+$base-a: adjust-color(#8370bd, $lightness: -5%); // indigo
-$base-b: #2b72a2; // blue
+$base-b: adjust-color(#2b72a2, $lightness: -5%); // blue
-$base-c: #17c694; // teal
+$base-c: adjust-color(#17c694, $lightness: -5%); // teal
 
 $base-b3: adjust-color($base-b, $lightness: 16%, $hue: -20deg);
 $base-b7: adjust-color($base-b, $lightness: -16%, $hue: 20deg);
@@ -59,15 +60,16 @@ $base-a-gradient: linear-gradient(
 //
 
 $shadow2:
-  0 1px 1px rgba($base-mute, 0.30);
+  0 1px 1px rgba($base-mute, 0.55);
 
 $shadow3:
-  0 6px 8px rgba($base-mute, 0.02),
+  0 6px 8px rgba($base-mute, 0.03),
-  0 1px 2px rgba($base-mute, 0.20);
+  0 1px 2px rgba($base-mute, 0.30);
 
 $shadow6:
-  0 8px 12px rgba($base-b3, 0.1),
+  0 6px 8px rgba($base-mute, 0.03),
-  0 2px 3px rgba($base-b, 0.18);
+  0 1px 2px rgba($base-mute, 0.30),
+  0 8px 12px rgba($base-b3, 0.1);
 
 /*
  * Mod scale

vimscript.md

@@ -165,13 +165,14 @@ echo "Result: " . s:Initialize()
 ```
 
 ### Abortable
-Aborts when error is detected
 
 ```vim
 function! myfunction() abort
 endfunction
 ```
 
+Aborts when an error occurs.
+
 ### Var arguments
 
 ```vim
@@ -215,6 +216,7 @@ Custom commands
 ```vim
 command! Save :set fo=want tw=80 nowrap
 ```
+{: .-setup}
 
 Custom commands start with uppercase letters. The `!` redefines a command if it already exists.
 
@@ -222,6 +224,9 @@ Custom commands start with uppercase letters. The `!` redefines a command if it
 
 ```vim
 command! Save call script#foo()
+```
+
+```vim
 function! script#foo()
   ...
 endfunction