From caac5559cf90633cf189964b581c1e1dfcfd1a15 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Thu, 24 Aug 2017 23:05:09 +0800
Subject: [PATCH] Update color theme

---
 _includes/2017/head.html          |  2 +-
 _sass/2017/markdown/headings.scss | 45 ++++++++++++++++++++++++++++++-
 _sass/2017/style.scss             |  7 ++---
 sass.md                           |  6 -----
 4 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/_includes/2017/head.html b/_includes/2017/head.html
index aa4a893d8..1147e58b3 100644
--- a/_includes/2017/head.html
+++ b/_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 -->
diff --git a/_sass/2017/markdown/headings.scss b/_sass/2017/markdown/headings.scss
index 865827bdc..8bef249a4 100644
--- a/_sass/2017/markdown/headings.scss
+++ b/_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;
+  }
+}
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index cea083722..da3065640 100644
--- a/_sass/2017/style.scss
+++ b/_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;
-$baseA-400: #53a;
-$baseB-400: #35a;
+$text-color: #345;
+$baseA-400: #6d47e2; // indigo
+$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);
diff --git a/sass.md b/sass.md
index 1c1f5854c..48ce099f0 100644
--- a/sass.md
+++ b/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