From 3ee113d05ebf3cc2972f4cd8e1d2d88c621102ac Mon Sep 17 00:00:00 2001 From: Jake G <106644+Jieiku@users.noreply.github.com> Date: Mon, 15 May 2023 07:06:04 -0700 Subject: [PATCH] sass 'use', netlify CSP, css syntax, min_version (#24) * sass '@use', netlify CSP, css syntax, min_version * Different Syntax Theme --- config.toml | 1 + netlify.toml | 2 +- sass/_content.scss | 13 +- sass/_document.scss | 18 ++ sass/_navigation.scss | 3 +- sass/_syntax-charcoal.scss | 162 +++++++++++ sass/_syntax.scss | 551 +++++++++++++++++++++++++++++++++++++ sass/_variables.scss | 13 + sass/book.scss | 45 +-- theme.toml | 2 +- 10 files changed, 764 insertions(+), 46 deletions(-) create mode 100644 sass/_document.scss create mode 100644 sass/_syntax-charcoal.scss create mode 100644 sass/_syntax.scss create mode 100644 sass/_variables.scss diff --git a/config.toml b/config.toml index ee5caea..5ec8adf 100644 --- a/config.toml +++ b/config.toml @@ -6,6 +6,7 @@ build_search_index = true [markdown] highlight_code = true +highlight_theme = "css" [extra] book_number_chapters = true diff --git a/netlify.toml b/netlify.toml index da3ec95..0eee2fa 100644 --- a/netlify.toml +++ b/netlify.toml @@ -15,4 +15,4 @@ X-XSS-Protection = "1; mode=block" Referrer-Policy = "strict-origin-when-cross-origin" Strict-Transport-Security = "max-age=63072000; includeSubdomains" - Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;" + Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' i.imgur.com data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;" diff --git a/sass/_content.scss b/sass/_content.scss index 244b215..b1e5ca7 100644 --- a/sass/_content.scss +++ b/sass/_content.scss @@ -1,6 +1,7 @@ +@use "variables"; .page { position: absolute; - width: calc(100% - #{$sidebar-width}); + width: calc(100% - #{variables.$sidebar-width}); height: 100%; overflow-y: auto; color: #000; @@ -133,7 +134,7 @@ } .previous { - left: $sidebar-width; + left: variables.$sidebar-width; float: left; transition: left 0.5s; } @@ -144,7 +145,7 @@ float: right; } - @include max-screen(1250px) { + @include variables.max-screen(1250px) { .previous, .next { position: static; top: auto; @@ -159,9 +160,9 @@ } } -@include min-screen(600px) { +@include variables.min-screen(600px) { .page { - left: $sidebar-width; + left: variables.$sidebar-width; } } @@ -174,7 +175,7 @@ } } -@include max-screen(600px) { +@include variables.max-screen(600px) { .page { width: 100%; left: calc(100% - 100px); diff --git a/sass/_document.scss b/sass/_document.scss new file mode 100644 index 0000000..a54f67f --- /dev/null +++ b/sass/_document.scss @@ -0,0 +1,18 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body, html { + height: 100%; +} + +body { + text-rendering: optimizeLegibility; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + letter-spacing: 0.2px; +} diff --git a/sass/_navigation.scss b/sass/_navigation.scss index 590da23..fcaa7b3 100644 --- a/sass/_navigation.scss +++ b/sass/_navigation.scss @@ -1,3 +1,4 @@ +@use "variables"; .menu { height: 100%; position: absolute; @@ -43,7 +44,7 @@ width: 0; } -@include max-screen(600px) { +@include variables.max-screen(600px) { .menu { width: calc(100% - 100px); z-index: 1; diff --git a/sass/_syntax-charcoal.scss b/sass/_syntax-charcoal.scss new file mode 100644 index 0000000..2073236 --- /dev/null +++ b/sass/_syntax-charcoal.scss @@ -0,0 +1,162 @@ +@mixin dark { + .z-code { + color: #cccece; + background-color: #191919; + } + .z-comment, .z-punctuation.z-definition.z-comment { + color: #7e8384; + } + .z-variable { + color: #cccece; + } + .z-keyword, .z-storage.z-type, .z-storage.z-modifier { + color: #c594c5; + } + .z-keyword.z-operator, .z-constant.z-other.z-color, .z-punctuation, .z-meta.z-tag, .z-punctuation.z-definition.z-tag, .z-punctuation.z-separator.z-inheritance.z-php, .z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin.z-html, .z-punctuation.z-definition.z-tag.z-end.z-html, .z-punctuation.z-section.z-embedded, .z-keyword.z-other.z-template, .z-keyword.z-other.z-substitution { + color: #5fb3b3; + } + .z-entity.z-name.z-tag, .z-meta.z-tag.z-sgml, .z-markup.z-deleted.z-git_gutter { + color: #ff7b84; + } + .z-entity.z-name.z-function, .z-meta.z-function-call, .z-variable.z-function, .z-support.z-function, .z-keyword.z-other.z-special-method, .z-meta.z-block-level { + color: #78aade; + } + .z-support.z-other.z-variable, .z-string.z-other.z-link { + color: #fa7e81; + } + .z-constant.z-numeric, .z-constant.z-language, .z-support.z-constant, .z-constant.z-character, .z-variable.z-parameter, .z-keyword.z-other.z-unit { + color: #f99157; + } + .z-string, .z-constant.z-other.z-symbol, .z-constant.z-other.z-key, .z-entity.z-other.z-inherited-class, .z-markup.z-heading, .z-markup.z-inserted.z-git_gutter, .z-meta.z-group.z-braces.z-curly .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js { + color: #99c794; + } + .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class, .z-support.z-type, .z-support.z-class, .z-support.z-orther.z-namespace.z-use.z-php, .z-meta.z-use.z-php, .z-support.z-other.z-namespace.z-php, .z-markup.z-changed.z-git_gutter { + color: #fac863; + } + .z-entity.z-name.z-module.z-js, .z-variable.z-import.z-parameter.z-js, .z-variable.z-other.z-class.z-js { + color: #fe7d83; + } + .z-variable.z-language { + color: #fe7d83; + } + .z-entity.z-name.z-method.z-js { + color: #d8dee9; + } + .z-meta.z-class-method.z-js .z-entity.z-name.z-function.z-js, .z-variable.z-function.z-constructor { + color: #d8dee9; + } + .z-entity.z-other.z-attribute-name { + color: #cd91c4; + } + .z-markup.z-inserted { + color: #99c794; + } + .z-markup.z-deleted { + color: #fe7d83; + } + .z-markup.z-changed { + color: #cd91c4; + } + .z-string.z-regexp { + color: #5fb3b3; + } + .z-constant.z-character.z-escape { + color: #5fb3b3; + } + .z-*url*, .z-*link*, .z-*uri* { + text-decoration: underline; + } + .z-constant.z-numeric.z-line-number.z-find-in-files { + color: #cf9a87; + } + .z-entity.z-name.z-filename.z-find-in-files { + color: #99c794; + } + .z-tag.z-decorator.z-js .z-entity.z-name.z-tag.z-js, .z-tag.z-decorator.z-js .z-punctuation.z-definition.z-tag.z-js { + color: #78aade; + } + .z-source.z-js .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js { + color: #fe7d83; + } +} +@mixin light { + .z-code { + color: #727373; + background-color: #ffffff; + } + .z-comment, .z-punctuation.z-definition.z-comment { + color: #5f6364; + } + .z-variable { + color: #727373; + } + .z-keyword, .z-storage.z-type, .z-storage.z-modifier { + color: #916392; + } + .z-keyword.z-operator, .z-constant.z-other.z-color, .z-punctuation, .z-meta.z-tag, .z-punctuation.z-definition.z-tag, .z-punctuation.z-separator.z-inheritance.z-php, .z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin.z-html, .z-punctuation.z-definition.z-tag.z-end.z-html, .z-punctuation.z-section.z-embedded, .z-keyword.z-other.z-template, .z-keyword.z-other.z-substitution { + color: #237e7f; + } + .z-entity.z-name.z-tag, .z-meta.z-tag.z-sgml, .z-markup.z-deleted.z-git_gutter { + color: #ca4251; + } + .z-entity.z-name.z-function, .z-meta.z-function-call, .z-variable.z-function, .z-support.z-function, .z-keyword.z-other.z-special-method, .z-meta.z-block-level { + color: #4076a7; + } + .z-support.z-other.z-variable, .z-string.z-other.z-link { + color: #c14c52; + } + .z-constant.z-numeric, .z-constant.z-language, .z-support.z-constant, .z-constant.z-character, .z-variable.z-parameter, .z-keyword.z-other.z-unit { + color: #b75922; + } + .z-string, .z-constant.z-other.z-symbol, .z-constant.z-other.z-key, .z-entity.z-other.z-inherited-class, .z-markup.z-heading, .z-markup.z-inserted.z-git_gutter, .z-meta.z-group.z-braces.z-curly .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js { + color: #517c4e; + } + .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class, .z-support.z-type, .z-support.z-class, .z-support.z-orther.z-namespace.z-use.z-php, .z-meta.z-use.z-php, .z-support.z-other.z-namespace.z-php, .z-markup.z-changed.z-git_gutter { + color: #926c00; + } + .z-entity.z-name.z-module.z-js, .z-variable.z-import.z-parameter.z-js, .z-variable.z-other.z-class.z-js { + color: #cb414d; + } + .z-variable.z-language { + color: #cb414d; + } + .z-entity.z-name.z-method.z-js { + color: #6c727c; + } + .z-meta.z-class-method.z-js .z-entity.z-name.z-function.z-js, .z-variable.z-function.z-constructor { + color: #6c727c; + } + .z-entity.z-other.z-attribute-name { + color: #996091; + } + .z-markup.z-inserted { + color: #517c4e; + } + .z-markup.z-deleted { + color: #cb414d; + } + .z-markup.z-changed { + color: #996091; + } + .z-string.z-regexp { + color: #237e7f; + } + .z-constant.z-character.z-escape { + color: #237e7f; + } + .z-*url*, .z-*link*, .z-*uri* { + text-decoration: underline; + } + .z-constant.z-numeric.z-line-number.z-find-in-files { + color: #976756; + } + .z-entity.z-name.z-filename.z-find-in-files { + color: #517c4e; + } + .z-tag.z-decorator.z-js .z-entity.z-name.z-tag.z-js, .z-tag.z-decorator.z-js .z-punctuation.z-definition.z-tag.z-js { + color: #4076a7; + } + .z-source.z-js .z-constant.z-other.z-object.z-key.z-js .z-string.z-unquoted.z-label.z-js { + color: #cb414d; + } +} diff --git a/sass/_syntax.scss b/sass/_syntax.scss new file mode 100644 index 0000000..a3007f4 --- /dev/null +++ b/sass/_syntax.scss @@ -0,0 +1,551 @@ +@mixin dark { + .z-code { + color: #bfbab0; + background-color: #191919; + } + .z-comment, .z-punctuation.z-definition.z-comment { + color: #87929f; + font-style: italic; + } + .z-variable { + color: #bfbab0; + } + .z-string, .z-constant.z-other.z-symbol { + color: #c2d94c; + } + .z-constant.z-numeric { + color: #f29718; + } + .z-string.z-regexp, .z-constant.z-character.z-escape { + color: #95e6cb; + } + .z-constant.z-language { + color: #f29718; + } + .z-constant.z-character, .z-constant.z-other { + color: #f29718; + } + .z-variable.z-member { + color: #fe7d83; + } + .z-keyword, .z-keyword.z-operator.z-word { + color: #00bbff; + } + .z-keyword.z-operator { + color: #f29668; + } + .z-punctuation.z-separator, .z-punctuation.z-terminator { + color: #bfbab0; + } + .z-punctuation.z-section { + color: #bfbab0; + } + .z-punctuation.z-accessor { + color: #f29668; + } + .z-punctuation.z-definition.z-annotation { + color: #bfbab0; + } + .z-variable.z-other.z-dollar.z-only.z-js, .z-variable.z-other.z-object.z-dollar.z-only.z-js, .z-variable.z-type.z-dollar.z-only.z-js, .z-support.z-class.z-dollar.z-only.z-js { + color: #e6b673; + } + .z-storage { + color: #00bbff; + } + .z-storage.z-type { + color: #00bbff; + } + .z-entity.z-name.z-function { + color: #ffb454; + } + .z-entity.z-name, .z-entity.z-name.z-tag, .z-entity.z-name.z-label { + color: #59c2ff; + } + .z-entity.z-other.z-inherited-class { + color: #59c2ff; + text-decoration: underline; + } + .z-variable.z-parameter { + color: #f29718; + } + .z-variable.z-language { + color: #39bae6; + font-style: italic; + } + .z-entity.z-name.z-tag, .z-meta.z-tag.z-sgml { + color: #39bae6; + } + .z-punctuation.z-definition.z-tag.z-end, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag { + color: #39bae6; + } + .z-entity.z-other.z-attribute-name { + color: #ffb454; + } + .z-variable.z-function, .z-variable.z-annotation { + color: #ffb454; + } + .z-support.z-function, .z-support.z-macro { + color: #fe7d83; + } + .z-support.z-constant { + color: #f29668; + font-style: italic; + } + .z-support.z-type, .z-support.z-class { + color: #39bae6; + font-style: italic; + } + .z-invalid { + color: #ff7c6d; + } + .z-invalid.z-deprecated { + color: #ffffff; + background-color: #00bbff; + } + .z-meta.z-diff, .z-meta.z-diff.z-header { + color: #c594c5; + } + .z-source.z-ruby .z-variable.z-other.z-readwrite { + color: #ffb454; + } + .z-source.z-css .z-entity.z-name.z-tag, .z-source.z-sass .z-entity.z-name.z-tag, .z-source.z-scss .z-entity.z-name.z-tag, .z-source.z-less .z-entity.z-name.z-tag, .z-source.z-stylus .z-entity.z-name.z-tag { + color: #59c2ff; + } + .z-source.z-css .z-support.z-type, .z-source.z-sass .z-support.z-type, .z-source.z-scss .z-support.z-type, .z-source.z-less .z-support.z-type, .z-source.z-stylus .z-support.z-type { + color: #798491; + } + .z-support.z-type.z-property-name { + color: #39bae6; + } + .z-constant.z-numeric.z-line-number.z-find-in-files { + color: #798491; + } + .z-constant.z-numeric.z-line-number.z-match { + color: #00bbff; + } + .z-entity.z-name.z-filename.z-find-in-files { + color: #c2d94c; + } + .z-message.z-error { + color: #ff7c6d; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-source.z-json .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #39bae6; + } + .z-markup.z-heading { + color: #00bbff; + font-weight: bold; + } + .z-string.z-other.z-link, .z-markup.z-underline.z-link { + color: #95e6cb; + text-decoration: underline; + font-style: italic; + } + .z-punctuation.z-definition.z-image { + color: #ffb454; + } + .z-markup.z-italic { + color: #fe7d83; + font-style: italic; + } + .z-markup.z-bold { + color: #fe7d83; + font-weight: bold; + } + .z-markup.z-italic .z-markup.z-bold, .z-markup.z-bold .z-markup.z-italic { + font-weight: bold; + font-style: italic; + } + .z-markup.z-raw { + background-color: #bfbab0; + } + .z-markup.z-raw.z-inline { + background-color: #bfbab0; + } + .z-meta.z-separator { + color: #798491; + background-color: #bfbab0; + font-weight: bold; + } + .z-markup.z-quote { + color: #f29718; + font-style: italic; + } + .z-markup.z-list.z-numbered.z-bullet, .z-markup.z-list .z-punctuation.z-definition.z-list_item { + color: #95e6cb; + } + .z-markup.z-inserted { + color: #c2d94c; + } + .z-markup.z-changed { + color: #39bae6; + } + .z-markup.z-deleted { + color: #fe7d83; + } + .z-markup.z-strike { + color: #e6b673; + } + .z-markup.z-table { + color: #39bae6; + background-color: #bfbab0; + } + .z-text.z-html.z-markdown .z-markup.z-raw.z-inline { + color: #f29668; + } + .z-text.z-html.z-markdown .z-meta.z-dummy.z-line-break { + color: #798491; + } + .z-markup.z-raw.z-block.z-fenced.z-markdown { + color: #bfbab0; + background-color: #bfbab0; + } + .z-punctuation.z-definition.z-fenced.z-markdown, .z-variable.z-language.z-fenced.z-markdown { + color: #798491; + background-color: #bfbab0; + } + .z-variable.z-language.z-fenced.z-markdown { + color: #798491; + } + .z-markup.z-inserted.z-git_gutter { + color: #c2d94c; + } + .z-markup.z-changed.z-git_gutter { + color: #39bae6; + } + .z-markup.z-deleted.z-git_gutter { + color: #ff7c6d; + } + .z-markup.z-ignored.z-git_gutter { + color: #20272c; + } + .z-markup.z-untracked.z-git_gutter { + color: #20272c; + } + .z-gutter_color { + color: #ffffff; + } + .z-acejump.z-label.z-blue { + color: #ffffff; + background-color: #39bae6; + } + .z-acejump.z-label.z-green { + color: #ffffff; + background-color: #c2d94c; + } + .z-acejump.z-label.z-orange { + color: #ffffff; + background-color: #00bbff; + } + .z-acejump.z-label.z-purple { + color: #ffffff; + background-color: #fe7d83; + } + .z-sublimelinter.z-mark.z-warning { + color: #39bae6; + } + .z-sublimelinter.z-gutter-mark { + color: #ffffff; + } + .z-sublimelinter.z-mark.z-error { + color: #ff7c6d; + } +} +@mixin light { + .z-code { + color: #50565a; + background-color: #fafafa; + } + .z-comment, .z-punctuation.z-definition.z-comment { + color: #676c72; + font-style: italic; + } + .z-variable { + color: #50565a; + } + .z-string, .z-constant.z-other.z-symbol { + color: #497700; + } + .z-constant.z-numeric { + color: #b04e00; + } + .z-string.z-regexp, .z-constant.z-character.z-escape { + color: #007b59; + } + .z-constant.z-language { + color: #b04e00; + } + .z-constant.z-character, .z-constant.z-other { + color: #b04e00; + } + .z-variable.z-member { + color: #c33947; + } + .z-keyword, .z-keyword.z-operator.z-word { + color: #0062e8; + } + .z-keyword.z-operator { + color: #a4552c; + } + .z-punctuation.z-separator, .z-punctuation.z-terminator { + color: #50565a; + } + .z-punctuation.z-section { + color: #50565a; + } + .z-punctuation.z-accessor { + color: #a4552c; + } + .z-punctuation.z-definition.z-annotation { + color: #50565a; + } + .z-variable.z-other.z-dollar.z-only.z-js, .z-variable.z-other.z-object.z-dollar.z-only.z-js, .z-variable.z-type.z-dollar.z-only.z-js, .z-support.z-class.z-dollar.z-only.z-js { + color: #8b6426; + } + .z-storage { + color: #0062e8; + } + .z-storage.z-type { + color: #0062e8; + } + .z-entity.z-name.z-function { + color: #a45600; + } + .z-entity.z-name, .z-entity.z-name.z-tag, .z-entity.z-name.z-label { + color: #0070b3; + } + .z-entity.z-other.z-inherited-class { + color: #0070b3; + text-decoration: underline; + } + .z-variable.z-parameter { + color: #b04e00; + } + .z-variable.z-language { + color: #007492; + font-style: italic; + } + .z-entity.z-name.z-tag, .z-meta.z-tag.z-sgml { + color: #007492; + } + .z-punctuation.z-definition.z-tag.z-end, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag { + color: #007492; + } + .z-entity.z-other.z-attribute-name { + color: #a45600; + } + .z-variable.z-function, .z-variable.z-annotation { + color: #a45600; + } + .z-support.z-function, .z-support.z-macro { + color: #b94046; + } + .z-support.z-constant { + color: #a4552c; + font-style: italic; + } + .z-support.z-type, .z-support.z-class { + color: #007492; + font-style: italic; + } + .z-invalid { + color: #da0001; + } + .z-invalid.z-deprecated { + color: #ffffff; + background-color: #0062e8; + } + .z-source.z-ruby .z-variable.z-other.z-readwrite { + color: #a45600; + } + .z-source.z-css .z-entity.z-name.z-tag, .z-source.z-sass .z-entity.z-name.z-tag, .z-source.z-scss .z-entity.z-name.z-tag, .z-source.z-less .z-entity.z-name.z-tag, .z-source.z-stylus .z-entity.z-name.z-tag { + color: #0070b3; + } + .z-source.z-css .z-support.z-type, .z-source.z-sass .z-support.z-type, .z-source.z-scss .z-support.z-type, .z-source.z-less .z-support.z-type, .z-source.z-stylus .z-support.z-type { + color: #676c72; + } + .z-support.z-type.z-property-name { + color: #007492; + } + .z-constant.z-numeric.z-line-number.z-find-in-files { + color: #676c72; + } + .z-constant.z-numeric.z-line-number.z-match { + color: #0062e8; + } + .z-entity.z-name.z-filename.z-find-in-files { + color: #497700; + } + .z-message.z-error { + color: #da0001; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-source.z-json .z-meta.z-structure.z-dictionary.z-json .z-string.z-quoted.z-double.z-json, .z-source.z-json .z-meta.z-structure.z-dictionary.z-json .z-punctuation.z-definition.z-string { + color: #007492; + } + .z-markup.z-heading { + color: #0062e8; + font-weight: bold; + } + .z-string.z-other.z-link, .z-markup.z-underline.z-link { + color: #007b59; + text-decoration: underline; + font-style: italic; + } + .z-punctuation.z-definition.z-image { + color: #a45600; + } + .z-markup.z-italic { + color: #b94046; + font-style: italic; + } + .z-markup.z-bold { + color: #b94046; + font-weight: bold; + } + .z-markup.z-italic .z-markup.z-bold, .z-markup.z-bold .z-markup.z-italic { + font-weight: bold; + font-style: italic; + } + .z-markup.z-raw { + background-color: #50565a; + } + .z-markup.z-raw.z-inline { + background-color: #50565a; + } + .z-meta.z-separator { + color: #676c72; + background-color: #50565a; + font-weight: bold; + } + .z-markup.z-quote { + color: #b04e00; + font-style: italic; + } + .z-markup.z-list.z-numbered.z-bullet, .z-markup.z-list .z-punctuation.z-definition.z-list_item { + color: #007b59; + } + .z-markup.z-inserted { + color: #497700; + } + .z-markup.z-changed { + color: #007492; + } + .z-markup.z-deleted { + color: #b94046; + } + .z-markup.z-strike { + color: #8b6426; + } + .z-markup.z-table { + color: #007492; + background-color: #50565a; + } + .z-text.z-html.z-markdown .z-markup.z-raw.z-inline { + color: #a4552c; + } + .z-text.z-html.z-markdown .z-meta.z-dummy.z-line-break { + color: #676c72; + } + .z-markup.z-raw.z-block.z-fenced.z-markdown { + color: #50565a; + background-color: #50565a; + } + .z-punctuation.z-definition.z-fenced.z-markdown, .z-variable.z-language.z-fenced.z-markdown { + color: #676c72; + background-color: #50565a; + } + .z-variable.z-language.z-fenced.z-markdown { + color: #676c72; + } + .z-markup.z-inserted.z-git_gutter { + color: #497700; + } + .z-markup.z-changed.z-git_gutter { + color: #007492; + } + .z-markup.z-deleted.z-git_gutter { + color: #da0001; + } + .z-markup.z-ignored.z-git_gutter { + color: #696b6c; + } + .z-markup.z-untracked.z-git_gutter { + color: #696b6c; + } + .z-gutter_color { + color: #ffffff; + } + .z-acejump.z-label.z-blue { + color: #ffffff; + background-color: #007492; + } + .z-acejump.z-label.z-green { + color: #ffffff; + background-color: #497700; + } + .z-acejump.z-label.z-orange { + color: #ffffff; + background-color: #0062e8; + } + .z-acejump.z-label.z-purple { + color: #ffffff; + background-color: #b94046; + } + .z-sublimelinter.z-mark.z-warning { + color: #007492; + } + .z-sublimelinter.z-gutter-mark { + color: #ffffff; + } + .z-sublimelinter.z-mark.z-error { + color: #da0001; + } +} diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..4114b0a --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,13 @@ +@mixin min-screen($min-width: $body-width) { + @media screen and (min-width: $min-width) { + @content; + } +} + +@mixin max-screen($max-width: $body-width) { + @media screen and (max-width: $max-width) { + @content; + } +} + +$sidebar-width: 300px; diff --git a/sass/book.scss b/sass/book.scss index 4454e2d..df1c5f7 100644 --- a/sass/book.scss +++ b/sass/book.scss @@ -1,41 +1,12 @@ @charset "utf-8"; -@import "normalize"; +@use "normalize"; -* { - box-sizing: border-box; -} +@use "variables"; +@use "document"; +@use "navigation"; +@use "content"; +@use "header"; -html { - font-size: 62.5%; -} - -body, html { - height: 100%; -} - -body { - text-rendering: optimizeLegibility; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - letter-spacing: 0.2px; -} - - -@mixin min-screen($min-width: $body-width) { - @media screen and (min-width: $min-width) { - @content; - } -} - -@mixin max-screen($max-width: $body-width) { - @media screen and (max-width: $max-width) { - @content; - } -} - -$sidebar-width: 300px; - -@import "navigation"; -@import "content"; -@import "header"; +@use "syntax" as syntax; +@include syntax.light; diff --git a/theme.toml b/theme.toml index 692b67a..8b42433 100644 --- a/theme.toml +++ b/theme.toml @@ -2,7 +2,7 @@ name = "book" description = "A book theme inspired from GitBook/mdBook" license = "MIT" homepage = "https://github.com/getzola/book" -min_version = "0.16.0" +min_version = "0.17.0" demo = "https://zola-book.netlify.app" [extra]