{% if site.heading_anchors != false %} - {% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="" anchorClass="anchor-heading" %} + {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="" anchorClass="anchor-heading" %} {% else %} {{ content }} {% endif %} @@ -73,7 +79,7 @@ layout: table_wrappers {% for child in children_list %} {% if child.parent == page.title and child.title != page.title %}
  • - {{ child.title }} + {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %}
    • {% endif %} {% endfor %} diff --git a/_sass/content.scss b/_sass/content.scss index 0ed47fc..2940286 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -116,26 +116,37 @@ .anchor-heading { position: absolute; - right: -$sp-3; + right: -$sp-4; width: $sp-5; height: 100%; + padding-right: $sp-1; + padding-left: $sp-1; overflow: visible; - fill: $link-color; - visibility: hidden; @include mq(md) { right: auto; left: -$sp-5; } + + svg { + display: inline-block; + width: 100%; + height: 100%; + fill: $link-color; + visibility: hidden; + } } + .anchor-heading:hover, h1:hover > .anchor-heading, h2:hover > .anchor-heading, h3:hover > .anchor-heading, h4:hover > .anchor-heading, h5:hover > .anchor-heading, h6:hover > .anchor-heading { - visibility: visible; + svg { + visibility: visible; + } } h1, diff --git a/_sass/layout.scss b/_sass/layout.scss index 4c214ea..6644dc3 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -125,12 +125,12 @@ .site-header { display: flex; + min-height: $header-height; align-items: center; @include mq(md) { z-index: 101; height: $header-height; - min-height: $header-height; max-height: $header-height; border-bottom: $border $border-color; } @@ -142,10 +142,26 @@ display: flex; height: 100%; align-items: center; - padding-top: $gutter-spacing-sm; - padding-bottom: $gutter-spacing-sm; + padding-top: $sp-3; + padding-bottom: $sp-3; color: $body-heading-color; @include fs-6; + + @include mq(md) { + padding-top: $sp-2; + padding-bottom: $sp-2; + } +} + +@if variable-exists(logo) { + .site-logo { + width: 100%; + height: 100%; + background-image: url($logo); + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + } } .menu-button { diff --git a/_sass/overrides.scss b/_sass/overrides.scss new file mode 100644 index 0000000..21e9527 --- /dev/null +++ b/_sass/overrides.scss @@ -0,0 +1,3 @@ +// +// Custom overrides from a user. +// diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss index 8b77da6..c524e81 100644 --- a/assets/css/dark-mode-preview.scss +++ b/assets/css/dark-mode-preview.scss @@ -3,6 +3,10 @@ # only Main files contain this front matter, not partials. --- +{% if site.logo %} +$logo: "{{ site.logo | absolute_url }}"; +{% endif %} + // // Import external dependencies // diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 6a2eefa..199ad89 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -3,6 +3,10 @@ # only Main files contain this front matter, not partials. --- +{% if site.logo %} +$logo: "{{ site.logo | absolute_url }}"; +{% endif %} + // // Import external dependencies // @@ -42,3 +46,4 @@ @import "./tables"; @import "./code"; @import "./utilities/utilities"; +@import "./overrides"; diff --git a/assets/js/dark-mode-preview.js b/assets/js/dark-mode-preview.js new file mode 100644 index 0000000..addfb27 --- /dev/null +++ b/assets/js/dark-mode-preview.js @@ -0,0 +1,23 @@ +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] + } + + addEvent(toggleDarkMode, 'click', function(){ + if (cssFile.getAttribute('href') === originalCssRef) { + cssFile.setAttribute('href', darkModeCssRef) + updateButtonText(toggleDarkMode) + } else { + cssFile.setAttribute('href', originalCssRef) + updateButtonText(toggleDarkMode) + } + }) +}) \ No newline at end of file diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index aadbf82..2f6cea0 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -52,8 +52,13 @@ function initSearch() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); - + + {% if site.search_tokenizer_separator != nil %} + lunr.tokenizer.separator = {{ site.search_tokenizer_separator }} + {% else %} lunr.tokenizer.separator = /[\s\-/]+/ + {% endif %} + var index = lunr(function () { this.ref('id'); this.field('title', { boost: 200 }); diff --git a/assets/js/search-data.json b/assets/js/search-data.json index 6f728cd..0532f7c 100644 --- a/assets/js/search-data.json +++ b/assets/js/search-data.json @@ -1,11 +1,12 @@ --- --- { - {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": { + {% assign comma = false %} + {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": { "title": "{{ page.title | replace: '&', '&' }}", "content": "{{ page.content | markdownify | replace: 'Preview dark color scheme - + See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information. diff --git a/docs/customization.md b/docs/customization.md index eccb4bc..8411b69 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -34,20 +34,7 @@ color_scheme: "dark" ``` - + ## Specific visual customization @@ -69,3 +56,20 @@ $link-color: $blue-000; ``` _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail. + +## Override styles + +To add your own CSS at the end of the cascade, edit `_sass/overrides.scss` to add in your own custom CSS. This will allow for all overrides to be kept in a single file, and allow for any upstream changes to still be allowed. + +For example, if you'd like to add your own styles for printing a page, you could add the following styles. + +#### Example +{: .no_toc } + +```scss +// Print-only styles. +@media print { + .side-bar, .page-header { display: none; } + .main-content { max-width: auto; margin: 1em;} +} +``` diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index 98107cf..a4fef75 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -67,7 +67,7 @@ Sometimes you will want to create a page with many children (a section). First, | |-- docs | |-- ui-components -| | |-- ui-components.md (parent page) +| | |-- index.md (parent page) | | |-- buttons.md | | |-- code.md | | |-- labels.md @@ -75,7 +75,7 @@ Sometimes you will want to create a page with many children (a section). First, | | +-- typography.md | | | |-- utilities -| | |-- utilities.md (parent page) +| | |-- index.md (parent page) | | |-- color.md | | |-- layout.md | | |-- responsive-modifiers.md @@ -88,9 +88,8 @@ Sometimes you will want to create a page with many children (a section). First, +-- .. ``` -On the parent pages, add 2 YAML front matter parameters: +On the parent pages, add this YAML front matter parameter: - `has_children: true` (tells us that this is a parent page) -- `permalink:` set this to the site directory that contains the child pages #### Example {: .no_toc } @@ -101,7 +100,6 @@ layout: default title: UI Components nav_order: 2 has_children: true -permalink: /docs/ui-components --- ``` @@ -140,7 +138,6 @@ title: UI Components nav_order: 2 has_children: true has_toc: false -permalink: /docs/ui-components --- ``` diff --git a/package-lock.json b/package-lock.json index 1d6b72a..d240d07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "just-the-docs", - "version": "0.2.5", + "version": "0.2.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -177,11 +177,11 @@ "dev": true }, "@primer/css": { - "version": "12.6.0", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-12.6.0.tgz", - "integrity": "sha512-GzQr/MPCbTlgvAd4bEXy4RA5cZvz7k/wkCzG7sOmjB9g9EtGnkzmLz6aS58EBRJsxfe6QU/iZ2/N/66/Bn5eZA==", + "version": "12.7.0", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-12.7.0.tgz", + "integrity": "sha512-EVqfwX1jxKWQoV9IxxCJQG7HlyKefdkYTJdnDV43Rr1cyidUTkQN9W0uMuN+RD9cmAzip/40b2E+7gsvsFDmBA==", "requires": { - "@primer/octicons": "9.1.1" + "@primer/octicons": "^9.1.1" } }, "@primer/octicons": { @@ -2776,9 +2776,9 @@ } }, "mixin-deep": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", - "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", + "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", "dev": true, "requires": { "for-in": "^1.0.2", diff --git a/package.json b/package.json index 0c5a8ea..e4deedf 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "stylelint-selector-no-utility": "^4.0.0" }, "dependencies": { - "@primer/css": "^12.6.0" + "@primer/css": "^12.7.0" }, "scripts": { "test": "stylelint '**/*.scss'"