{% unless page.url == "/" %} - {% if page.parent != nil and page.parent != page.title %} + {% if page.parent %} diff --git a/_sass/base.scss b/_sass/base.scss index 7f417f3..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; } @@ -16,6 +21,7 @@ body { font-size: inherit; line-height: $body-line-height; color: $body-text-color; + background-color: $body-background-color; } p, @@ -64,7 +70,7 @@ a { a:not([class]) { text-decoration: none; - background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%); + background-image: linear-gradient($border-color 0%, $border-color 100%); background-repeat: repeat-x; background-position: 0 100%; background-size: 1px 1px; @@ -99,6 +105,6 @@ hr { height: 1px; padding: 0; margin: $sp-6 0; - background-color: $grey-lt-100; + background-color: $border-color; border: 0; } diff --git a/_sass/buttons.scss b/_sass/buttons.scss index a58c920..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); } @@ -75,7 +75,7 @@ } .btn-outline { - color: $blue-100; + color: $link-color; background: transparent; box-shadow: inset 0 0 0 2px $grey-lt-300; @@ -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; @@ -101,6 +101,10 @@ } } +.btn-primary { + @include btn-color($white, $btn-primary-color); +} + .btn-purple { @include btn-color($white, $purple-100); } diff --git a/_sass/code.scss b/_sass/code.scss index 0f08daa..f29a97c 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -6,15 +6,15 @@ code { padding: 0.2em 0.15em; font-weight: 400; - background-color: $grey-lt-000; + background-color: $code-background-color; border: $border $border-color; border-radius: $border-radius; } -.highlight { +pre.highlight { padding: $sp-3; margin-bottom: 0; - background-color: $grey-lt-000; + background-color: $code-background-color; code { padding: 0; diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss new file mode 100644 index 0000000..6c2e8a9 --- /dev/null +++ b/_sass/color_schemes/dark.scss @@ -0,0 +1,14 @@ + +$body-background-color: $grey-dk-300; +$sidebar-color: $grey-dk-300; +$border-color: $grey-dk-200; + +$body-text-color: $grey-lt-300; +$body-heading-color: $grey-lt-000; +$nav-child-link-color: $grey-dk-000; + +$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/content.scss b/_sass/content.scss index 1dd5256..46fc294 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -4,6 +4,12 @@ // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type .page-content { + a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + ul, ol { padding-left: 1.5em; 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/layout.scss b/_sass/layout.scss index 35b9631..27f15e9 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -21,7 +21,7 @@ flex-wrap: wrap; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; - background-color: $grey-lt-000; + background-color: $sidebar-color; @include mq(md) { flex-wrap: nowrap; @@ -75,10 +75,10 @@ } .page-header { - background-color: $grey-lt-000; + background-color: $sidebar-color; @include mq(md) { - background-color: $white; + background-color: $body-background-color; } .main-content { @@ -138,6 +138,6 @@ body { position: static; align-self: flex-end; justify-self: end; - background-color: $grey-lt-000; + background-color: $sidebar-color; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index e5d580b..364c569 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -5,7 +5,8 @@ .site-title { display: block; flex: 1 1 auto; - background-color: $grey-lt-000; + color: $body-heading-color; + background-color: $sidebar-color; @include mq(md) { position: absolute; @@ -34,7 +35,7 @@ list-style: none; .navigation-list-link { - color: $grey-dk-100; + color: $nav-child-link-color; } .navigation-list-item { @@ -44,13 +45,13 @@ position: absolute; margin-top: 0.3em; margin-left: -0.8em; - color: $grey-dk-000; + color: rgba($body-text-color, 0.3); content: "- "; } &.active { &::before { - color: $grey-dk-100; + color: $body-text-color; } } } @@ -63,6 +64,16 @@ @include mq(md) { @include fs-3; } + + .navigation-list-child-list { + display: none; + } + + &.active { + .navigation-list-child-list { + display: block; + } + } } .navigation-list-link { @@ -72,7 +83,7 @@ &.active { font-weight: 600; - color: $grey-dk-200; + color: $body-heading-color; text-decoration: none; } } @@ -101,6 +112,11 @@ } // Breadcrumb nav +.breadcrumb-nav { + @include mq(md) { + margin-top: -$sp-4; + } +} .breadcrumb-nav-list { padding-left: 0; diff --git a/_sass/search.scss b/_sass/search.scss index 7e3a802..32ec1db 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -39,20 +39,21 @@ 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); } } .search-input-wrap { display: flex; - background-color: $white; + background-color: $body-background-color; } .search-input { width: 100%; padding-top: $sp-1; padding-bottom: $sp-1; + background-color: $body-background-color; border-top: 0; border-right: 0; border-bottom: 0; @@ -64,7 +65,7 @@ box-shadow: none; + .search-icon { - fill: $purple-000; + fill: $link-color; } } @@ -107,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 59cb59e..8a09eda 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -17,6 +17,7 @@ $white: #fff !default; $grey-dk-000: #959396 !default; $grey-dk-100: #5c5962 !default; $grey-dk-200: #44434d !default; +$grey-dk-250: #302d36 !default; $grey-dk-300: #27262b !default; $grey-lt-000: #f5f6fa !default; @@ -49,9 +50,16 @@ $red-100: #f96e65 !default; $red-200: #e94c4c !default; $red-300: #dd2e2e !default; +$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/tables.scss b/_sass/tables.scss index d97ed07..39bc0dc 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -25,7 +25,8 @@ td { padding-right: $sp-3; padding-bottom: $sp-2; padding-left: $sp-3; - border-bottom: $border $grey-lt-000; + background-color: lighten($body-background-color, 2%); + border-bottom: $border rgba($border-color, 0.5); border-left: $border $border-color; &:first-of-type { 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/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss new file mode 100644 index 0000000..f30f9e0 --- /dev/null +++ b/assets/css/dark-mode-preview.scss @@ -0,0 +1,41 @@ +--- +# 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"; +@import "./navigation"; +@import "./typography"; +@import "./labels"; +@import "./buttons"; +@import "./search"; +@import "./tables"; +@import "./code"; +@import "./utilities/utilities"; + +// +// Import custom overrides +// +@import "./custom/custom"; diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index f47d6a8..601cdaa 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -4,7 +4,7 @@ --- // -// Import dependancies +// Import external dependencies // @import "./vendor/normalize.scss/normalize.scss"; @@ -16,8 +16,13 @@ // Support @import "./support/support"; -// Custom overrides -@import "./custom/custom"; +// +// Import custom color scheme scss +// + +{% if site.color_scheme == "dark" %} +@import "./color_schemes/dark.scss"; +{% endif %} // Modules @import "./base"; @@ -31,3 +36,8 @@ @import "./tables"; @import "./code"; @import "./utilities/utilities"; + +// +// Import custom overrides +// +@import "./custom/custom"; diff --git a/docs/configuration.md b/docs/configuration.md index c2f867b..94610ff 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -6,7 +6,7 @@ nav_order: 2 # Configuration -Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `config.yml` file. +Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `_config.yml` file. ## Search enabled @@ -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/navigation-structure.md b/docs/navigation-structure.md index 8114321..cd9de43 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -17,16 +17,18 @@ nav_order: 5 ## Main navigation -The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (parent pages with children). +The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren). -### Top level pages +By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)). -By default, all pages will appear as top level pages in the main nav. +--- -### Ordering pages +## Ordering pages To specify a page order, use the `nav_order` variable in your pages' YAML front matter. +#### Example +{: .no_toc } ```yaml --- layout: default @@ -35,9 +37,27 @@ nav_order: 4 --- ``` -### Pages with children +--- -Sometimes you will want to create a page with many children (a section). To accomplish this you need to a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: +## Excluding pages + +For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page. Use the `nav_exclude: true` parameter in the YAML front matter for that page. + +#### Example +{: .no_toc } +```yaml +--- +layout: default +title: 404 +nav_exclude: true +--- +``` + +--- + +## Pages with children + +Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like: ``` +-- .. @@ -53,7 +73,7 @@ Sometimes you will want to create a page with many children (a section). To acco | | +-- typography.md | | | |-- utilities -| | |-- utilities.md (parent page) +| | |-- utilities.md (parent page) | | |-- color.md | | |-- layout.md | | |-- responsive-modifiers.md @@ -66,45 +86,105 @@ Sometimes you will want to create a page with many children (a section). To acco +-- .. ``` -On the parent pages, add 3 YAML front matter variables: +On the parent pages, add 2 YAML front matter variables: - `has_children: true` (tells us that this a parent page) -- `parent: ` set this to the title of the parent page (in this case, it's this page's title) -- `permalink: ` set this to the directory that the contains the pages +- `permalink:` set this to the site directories that the contains the pages #### Example {: .no_toc } ```yaml +--- layout: default title: UI Components nav_order: 2 has_children: true -parent: UI Components -permalink: /ui-components +permalink: /docs/ui-components +--- ``` -Here we're setting up the UI Components landing page that is available at `/ui-components`, has children and is ordered second in the main nav. +Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, it has children and is ordered second in the main nav. ### Child pages +{: .text-gamma } On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section). #### Example {: .no_toc } ```yaml +--- layout: default title: Buttons parent: UI Components nav_order: 2 +--- ``` The Buttons page appears a child of UI Components and appears second in the UI Components section. +### Children with children +{: .text-gamma } + +Child pages can also have children (grand children). This is achieved by using a similar pattern on the child and grand child pages. + +1. Add the `has_children` attribute to the child +1. Add the `parent` and `grand_parent` attribute to the grandchild + +#### Example +{: .no_toc } + +```yaml +--- +layout: default +title: Buttons +parent: UI Components +nav_order: 2 +has_children: true +--- +``` + +```yaml +--- +layout: default +title: Buttons Child Page +parent: Buttons +grand_parent: UI Components +nav_order: 1 +--- +``` + +Would create the following navigation structure: + +``` ++-- .. +| +|-- UI Components +| |-- .. +| | +| |-- Buttons +| | |-- Button Child Page +| | +| |-- .. +| ++-- .. +``` + --- -## Breadcrumbs +## Auxiliary Navigation -Breadcrumbs are auto generated based on the parent/child structure and the directory structure for the site. In order for breadcrumbs to work correctly for pages children, the URL structure must be the slugified version of the parent page's title. For example, the page UI Components, must use the `/ui-components` directory to house its descendant pages. +To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-nav) in your site's `_config.yml` file. + +#### Example +{: .no_toc } + +```yml +# Aux links for the upper right navigation +aux_links: +"Just the Docs on GitHub": + - "//github.com/pmarsceill/just-the-docs" +``` --- diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md index 849071d..8da7729 100644 --- a/docs/ui-components/buttons.md +++ b/docs/ui-components/buttons.md @@ -21,7 +21,6 @@ nav_order: 2 ### Links that look like buttons
- [Link button](http://example.com/){: .btn } [Link button](http://example.com/){: .btn .btn-purple } @@ -32,7 +31,6 @@ nav_order: 2
```markdown - [Link button](http://example.com/){: .btn } [Link button](http://example.com/){: .btn .btn-purple } diff --git a/docs/ui-components/labels.md b/docs/ui-components/labels.md index 710218f..f374246 100644 --- a/docs/ui-components/labels.md +++ b/docs/ui-components/labels.md @@ -31,7 +31,6 @@ Deprecated