diff --git a/package.json b/package.json index 0cb03618..c902ea46 100644 --- a/package.json +++ b/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", diff --git a/src/styles/_code.scss b/src/styles/_code.scss index 510f2458..73aa4e42 100644 --- a/src/styles/_code.scss +++ b/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'; diff --git a/src/styles/_syntax.scss b/src/styles/_syntax.scss index 4f579e18..485bcaf9 100644 --- a/src/styles/_syntax.scss +++ b/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; -}