From f0bb38e1b8277477dd4e5fd72123e9e879b022cd Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Sun, 18 Nov 2018 11:07:45 -0500 Subject: [PATCH] Clean up colors and docs --- _sass/base.scss | 5 ++++ _sass/buttons.scss | 12 ++++----- _sass/color_schemes/dark.scss | 5 ++-- _sass/custom/custom.scss | 14 +++++++--- _sass/navigation.scss | 2 +- _sass/search.scss | 7 ++--- _sass/support/_variables.scss | 1 + _sass/tables.scss | 2 +- _sass/utilities/_colors.scss | 8 ++++++ docs/configuration.md | 25 ++++++++++++++++++ docs/customization.md | 49 ++++++++++++++++++++++++++++------- docs/utilities/color.md | 1 + 12 files changed, 106 insertions(+), 25 deletions(-) diff --git a/_sass/base.scss b/_sass/base.scss index 4f66caa..1ea3903 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -7,6 +7,11 @@ box-sizing: border-box; } +::selection { + color: $white; + background: $link-color; +} + html { @include fs-4; } diff --git a/_sass/buttons.scss b/_sass/buttons.scss index 7fcb210..05db0ed 100644 --- a/_sass/buttons.scss +++ b/_sass/buttons.scss @@ -15,11 +15,11 @@ font-size: inherit; font-weight: 500; line-height: 1.5; - color: $purple-200; + color: $link-color; text-decoration: none; vertical-align: baseline; cursor: pointer; - background-color: #f7f7f7; + background-color: $base-button-color; border-width: 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @@ -38,7 +38,7 @@ &:hover, &.zeroclipboard-is-hover { - color: $purple-300; + color: darken($link-color, 2%); } &:hover, @@ -46,13 +46,13 @@ &.zeroclipboard-is-hover, &.zeroclipboard-is-active { text-decoration: none; - background-color: #f4f4f4; + background-color: darken($base-button-color, 1%); } &:active, &.selected, &.zeroclipboard-is-active { - background-color: #ededed; + background-color: darken($base-button-color, 3%); background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } @@ -83,7 +83,7 @@ &:active, &.zeroclipboard-is-hover, &.zeroclipboard-is-active { - color: $grey-dk-100; + color: darken($link-color, 4%); text-decoration: none; background-color: transparent; box-shadow: inset 0 0 0 3px $grey-lt-300; diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index fb8847b..6c2e8a9 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -7,7 +7,8 @@ $body-text-color: $grey-lt-300; $body-heading-color: $grey-lt-000; $nav-child-link-color: $grey-dk-000; -$link-color: lighten($purple-000, 8%); -$btn-primary-color: $purple-200; +$link-color: $blue-000; +$btn-primary-color: $blue-200; +$base-button-color: $grey-dk-250; $code-background-color: $grey-dk-250; diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 51399f2..82064a5 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -17,6 +17,7 @@ // $grey-dk-000: #959396; // $grey-dk-100: #5c5962; // $grey-dk-200: #44434d; +// $grey-dk-250: #302d36 !default; // $grey-dk-300: #27262b; // // $grey-lt-000: #f5f6fa; @@ -39,9 +40,16 @@ // $green-200: #009c7b; // $green-300: #026e57; // -// $body-text-color: $grey-dk-100; -// $body-heading-color: $grey-dk-300; -// $link-color: $purple-000; +// $body-background-color: $white !default; +// $sidebar-color: $grey-lt-000 !default; +// $code-background-color: $grey-lt-000 !default; + +// $body-text-color: $grey-dk-100 !default; +// $body-heading-color: $grey-dk-300 !default; +// $nav-child-link-color: $grey-dk-100 !default; +// $link-color: $purple-000 !default; +// $btn-primary-color: $purple-100 !default; +// $base-button-color: #f7f7f7 !default; // // // // // Media queries in pixels diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 4628a64..0a5fb7d 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -45,7 +45,7 @@ position: absolute; margin-top: 0.3em; margin-left: -0.8em; - color: $border-color; + color: rgba($body-text-color, 0.3); content: "- "; } diff --git a/_sass/search.scss b/_sass/search.scss index d19d6fd..32ec1db 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -39,7 +39,7 @@ display: block; width: 300px; margin-top: $gutter-spacing; - background: $white; + background: lighten($body-background-color, 1%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); } } @@ -65,7 +65,7 @@ box-shadow: none; + .search-icon { - fill: $purple-000; + fill: $link-color; } } @@ -108,6 +108,7 @@ padding-left: $sp-3; &:hover { - background-color: $grey-lt-000; + color: $body-heading-color; + background-color: darken($body-background-color, 2%); } } diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index ce25353..8a09eda 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -59,6 +59,7 @@ $body-heading-color: $grey-dk-300 !default; $nav-child-link-color: $grey-dk-100 !default; $link-color: $purple-000 !default; $btn-primary-color: $purple-100 !default; +$base-button-color: #f7f7f7 !default; // // Media queries in pixels diff --git a/_sass/tables.scss b/_sass/tables.scss index 1cd50cd..39bc0dc 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -25,7 +25,7 @@ td { padding-right: $sp-3; padding-bottom: $sp-2; padding-left: $sp-3; - background-color: lighten($body-background-color, 1%); + background-color: lighten($body-background-color, 2%); border-bottom: $border rgba($border-color, 0.5); border-left: $border $border-color; diff --git a/_sass/utilities/_colors.scss b/_sass/utilities/_colors.scss index 011f4c1..f3607ab 100644 --- a/_sass/utilities/_colors.scss +++ b/_sass/utilities/_colors.scss @@ -16,6 +16,10 @@ color: $grey-dk-200 !important; } +.text-grey-dk-250 { + color: $grey-dk-250 !important; +} + .text-grey-dk-300 { color: $grey-dk-300 !important; } @@ -130,6 +134,10 @@ background-color: $grey-dk-200 !important; } +.bg-grey-dk-250 { + background-color: $grey-dk-250 !important; +} + .bg-grey-dk-300 { background-color: $grey-dk-300 !important; } diff --git a/docs/configuration.md b/docs/configuration.md index e092418..94610ff 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -23,3 +23,28 @@ aux_links: "Just the Docs on GitHub": - "//github.com/pmarsceill/just-the-docs" ``` + +## Color scheme + +```yml +# Color scheme currently only supports "dark" or nil (default) +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 b5a4f83..6f0961b 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -15,11 +15,49 @@ nav_order: 6 --- -## Visual customization +## Color schemes +{: .d-inline-block :} + +New +{: .label .label-green :} + +Just the Docs supports two color schemes: light (default), and dark. + +To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file: + +#### Example +{: no_toc } + +```yml +# Color scheme currently only supports "dark" or nil (default) +color_scheme: "dark" +``` + + + + + +## Specific visual customization 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 out it’s line and change it’s value. -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 `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing. +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 out, and change it's value to our `$blue-000` variable, or another shade of your choosing. + +#### Example +{: no_toc } ```scss // ... @@ -35,10 +73,3 @@ _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not --- -## Themes -{: .d-inline-block :} - -Coming soon -{: .label .label-yellow :} - -Hard at work on a dark theme, and more. diff --git a/docs/utilities/color.md b/docs/utilities/color.md index f2bfc53..f025f91 100644 --- a/docs/utilities/color.md +++ b/docs/utilities/color.md @@ -34,6 +34,7 @@ All the colors used in Just the Docs have been systemsized into a series of vari | `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` | | `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` | | `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` | +| `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` | | `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` | ## Purples