Update color theme

_includes/2017/head.html

@@ -14,7 +14,7 @@
   <script src='https://unpkg.com/prismjs@1.6.0/components/prism-elixir.min.js'></script>
   <script src='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
   <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/themes/prism.css'> -->
   <link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
 
   <!-- 2017 layout -->

_sass/2017/markdown/headings.scss

@@ -43,7 +43,7 @@
   margin: 0;
   padding: 0;
   margin-bottom: 16px;
-  font-family: $body-font;
+  font-family: $heading-font;
   @include font-size(2);
   font-weight: 300;
   color: $baseA-400;
@@ -122,3 +122,46 @@
     display: none;
   }
 }
+
+/*
+ * Syntax highlight
+ */
+
+.token {
+  $cA: saturate(darken(#58a, 10%), 25%); // Blue
+  $cA-3: adjust-color($cA, $lightness: 15%, $hue: -10deg);
+  $cA-7: adjust-color($cA, $lightness: -15%, $hue: 10deg);
+
+  $cB: saturate(#3a8, 25%); // Green
+  $cB-3: adjust-color($cB, $lightness: 15%, $hue: -10deg);
+
+  $cM: #aaa; // Mute
+
+  &.tag,
+  &.keyword {
+    color: $cA;
+  }
+
+  &.tag {
+    color: $cA-7;
+  }
+
+  &.value,
+  &.string,
+  &.number,
+  &.attr-value,
+  &.boolean,
+  &.regex {
+    color: $cB;
+  }
+
+  &.function,
+  &.attr-name {
+    color: $cA-3;
+  }
+
+  &.punctuation,
+  &.operator {
+    color: $cM;
+  }
+}

_sass/2017/style.scss

@@ -3,14 +3,15 @@ $column: 400px;
 
 $system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 $body-font: $system-font;
+$heading-font: 'Helvetica Neue', $system-font;
 $monospace-font: 'fira mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
 
 $body-bg: #f1f3f5;
 $gray-bg: #fcfcfc;
 $gray-text: #678;
-$text-color: #333;
+$text-color: #345;
-$baseA-400: #53a;
+$baseA-400: #6d47e2; // indigo
-$baseB-400: #35a;
+$baseB-400: #35a; // blue
 $baseB-600: adjust-color($baseB-400, $lightness: 20%, $hue: -20deg);
 $line-color: rgba(50, 80, 150, 0.05);
 $dark-line-color: rgba(50, 80, 150, 0.14);

sass.md

@@ -126,12 +126,6 @@ compliment($color)    // like adjust-hue(_, 180deg)
 invert($color)
 ```
 
-```scss
-adjust-hue($color, 15deg)
-compliment($color)    // like adjust-hue(_, 180deg)
-invert($color)
-```
-
 ```scss
 fade-in($color, .5)   // aka opacify()
 fade-out($color, .5)  // aka transparentize() - halves the opacity