From f71423d8942af8290884db105efb9b2873302dbd Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Thu, 19 Oct 2017 14:32:46 +0200 Subject: [PATCH 1/2] Implement main theme CSS class modules Created the main theme module files as documented in the official style guide(1) and CSS classes reference(2) and according to the Nord Style Guideslines(3). References: (1) http://highlightjs.readthedocs.io/en/latest/style-guide.html (2) http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html (3) https://github.com/arcticicestudio/nord GH-1 --- src/modules/_base.scss | 11 ++++++ src/modules/_css.scss | 20 +++++++++++ src/modules/_diff.scss | 7 ++++ src/modules/_general.scss | 42 +++++++++++++++++++++++ src/modules/_markup.scss | 29 ++++++++++++++++ src/modules/_meta.scss | 16 +++++++++ src/modules/_tags_attributes_configs.scss | 27 +++++++++++++++ src/modules/_templates.scss | 7 ++++ src/nord.scss | 29 ++++++++++++++++ 9 files changed, 188 insertions(+) create mode 100644 src/modules/_base.scss create mode 100644 src/modules/_css.scss create mode 100644 src/modules/_diff.scss create mode 100644 src/modules/_general.scss create mode 100644 src/modules/_markup.scss create mode 100644 src/modules/_meta.scss create mode 100644 src/modules/_tags_attributes_configs.scss create mode 100644 src/modules/_templates.scss create mode 100644 src/nord.scss diff --git a/src/modules/_base.scss b/src/modules/_base.scss new file mode 100644 index 0000000..cca9668 --- /dev/null +++ b/src/modules/_base.scss @@ -0,0 +1,11 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: $nord0; +} + +.hljs, +.hljs-subst { + color: $nord4; +} diff --git a/src/modules/_css.scss b/src/modules/_css.scss new file mode 100644 index 0000000..558eedb --- /dev/null +++ b/src/modules/_css.scss @@ -0,0 +1,20 @@ +.hljs-selector-tag { + color: $nord9; +} + +.hljs-selector-id { + color: $nord7; + font-weight: bold; +} + +.hljs-selector-class { + color: $nord7; +} + +.hljs-selector-attr { + color: $nord7; +} + +.hljs-selector-pseudo { + color: $nord8; +} diff --git a/src/modules/_diff.scss b/src/modules/_diff.scss new file mode 100644 index 0000000..6a4e321 --- /dev/null +++ b/src/modules/_diff.scss @@ -0,0 +1,7 @@ +.hljs-addition { + background-color: transparentize($nord14, 0.5); +} + +.hljs-deletion { + background-color: transparentize($nord11, 0.5); +} diff --git a/src/modules/_general.scss b/src/modules/_general.scss new file mode 100644 index 0000000..6584e06 --- /dev/null +++ b/src/modules/_general.scss @@ -0,0 +1,42 @@ +.hljs-built_in, +.hljs-type { + color: $nord7; +} + +.hljs-class { + color: $nord7; +} + +.hljs-function { + color: $nord8; + + > .hljs-title { + color: $nord8; + } +} + +.hljs-keyword, +.hljs-literal, +.hljs-symbol { + color: $nord9; +} + +.hljs-number { + color: $nord15; +} + +.hljs-regexp { + color: $nord13; +} + +.hljs-string { + color: $nord14; +} + +.hljs-title { + color: $nord7; +} + +.hljs-params { + color: $nord4; +} diff --git a/src/modules/_markup.scss b/src/modules/_markup.scss new file mode 100644 index 0000000..efae4c4 --- /dev/null +++ b/src/modules/_markup.scss @@ -0,0 +1,29 @@ +.hljs-bullet { + color: $nord9; +} + +.hljs-code { + color: $nord7; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-formula { + color: $nord7; +} + +.hljs-strong { + font-weight: bold; +} + +.hljs-link { + &:hover { + text-decoration: underline; + } +} + +.hljs-quote { + color: $nord3; +} diff --git a/src/modules/_meta.scss b/src/modules/_meta.scss new file mode 100644 index 0000000..24663ce --- /dev/null +++ b/src/modules/_meta.scss @@ -0,0 +1,16 @@ +.hljs-comment { + color: $nord3; +} + +.hljs-doctag { + color: $nord7; +} + +.hljs-meta, +.hljs-meta-keyword { + color: $nord10; +} + +.hljs-meta-string { + color: $nord14; +} diff --git a/src/modules/_tags_attributes_configs.scss b/src/modules/_tags_attributes_configs.scss new file mode 100644 index 0000000..d7d857c --- /dev/null +++ b/src/modules/_tags_attributes_configs.scss @@ -0,0 +1,27 @@ +.hljs-attr { + color: $nord7; +} + +.hljs-attribute { + color: $nord4; +} + +.hljs-builtin-name { + color: $nord9; +} + +.hljs-name { + color: $nord9; +} + +.hljs-section { + color: $nord8; +} + +.hljs-tag { + color: $nord9; +} + +.hljs-variable { + color: $nord4; +} diff --git a/src/modules/_templates.scss b/src/modules/_templates.scss new file mode 100644 index 0000000..a58b8f5 --- /dev/null +++ b/src/modules/_templates.scss @@ -0,0 +1,7 @@ +.hljs-template-variable { + color: $nord4; +} + +.hljs-template-tag { + color: $nord10; +} diff --git a/src/nord.scss b/src/nord.scss new file mode 100644 index 0000000..58cb2d1 --- /dev/null +++ b/src/nord.scss @@ -0,0 +1,29 @@ +/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +title Nord highlight.js + +project nord-highlightjs + +version + +repository https://github.com/arcticicestudio/nord-highlightjs + +author Arctic Ice Studio + +email development@arcticicestudio.com + +copyright Copyright (C) 2017 + +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + +[References] +Nord + https://github.com/arcticicestudio/nord +highlight.js + http://highlightjs.readthedocs.io/en/latest/style-guide.html + http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html +*/ + +@import "../node_modules/nord/src/sass/nord"; + +@import "modules/base"; +@import "modules/css"; +@import "modules/diff"; +@import "modules/general"; +@import "modules/markup"; +@import "modules/meta"; +@import "modules/_tags_attributes_configs"; +@import "modules/templates"; From 884c26f96cfb61d0ce38c985d423d3ccd60f1f01 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Thu, 19 Oct 2017 14:56:26 +0200 Subject: [PATCH 2/2] Add README installation- and contribution secions GH-1 --- README.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fb8ea29..5136c4c 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,28 @@ Based on the Nord color pa --- +## Getting started + +### Installation + +If your're using Git you can clone the repository to install the latest version: + +```sh +git clone https://github.com/arcticicestudio/nord-highlightjs +``` + +Otherwise download [the latest stable version][nord-latest-zip] or [`develop` branch][nord-develop-zip] as ZIP archive. + +### Usage + +Make sure to read the official documentation on [how to use highlight.js][hljs-docs-usage]. + +Copy the [`nord.css`][nord-dist-css] file to your desired directory and include the theme as stylesheet: + +```html + +``` + ### Contribution Please report issues/bugs, feature requests and suggestions for improvements to the [issue tracker](https://github.com/arcticicestudio/nord-highlightjs/issues). @@ -24,4 +46,4 @@ Please report issues/bugs, feature requests and suggestions for improvements to [hljs-docs-usage]: https://highlightjs.org/usage [nord-develop-zip]: https://github.com/arcticicestudio/nord-highlightjs/archive/develop.zip [nord-dist-css]: https://github.com/arcticicestudio/nord-highlightjs/blob/develop/dist/nord.css -[nord-latest-zip]: https://github.com/arcticicestudio/nord-highlightjs/archive/v0.o.0.zip +[nord-latest-zip]: https://github.com/arcticicestudio/nord-highlightjs/archive/v0.0.0.zip