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 @@
-
+
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