From cba53a69145580ea948133412f1baefd264b9150 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Mon, 20 May 2019 09:48:57 +0200 Subject: [PATCH 01/13] Make themes more customizable (cherry picked from commit dffb2706a158784e2f3091f895a868e373683bc8) --- .stylelintrc.json | 4 +- _config.yml | 2 +- _includes/head.html | 6 ++- _sass/color_schemes/dark.scss | 1 + _sass/color_schemes/light.scss | 1 + .../modules.scss | 21 +-------- assets/css/just-the-docs-dark.scss | 5 +++ assets/css/just-the-docs-light.scss | 5 +++ assets/css/just-the-docs.scss | 44 ------------------- assets/js/just-the-docs.js | 14 ++++++ docs/configuration.md | 11 ++--- docs/customization.md | 11 ++--- 12 files changed, 44 insertions(+), 81 deletions(-) create mode 100644 _sass/color_schemes/light.scss rename assets/css/dark-mode-preview.scss => _sass/modules.scss (54%) create mode 100644 assets/css/just-the-docs-dark.scss create mode 100644 assets/css/just-the-docs-light.scss delete mode 100644 assets/css/just-the-docs.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index 108fc51..2253e64 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,7 +1,7 @@ { "ignoreFiles" : [ - "assets/css/just-the-docs.scss", - "assets/css/dark-mode-preview.scss", + "assets/css/just-the-docs-light.scss", + "assets/css/just-the-docs-dark.scss", "_sass/vendor/**/*.scss" ], "extends": [ diff --git a/_config.yml b/_config.yml index d12d439..17441c0 100644 --- a/_config.yml +++ b/_config.yml @@ -35,7 +35,7 @@ aux_links: # Footer content appears at the bottom of every page's main content footer_content: "Copyright © 2017-2019 Patrick Marsceill. Distributed by an MIT license." -# Color scheme currently only supports "dark" or nil (default) +# Color scheme currently only supports "dark" or "light"/nil (default) color_scheme: nil # Google Analytics Tracking (optional) diff --git a/_includes/head.html b/_includes/head.html index eae6a5e..f7ab6ed 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,7 +12,11 @@ - + {% assign color_scheme = site.color_scheme %} + {% if color_theme == nil %} + {% assign color_scheme = 'light' %} + {% endif %} + {% if site.ga_tracking != nil %} diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index f0e6505..333c2b1 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -1,3 +1,4 @@ +// override this file to change the dark theme $body-background-color: $grey-dk-300; $sidebar-color: $grey-dk-300; diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss new file mode 100644 index 0000000..e9624b3 --- /dev/null +++ b/_sass/color_schemes/light.scss @@ -0,0 +1 @@ +// override this file to change the light (default) theme \ No newline at end of file diff --git a/assets/css/dark-mode-preview.scss b/_sass/modules.scss similarity index 54% rename from assets/css/dark-mode-preview.scss rename to _sass/modules.scss index 8b77da6..c0b017b 100644 --- a/assets/css/dark-mode-preview.scss +++ b/_sass/modules.scss @@ -1,28 +1,11 @@ ---- -# this ensures Jekyll reads the file to be transformed into CSS later -# only Main files contain this front matter, not partials. ---- - // // Import external dependencies // - @import "./vendor/normalize.scss/normalize.scss"; // -// Import Just the Docs scss -// - -// Support -@import "./support/support"; - -// -// Import custom color scheme scss -// - -@import "./color_schemes/dark.scss"; - // Modules +// @import "./base"; @import "./layout"; @import "./content"; @@ -38,4 +21,4 @@ // // Import custom overrides // -@import "./custom/custom"; +@import "./custom/custom"; \ No newline at end of file diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss new file mode 100644 index 0000000..a19ffc7 --- /dev/null +++ b/assets/css/just-the-docs-dark.scss @@ -0,0 +1,5 @@ +--- +--- +@import "./support/support"; +@import "./color_schemes/dark"; +@import "./modules"; \ No newline at end of file diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss new file mode 100644 index 0000000..c32b314 --- /dev/null +++ b/assets/css/just-the-docs-light.scss @@ -0,0 +1,5 @@ +--- +--- +@import "./support/support"; +@import "./color_schemes/light"; +@import "./modules"; diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss deleted file mode 100644 index 6a2eefa..0000000 --- a/assets/css/just-the-docs.scss +++ /dev/null @@ -1,44 +0,0 @@ ---- -# this ensures Jekyll reads the file to be transformed into CSS later -# only Main files contain this front matter, not partials. ---- - -// -// Import external dependencies -// - -@import "./vendor/normalize.scss/normalize.scss"; - -// -// Import Just the Docs scss -// - -// Support -@import "./support/support"; - -// -// Import custom overrides -// - -@import "./custom/custom"; - -// -// Import custom color scheme scss -// - -{% if site.color_scheme == "dark" %} -@import "./color_schemes/dark.scss"; -{% endif %} - -// Modules -@import "./base"; -@import "./layout"; -@import "./content"; -@import "./navigation"; -@import "./typography"; -@import "./labels"; -@import "./buttons"; -@import "./search"; -@import "./tables"; -@import "./code"; -@import "./utilities/utilities"; diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index aadbf82..c765a9b 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -274,11 +274,25 @@ function initSearch() { } } +// Focus + function pageFocus() { var mainContent = document.querySelector('.js-main-content'); mainContent.focus(); } +// Switch theme + +jtd.getTheme = function() { + var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href'); + return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4); +} + +jtd.setTheme = function(theme) { + var cssFile = document.querySelector('[rel="stylesheet"]'); + cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css'); +} + // Document ready jtd.onReady(function(){ diff --git a/docs/configuration.md b/docs/configuration.md index 14422fd..cb00b1a 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -67,17 +67,14 @@ color_scheme: "dark" See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. diff --git a/docs/customization.md b/docs/customization.md index eccb4bc..6f715bf 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -36,17 +36,14 @@ color_scheme: "dark" ## Specific visual customization From f61b836f6e836595cd3979a5fc22eeedc17b01d8 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Mon, 20 May 2019 10:05:56 +0200 Subject: [PATCH 02/13] Fixed stylesheet link (cherry picked from commit ac42a41ae3e36b002df52882be296c01873c0e5b) --- _includes/head.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index f7ab6ed..e640f97 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,9 +12,10 @@ - {% assign color_scheme = site.color_scheme %} - {% if color_theme == nil %} + {% if site.color_scheme == nil or site.color_scheme == "nil" %} {% assign color_scheme = 'light' %} + {% else %} + {% assign color_scheme = site.color_scheme %} {% endif %} From da50250f47d74350d0cf1bba11aff6fc3cfb3e49 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Mon, 20 May 2019 10:16:30 +0200 Subject: [PATCH 03/13] Fixed custom css (cherry picked from commit 7df9af5ab1f4b7f1c286d176a8b24be9d3ce8063) --- _sass/modules.scss | 7 +------ assets/css/just-the-docs-dark.scss | 3 ++- assets/css/just-the-docs-light.scss | 1 + 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/_sass/modules.scss b/_sass/modules.scss index c0b017b..4b1f129 100644 --- a/_sass/modules.scss +++ b/_sass/modules.scss @@ -16,9 +16,4 @@ @import "./search"; @import "./tables"; @import "./code"; -@import "./utilities/utilities"; - -// -// Import custom overrides -// -@import "./custom/custom"; \ No newline at end of file +@import "./utilities/utilities"; \ No newline at end of file diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss index a19ffc7..8a5b8f7 100644 --- a/assets/css/just-the-docs-dark.scss +++ b/assets/css/just-the-docs-dark.scss @@ -2,4 +2,5 @@ --- @import "./support/support"; @import "./color_schemes/dark"; -@import "./modules"; \ No newline at end of file +@import "./modules"; +@import "./custom/custom"; \ No newline at end of file diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss index c32b314..997198e 100644 --- a/assets/css/just-the-docs-light.scss +++ b/assets/css/just-the-docs-light.scss @@ -3,3 +3,4 @@ @import "./support/support"; @import "./color_schemes/light"; @import "./modules"; +@import "./custom/custom"; From 5f0de692bec814a7c9d4441adc2474ae73080431 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 15 Aug 2019 18:44:10 +0200 Subject: [PATCH 04/13] Fixed css style --- _sass/color_schemes/light.scss | 2 +- _sass/modules.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss index e9624b3..5932f29 100644 --- a/_sass/color_schemes/light.scss +++ b/_sass/color_schemes/light.scss @@ -1 +1 @@ -// override this file to change the light (default) theme \ No newline at end of file +// override this file to change the light (default) theme diff --git a/_sass/modules.scss b/_sass/modules.scss index 4b1f129..dc94a4b 100644 --- a/_sass/modules.scss +++ b/_sass/modules.scss @@ -16,4 +16,4 @@ @import "./search"; @import "./tables"; @import "./code"; -@import "./utilities/utilities"; \ No newline at end of file +@import "./utilities/utilities"; From 9e0bc86dbe3d2870d534dae6c61b7d116f6b02d0 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 20 Jul 2019 20:06:45 +0200 Subject: [PATCH 05/13] Simplified css color schemes (cherry picked from commit 52b0bced5d235d7557413e064f3841ea774d9063) --- _includes/css/just-the-docs.scss | 3 +++ _sass/modules.scss | 1 + assets/css/just-the-docs-dark.scss | 5 +---- assets/css/just-the-docs-light.scss | 5 +---- 4 files changed, 6 insertions(+), 8 deletions(-) create mode 100644 _includes/css/just-the-docs.scss diff --git a/_includes/css/just-the-docs.scss b/_includes/css/just-the-docs.scss new file mode 100644 index 0000000..61c8c2e --- /dev/null +++ b/_includes/css/just-the-docs.scss @@ -0,0 +1,3 @@ +@import "./support/support"; +@import "./color_schemes/{{ include.color_scheme }}"; +@import "./modules"; diff --git a/_sass/modules.scss b/_sass/modules.scss index dc94a4b..30f1f2a 100644 --- a/_sass/modules.scss +++ b/_sass/modules.scss @@ -17,3 +17,4 @@ @import "./tables"; @import "./code"; @import "./utilities/utilities"; +@import "./custom/custom"; diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss index 8a5b8f7..c44bde1 100644 --- a/assets/css/just-the-docs-dark.scss +++ b/assets/css/just-the-docs-dark.scss @@ -1,6 +1,3 @@ --- --- -@import "./support/support"; -@import "./color_schemes/dark"; -@import "./modules"; -@import "./custom/custom"; \ No newline at end of file +{% include css/just-the-docs.scss color_scheme="dark" %} \ No newline at end of file diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss index 997198e..a5aab89 100644 --- a/assets/css/just-the-docs-light.scss +++ b/assets/css/just-the-docs-light.scss @@ -1,6 +1,3 @@ --- --- -@import "./support/support"; -@import "./color_schemes/light"; -@import "./modules"; -@import "./custom/custom"; +{% include css/just-the-docs.scss color_scheme="light" %} \ No newline at end of file From 6c569cbdc253b886b230cd80f39d9f54fce66254 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 20 Jul 2019 22:04:17 +0200 Subject: [PATCH 06/13] Fixed custom css (cherry picked from commit bab3437a1feefc49213e1e787db0451491aca9b9) --- _includes/css/just-the-docs.scss | 1 + _sass/modules.scss | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/css/just-the-docs.scss b/_includes/css/just-the-docs.scss index 61c8c2e..ee779b2 100644 --- a/_includes/css/just-the-docs.scss +++ b/_includes/css/just-the-docs.scss @@ -1,3 +1,4 @@ @import "./support/support"; @import "./color_schemes/{{ include.color_scheme }}"; @import "./modules"; +@import "./custom/custom"; diff --git a/_sass/modules.scss b/_sass/modules.scss index 30f1f2a..dc94a4b 100644 --- a/_sass/modules.scss +++ b/_sass/modules.scss @@ -17,4 +17,3 @@ @import "./tables"; @import "./code"; @import "./utilities/utilities"; -@import "./custom/custom"; From 3995fbfc3559cbe33dc778f5cca818b6dd2bc4fa Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 20 Jul 2019 22:11:41 +0200 Subject: [PATCH 07/13] More customizable css (cherry picked from commit 8aa0899facd01f689692fccdb338673f5e9a9fbd) --- _includes/css/custom.scss | 1 + _includes/css/just-the-docs.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 _includes/css/custom.scss diff --git a/_includes/css/custom.scss b/_includes/css/custom.scss new file mode 100644 index 0000000..2ad1576 --- /dev/null +++ b/_includes/css/custom.scss @@ -0,0 +1 @@ +@import "./custom/custom"; diff --git a/_includes/css/just-the-docs.scss b/_includes/css/just-the-docs.scss index ee779b2..9c27ce6 100644 --- a/_includes/css/just-the-docs.scss +++ b/_includes/css/just-the-docs.scss @@ -1,4 +1,4 @@ @import "./support/support"; @import "./color_schemes/{{ include.color_scheme }}"; @import "./modules"; -@import "./custom/custom"; +{% include css/custom.scss %} From 2febd256db056b73ef06992fb9788c9ded4a29da Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 17:00:21 +0200 Subject: [PATCH 08/13] Added .liquid suffix to included scss files (cherry picked from commit 7fb79c2018b979fdf917f427ca5d3f2451f3265d) --- _includes/css/{custom.scss => custom.scss.liquid} | 0 _includes/css/{just-the-docs.scss => just-the-docs.scss.liquid} | 2 +- assets/css/just-the-docs-dark.scss | 2 +- assets/css/just-the-docs-light.scss | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename _includes/css/{custom.scss => custom.scss.liquid} (100%) rename _includes/css/{just-the-docs.scss => just-the-docs.scss.liquid} (73%) diff --git a/_includes/css/custom.scss b/_includes/css/custom.scss.liquid similarity index 100% rename from _includes/css/custom.scss rename to _includes/css/custom.scss.liquid diff --git a/_includes/css/just-the-docs.scss b/_includes/css/just-the-docs.scss.liquid similarity index 73% rename from _includes/css/just-the-docs.scss rename to _includes/css/just-the-docs.scss.liquid index 9c27ce6..2fc1e27 100644 --- a/_includes/css/just-the-docs.scss +++ b/_includes/css/just-the-docs.scss.liquid @@ -1,4 +1,4 @@ @import "./support/support"; @import "./color_schemes/{{ include.color_scheme }}"; @import "./modules"; -{% include css/custom.scss %} +{% include css/custom.scss.liquid %} diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss index c44bde1..3f5bd6b 100644 --- a/assets/css/just-the-docs-dark.scss +++ b/assets/css/just-the-docs-dark.scss @@ -1,3 +1,3 @@ --- --- -{% include css/just-the-docs.scss color_scheme="dark" %} \ No newline at end of file +{% include css/just-the-docs.scss.liquid color_scheme="dark" %} \ No newline at end of file diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss index a5aab89..336d74e 100644 --- a/assets/css/just-the-docs-light.scss +++ b/assets/css/just-the-docs-light.scss @@ -1,3 +1,3 @@ --- --- -{% include css/just-the-docs.scss color_scheme="light" %} \ No newline at end of file +{% include css/just-the-docs.scss.liquid color_scheme="light" %} \ No newline at end of file From d549d37e6faac68cfeba7cec13e35d306d47fee5 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 15 Aug 2019 20:12:57 +0200 Subject: [PATCH 09/13] Fixed missing new lines --- _includes/title.html | 2 +- _layouts/table_wrappers.html | 2 +- assets/css/just-the-docs-dark.scss | 2 +- assets/css/just-the-docs-light.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/_includes/title.html b/_includes/title.html index f6d5669..35b2c6c 100644 --- a/_includes/title.html +++ b/_includes/title.html @@ -1 +1 @@ -{{ site.title }} \ No newline at end of file +{{ site.title }} diff --git a/_layouts/table_wrappers.html b/_layouts/table_wrappers.html index cc6187a..3f8f226 100644 --- a/_layouts/table_wrappers.html +++ b/_layouts/table_wrappers.html @@ -4,4 +4,4 @@ layout: vendor/compress {% assign content_ = content | replace: '', '' %} -{{ content_ }} \ No newline at end of file +{{ content_ }} diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss index 3f5bd6b..ac92fb1 100644 --- a/assets/css/just-the-docs-dark.scss +++ b/assets/css/just-the-docs-dark.scss @@ -1,3 +1,3 @@ --- --- -{% include css/just-the-docs.scss.liquid color_scheme="dark" %} \ No newline at end of file +{% include css/just-the-docs.scss.liquid color_scheme="dark" %} diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss index 336d74e..ac69688 100644 --- a/assets/css/just-the-docs-light.scss +++ b/assets/css/just-the-docs-light.scss @@ -1,3 +1,3 @@ --- --- -{% include css/just-the-docs.scss.liquid color_scheme="light" %} \ No newline at end of file +{% include css/just-the-docs.scss.liquid color_scheme="light" %} From 95498ccaf8f1829a9123bde4c14800fb3219f28a Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 17 Aug 2019 15:02:53 +0200 Subject: [PATCH 10/13] Added just-the-docs-default.scss which includes the theme set in _config.yml --- _includes/head.html | 7 +------ _sass/color_schemes/dark.scss | 2 -- _sass/color_schemes/light.scss | 1 - assets/css/just-the-docs-default.scss | 8 ++++++++ 4 files changed, 9 insertions(+), 9 deletions(-) create mode 100644 assets/css/just-the-docs-default.scss diff --git a/_includes/head.html b/_includes/head.html index e640f97..16ffe3d 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,12 +12,7 @@ - {% if site.color_scheme == nil or site.color_scheme == "nil" %} - {% assign color_scheme = 'light' %} - {% else %} - {% assign color_scheme = site.color_scheme %} - {% endif %} - + {% if site.ga_tracking != nil %} diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index 333c2b1..9a0b9ea 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -1,5 +1,3 @@ -// override this file to change the dark theme - $body-background-color: $grey-dk-300; $sidebar-color: $grey-dk-300; $border-color: $grey-dk-200; diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss index 5932f29..e69de29 100644 --- a/_sass/color_schemes/light.scss +++ b/_sass/color_schemes/light.scss @@ -1 +0,0 @@ -// override this file to change the light (default) theme diff --git a/assets/css/just-the-docs-default.scss b/assets/css/just-the-docs-default.scss new file mode 100644 index 0000000..63fde26 --- /dev/null +++ b/assets/css/just-the-docs-default.scss @@ -0,0 +1,8 @@ +--- +--- +{% if site.color_scheme and site.color_scheme != "nil" %} + {% assign color_scheme = site.color_scheme %} +{% else %} + {% assign color_scheme = "light" %} +{% endif %} +{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %} From 3ed2d586fdf0a67ffd7a7f4b85bbaec63633481a Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 17 Aug 2019 16:07:09 +0200 Subject: [PATCH 11/13] Fixed stylelintrc.json --- .stylelintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.stylelintrc.json b/.stylelintrc.json index 2253e64..e8d6e17 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,5 +1,6 @@ { "ignoreFiles" : [ + "assets/css/just-the-docs-default.scss", "assets/css/just-the-docs-light.scss", "assets/css/just-the-docs-dark.scss", "_sass/vendor/**/*.scss" From 03979bf8fc9c0fbb42221dc736f23828d97136c9 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Wed, 27 Nov 2019 11:15:57 +0100 Subject: [PATCH 12/13] Added documentation for custom color schemes and custom css --- _sass/custom/custom.scss | 129 --------------------------------- _sass/overrides.scss | 3 - assets/js/dark-mode-preview.js | 23 ------ docs/configuration.md | 9 ++- docs/customization.md | 56 ++++++++++---- 5 files changed, 48 insertions(+), 172 deletions(-) delete mode 100644 _sass/overrides.scss delete mode 100644 assets/js/dark-mode-preview.js diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 9ac503b..e69de29 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -1,129 +0,0 @@ -//// -//// Typography -//// - -//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif; -//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace; -//$root-font-size: 16px; // Base font-size for rems -//$body-line-height: 1.4; -//$content-line-height: 1.5; -//$body-heading-line-height: 1.15; - -//// -//// Colors -//// - -//$white: #fff; - -//$grey-dk-000: #959396; -//$grey-dk-100: #5c5962; -//$grey-dk-200: #44434d; -//$grey-dk-250: #302d36; -//$grey-dk-300: #27262b; - -//$grey-lt-000: #f5f6fa; -//$grey-lt-100: #eeebee; -//$grey-lt-200: #ecebed; -//$grey-lt-300: #e6e1e8; - -//$purple-000: #7253ed; -//$purple-100: #5e41d0; -//$purple-200: #4e26af; -//$purple-300: #381885; - -//$blue-000: #2c84fa; -//$blue-100: #2869e6; -//$blue-200: #264caf; -//$blue-300: #183385; - -//$green-000: #41d693; -//$green-100: #11b584; -//$green-200: #009c7b; -//$green-300: #026e57; - -//$yellow-000: #ffeb82; -//$yellow-100: #fadf50; -//$yellow-200: #f7d12e; -//$yellow-300: #e7af06; - -//$red-000: #f77e7e; -//$red-100: #f96e65; -//$red-200: #e94c4c; -//$red-300: #dd2e2e; - -//$body-background-color: $white; -//$sidebar-color: $grey-lt-000; -//$search-background-color: $white; -//$table-background-color: $white; -//$code-background-color: $grey-lt-000; - -//$body-text-color: $grey-dk-100; -//$body-heading-color: $grey-dk-300; -//$search-result-preview-color: $grey-dk-000; -//$nav-child-link-color: $grey-dk-100; -//$link-color: $purple-000; -//$btn-primary-color: $purple-100; -//$base-button-color: #f7f7f7; - -//// -//// Spacing -//// - -//$spacing-unit: 1rem; // 1rem == 16px - -//$spacers: ( -//sp-0: 0, -//sp-1: $spacing-unit * 0.25, -//sp-2: $spacing-unit * 0.5, -//sp-3: $spacing-unit * 0.75, -//sp-4: $spacing-unit, -//sp-5: $spacing-unit * 1.5, -//sp-6: $spacing-unit * 2, -//sp-7: $spacing-unit * 2.5, -//sp-8: $spacing-unit * 3, -//sp-9: $spacing-unit * 3.5, -//sp-10: $spacing-unit * 4 -//); - -//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px -//$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px -//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px -//$sp-4: map-get($spacers, sp-4); // 1 rem == 16px -//$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px -//$sp-6: map-get($spacers, sp-6); // 2 rem == 32px -//$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px -//$sp-8: map-get($spacers, sp-8); // 3 rem == 48px -//$sp-9: map-get($spacers, sp-9); // 4 rem == 48px -//$sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px - -//// -//// Borders -//// - -//$border: 1px solid; -//$border-radius: 4px; -//$border-color: $grey-lt-100; - -//// -//// Grid system -//// - -//$gutter-spacing: $sp-6; -//$gutter-spacing-sm: $sp-4; -//$nav-width: 264px; -//$nav-width-md: 248px; -//$content-width: 800px; -//$header-height: 60px; -//$search-results-width: 500px; - -//// -//// Media queries in pixels -//// - -//$media-queries: ( -//xs: 320px, -//sm: 500px, -//md: $content-width, -//lg: $content-width + $nav-width, -//xl: 1400px -//); diff --git a/_sass/overrides.scss b/_sass/overrides.scss deleted file mode 100644 index 21e9527..0000000 --- a/_sass/overrides.scss +++ /dev/null @@ -1,3 +0,0 @@ -// -// Custom overrides from a user. -// diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js deleted file mode 100644 index b9ad81e..0000000 --- a/assets/js/dark-mode-preview.js +++ /dev/null @@ -1,23 +0,0 @@ -document.addEventListener("DOMContentLoaded", function(){ - - const toggleDarkMode = document.querySelector('.js-toggle-dark-mode') - const cssFile = document.querySelector('[rel="stylesheet"]') - const originalCssRef = cssFile.getAttribute('href') - const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css') - const buttonCopy = ['Return to the light side', 'Preview dark color scheme'] - const updateButtonText = function(toggleDarkMode) { - toggleDarkMode.textContent === buttonCopy[0] ? - toggleDarkMode.textContent = buttonCopy[1] : - toggleDarkMode.textContent = buttonCopy[0] - } - - jtd.addEvent(toggleDarkMode, 'click', function(){ - if (cssFile.getAttribute('href') === originalCssRef) { - cssFile.setAttribute('href', darkModeCssRef) - updateButtonText(toggleDarkMode) - } else { - cssFile.setAttribute('href', originalCssRef) - updateButtonText(toggleDarkMode) - } - }) -}) diff --git a/docs/configuration.md b/docs/configuration.md index 939b6ae..26db5b5 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -38,7 +38,6 @@ search_enabled: true # Enable support for hyphenated search words: search_tokenizer_separator: /[\s/]+/ - ``` ## Aux links @@ -56,7 +55,7 @@ aux_links: # Heading anchor links appear on hover over h1-h6 tags in page content # allowing users to deep link to a particular heading on a page. # -# Supports true (default) or false/nil +# Supports true (default) or false heading_anchors: true ``` @@ -70,8 +69,8 @@ footer_content: "Copyright © 2017-2019 Patrick Marsceill. Distributed by an ## Color scheme ```yaml -# Color scheme currently only supports "dark" or nil (default) -color_scheme: "dark" +# Color scheme supports "light" (default) and "dark" +color_scheme: dark ``` @@ -81,8 +80,10 @@ const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); jtd.addEvent(toggleDarkMode, 'click', function(){ if (jtd.getTheme() === 'dark') { jtd.setTheme('light'); + toggleDarkMode.textContent = 'Preview dark color scheme'; } else { jtd.setTheme('dark'); + toggleDarkMode.textContent = 'Return to the light side'; } }); diff --git a/docs/customization.md b/docs/customization.md index 9848ad3..cbcd38c 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -29,8 +29,8 @@ To enable a color scheme, set the `color_scheme` parameter in your site's `_conf {: .no_toc } ```yaml -# Color scheme currently only supports "dark" or nil (default) -color_scheme: "dark" +# Color scheme supports "light" (default) and "dark" +color_scheme: dark ``` @@ -40,36 +40,66 @@ const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); jtd.addEvent(toggleDarkMode, 'click', function(){ if (jtd.getTheme() === 'dark') { jtd.setTheme('light'); + toggleDarkMode.textContent = 'Preview dark color scheme'; } else { jtd.setTheme('dark'); + toggleDarkMode.textContent = 'Return to the light side'; } }); -## Specific visual customization +## Custom schemes -To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value. +### Define a custom scheme -For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing. +You can add custom schemes. +If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name) +where you override theme variables to change colors, fonts, spacing, etc. + +Available variables are listed in the [_variables.scss](https://github.com/pmarsceill/just-the-docs/tree/master/_sass/support/_variables.scss) file. + +For example, to change the link color from the purple default to blue, include the following inside your scheme file: #### Example {: .no_toc } ```scss -// ... -// -// $body-text-color: $grey-dk-100; -// $body-heading-color: $grey-dk-300; $link-color: $blue-000; -// -// ... ``` _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail. +Please use scheme files. -## Override styles +### Use a custom scheme -For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.scss`. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied. +To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file: +```yaml +color_scheme: foo +``` + +### Switchable custom scheme + +If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name) +with the following content:` + +{% raw %} + --- + --- + {% include css/just-the-docs.scss.liquid color_scheme="foo" %} +{% endraw %} + +This allows you to switch the scheme via the following javascript. + +```js +jtd.setTheme('foo'); +``` + +## Override and completely custom styles + +For styles that aren't defined as variables, you may want to modify specific CSS classes. +Additionally, you may want to add completely custom CSS specific to your content. +To do this, put your styles in the file `_sass/custom/custom.scss`. +This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied. For example, if you'd like to add your own styles for printing a page, you could add the following styles. From 955ac23149659d3e51ed9246bddd4e7eb04aba9b Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Fri, 24 Apr 2020 15:41:13 -0400 Subject: [PATCH 13/13] Rm preview js --- assets/js/dark-mode-preview.js | 25 ------------------------- 1 file changed, 25 deletions(-) delete mode 100644 assets/js/dark-mode-preview.js diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js deleted file mode 100644 index bb3169f..0000000 --- a/assets/js/dark-mode-preview.js +++ /dev/null @@ -1,25 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - const toggleDarkMode = document.querySelector(".js-toggle-dark-mode") - const cssFile = document.querySelector('[rel="stylesheet"]') - const originalCssRef = cssFile.getAttribute("href") - const darkModeCssRef = originalCssRef.replace( - "just-the-docs.css", - "dark-mode-preview.css" - ) - const buttonCopy = ["Return to the light side", "Preview dark color scheme"] - const updateButtonText = function (toggleDarkMode) { - toggleDarkMode.textContent === buttonCopy[0] - ? (toggleDarkMode.textContent = buttonCopy[1]) - : (toggleDarkMode.textContent = buttonCopy[0]) - } - - jtd.addEvent(toggleDarkMode, "click", function () { - if (cssFile.getAttribute("href") === originalCssRef) { - cssFile.setAttribute("href", darkModeCssRef) - updateButtonText(toggleDarkMode) - } else { - cssFile.setAttribute("href", originalCssRef) - updateButtonText(toggleDarkMode) - } - }) -})