syntax tweaks

package.json

@@ -44,6 +44,7 @@
     "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
     "node-sass": "^4.9.2",
+    "nord": "^0.2.1",
     "prismjs": "^1.15.0",
     "qrious": "^4.0.2",
     "react": "^16.4.1",

src/styles/_code.scss

@@ -52,12 +52,10 @@ pre {
     }
 
     code {
+        padding: 0;
         white-space: pre;
-        overflow: auto;
         display: block;
         color: inherit;
-        background-color: transparent;
-        border-radius: 0;
         overflow-wrap: normal;
         word-wrap: normal;
         word-break: normal;
@@ -77,9 +75,4 @@ pre > code.language-shell {
     }
 }
 
-:not(pre) > code[class*='language-'] {
-    background: rgba($code-bg, .05);
-    color: $text-color;
-}
-
 @import 'syntax';

src/styles/_syntax.scss

@@ -1,13 +1,17 @@
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
+@import 'nord/src/sass/nord';
 
-code[class*='language-'],
+/* Code blocks */
 pre[class*='language-'] {
-    tab-size: 4;
-    hyphens: none;
+    background: $nord0;
+    color: $nord4;
+}
+
+pre[class*='language-'],
+code[class*='language-'] {
+    ::-moz-selection,
+    ::selection {
+        background: $nord4;
+    }
 }
 
 /* Inline code */
@@ -15,64 +19,67 @@ pre[class*='language-'] {
     padding: .1em;
     border-radius: .3em;
     white-space: normal;
+    background: $nord4;
+    color: inherit;
 }
 
 .token.comment,
-.token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #999;
+    color: $nord3;
 }
 
 .token.punctuation {
-    color: #ccc;
+    color: $nord9;
 }
 
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-    color: #e2777a;
-}
-
-.token.function-name {
-    color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-    color: #f08d49;
+.namespace {
+    opacity: .7;
 }
 
 .token.property,
-.token.class-name,
+.token.tag,
+.token.boolean,
+.token.number,
 .token.constant,
-.token.symbol {
-    color: #f8c555;
+.token.symbol,
+.token.deleted {
+    color: $nord9;
 }
 
 .token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-    color: #cc99cd;
-}
-
+.token.attr-name,
 .token.string,
 .token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-    color: #7ec699;
+.token.builtin,
+.token.inserted {
+    color: $nord7;
 }
 
 .token.operator,
 .token.entity,
-.token.url {
-    color: #67cdcc;
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: $nord7;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: $nord14;
+}
+
+.token.function,
+.token.class-name {
+    color: $nord12;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+    color: $nord13;
 }
 
 .token.important,
@@ -87,7 +94,3 @@ pre[class*='language-'] {
 .token.entity {
     cursor: help;
 }
-
-.token.inserted {
-    color: green;
-}