v0.5.3

Fix font-size scaling for text-related CSS properties by using rem instead of fixed px values; deprecate $root-font-size (#1169 )
This PR replaces all uses of `px` in relation to font size (opposed to borders, spacing, etc.) with the equivalent `rem` value when the body font size is `16px`. The intention is to better scale the website when the user changes the font size for `<body>` (often done for accessibility reasons). This PR is technically a **breaking change**, though it's a minor one (see subheading below). I'm putting this up so that we can discuss it as a community. (technically closes #1088 and fixes #1073, but let's see if we end up merging this) ## mechanics To do this, I systematically went through every `px` value for all `.scss` files. Then, I deleted the `rem` function, the `_functions.scss` file (that was the only function there), and removed the import from `support.scss`. A nice side effect of this is that we no longer perform any SASS division. The only remaining uses of `px` are for either: - border-related properties - shadow-related properties - sizing for "non-text" elements (ex `hr`, `blockquote` decorative spacing) - `$root-font-size` (see below) The only pixel value change in this PR is the `padding-left` for `blockquote`, which I've changed from `15px` to `1rem` (which is `16px` in the "stock" theme). ## deprecating `$root-font-size` There's a SCSS variable called `$root-font-size`. It is used in two places: 1. the `rem()` function 2. the `.site-title` when printing (i.e. a `@print` style) The changes I listed above let us ignore the first case. The second case seems like it has the intention of matching the body font size, so I replaced it with `1rem`. We can choose to leave the variable in (in case others use it in custom code - which I'm sure that some do) and leave a deprecation notice, or just remove it now. I'm leaning towards the former, which is less disruptive. ## how users would upgrade This is a breaking change of *some* sorts, but the change is very straightforward for users: 1. If they do not change `$root-font-size`, they need to do nothing; this PR is a no-op. 2. if they do change `$root-font-size` - they should instead set the `font-size` of `body` with the appropriate `px` value - optionally, they can replace all custom code that uses `$root-font-size` with `1rem` (find-and-replace works here)
2025-09-16 14:23:31 -06:00 · 2023-06-17 13:38:02 -07:00 · 2023-06-15 19:11:14 -07:00 · 2023-06-06 21:48:55 -07:00 · 2023-06-06 19:36:04 -07:00 · 2023-06-06 19:34:42 -07:00
56 changed files with 3033 additions and 1455 deletions
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -1,35 +0,0 @@
 references:
  - v+
  - main
 name-template: "v$RESOLVED_VERSION 🌈"
 tag-template: "v$RESOLVED_VERSION"
 categories:
  - title: "🚀 Features"
    labels:
      - "feature"
      - "enhancement"
  - title: "🐛 Bug Fixes"
    labels:
      - "fix"
      - "bugfix"
      - "bug"
  - title: "🧰 Maintenance"
    label:
      - "chore"
      - "dependencies"
 change-template: "- $TITLE @$AUTHOR (#$NUMBER)"
 version-resolver:
  major:
    labels:
      - "next-major-release"
  minor:
    labels:
      - "next-minor-release"
  patch:
    labels:
      - "patch"
  default: minor
 template: |
  ## Changes
  $CHANGES
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -25,14 +25,18 @@ jobs:
      with:
        ruby-version: ${{ matrix.ruby-version }}
        bundler-cache: false
-    - name: Bundle Install
+    - name: Bundle Install (Jekyll ${{ matrix.jekyll-version }})
      run: bundle install
-    - name: Install Jekyll ${{ matrix.jekyll-version }}
+      env:
-      run: gem install jekyll -v ${{ matrix.jekyll-version }}
+        BUNDLE_GEMFILE: fixtures/Gemfile-jekyll-${{ matrix.jekyll-version }}
    - name: Init Search
      run: bundle exec rake search:init
      env:
        BUNDLE_GEMFILE: fixtures/Gemfile-jekyll-${{ matrix.jekyll-version }}
    - name: Build Site
      run: bundle exec jekyll build
      env:
        BUNDLE_GEMFILE: fixtures/Gemfile-jekyll-${{ matrix.jekyll-version }}
  github-pages-build:
    name: Build (github-pages gem)
@@ -45,9 +49,13 @@ jobs:
        ruby-version: '3.1'
        bundler-cache: false
    - name: Bundle Install
-      run: BUNDLE_GEMFILE=fixtures/Gemfile-github-pages bundle install
+      run: bundle install
      env:
        BUNDLE_GEMFILE: fixtures/Gemfile-github-pages
    - name: Build Site
-      run: BUNDLE_GEMFILE=fixtures/Gemfile-github-pages bundle exec jekyll build
+      run: bundle exec jekyll build
      env:
        BUNDLE_GEMFILE: fixtures/Gemfile-github-pages
  assets:
    name: Test CSS and JS
--- a/.github/workflows/publish-gem.yml
+++ b/.github/workflows/publish-gem.yml
@@ -27,13 +27,14 @@ jobs:
        GEM_HOST_API_KEY: "Bearer ${{secrets.GITHUB_TOKEN}}"
        OWNER: ${{ github.repository_owner }}
-    - name: Publish to RubyGems
+    # Disabled as this does not handle 2FA
-      run: |
+    # - name: Publish to RubyGems
-        mkdir -p $HOME/.gem
+    #   run: |
-        touch $HOME/.gem/credentials
+    #     mkdir -p $HOME/.gem
-        chmod 0600 $HOME/.gem/credentials
+    #     touch $HOME/.gem/credentials
-        printf -- "---\n:rubygems_api_key: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
+    #     chmod 0600 $HOME/.gem/credentials
-        gem build *.gemspec
+    #     printf -- "---\n:rubygems_api_key: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
-        gem push *.gem
+    #     gem build *.gemspec
-      env:
+    #     gem push *.gem
-        GEM_HOST_API_KEY: "${{secrets.RUBYGEMS_AUTH_TOKEN}}"
+    #   env:
    #     GEM_HOST_API_KEY: "${{secrets.RUBYGEMS_AUTH_TOKEN}}"
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,3 @@
 package.json
 package-lock.json
 _site
 assets/css/just-the-docs-default.scss
@@ -6,5 +5,7 @@ assets/css/just-the-docs-light.scss
 assets/css/just-the-docs-dark.scss
 assets/js/vendor/lunr.min.js
 assets/js/search-data.json
 assets/js/zzzz-search-data.json
 assets/js/just-the-docs.js
 *.md
 _includes/mermaid_config.js
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +0,0 @@
 {
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
 }
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,20 +0,0 @@
 {
  "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"
  ],
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "alpha-value-notation": null,
    "color-function-notation": null,
    "no-descending-specificity": null,
    "scss/no-global-function-names": null
  }
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,7 @@ The project underwent a major maintenance shift in March 2022.
 This website is built from the `HEAD` of the `main` branch of the theme repository.
 {: .warning }
-This website includes docs for some new features that are not available in `v0.4.1`!
+This website includes docs for some new features that are not available in `v0.5.2`!
 Code changes to `main` that are *not* in the latest release:
@@ -26,6 +26,221 @@ Docs changes in `main` that are *not* in the latest release:
 - N/A
 ## Release v0.5.3
 Hi all, this is a minor patch release that only includes one change: changing all text-based CSS properties to use `rem` instead of hard-coded `px` values. This has two effects:
 1. All deprecation warnings are now fixed on build; you should now get a clean build with `jekyll build`.
 2. We have **deprecated the `$root-font-size` SCSS variable**. We will remove it in an upcoming release of the theme.
 If you use the stock Just the Docs theme, this release should have no impact on your final built site. If you change the `$root-font-size` SCSS variable, you might experience light layout shifts.
 ### Using Release `v0.5.3`
 Users who have not pinned the theme version will be **automatically upgraded to `v0.5.3` the next time they build their site**.
 To use this release explicitly as a remote theme:
 ```yml
 remote_theme: just-the-docs/just-the-docs@v0.5.3
 ```
 To use this version explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`:
 ```ruby
 gem "just-the-docs", "0.5.3"
 ```
 To use and pin a previous version of the theme, replace the `0.5.3` with the desired release tag.
 ### Bugfixes
 - Fixed: font-size scaling for text-related CSS properties by using `rem` instead of fixed `px` values; deprecate `$root-font-size` by [@mattxwang] in [#1169]
 [#1169]: https://github.com/just-the-docs/just-the-docs/pull/1169
 ## Release v0.5.2
 Hi all, this is a minor patch release that mostly focuses on accessibility. Since we follow semantic versioning, this should be a smooth upgrade with no breaking changes.
 In addition, the theme docs website has a new canonical URL: <https://just-the-docs.com>. We've also retroactively published the theme docs website for version `v0.3.3` at <https://v0-3-3-docs.just-the-docs.com/>. Thank you to our GitHub sponsors for funding our domain name!
 ### Using Release `v0.5.2`
 Users who have not pinned the theme version will be **automatically upgraded to `v0.5.2` the next time they build their site**.
 To use this release explicitly as a remote theme:
 ```yml
 remote_theme: just-the-docs/just-the-docs@v0.5.2
 ```
 To use this version explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`:
 ```ruby
 gem "just-the-docs", "0.5.2"
 ```
 To use and pin a previous version of the theme, replace the `0.5.2` with the desired release tag.
 ### Bugfixes
 - Fixed: liquid variable leakage in navigation components by [@pdmosses] in [#1243]
 - Fixed: ARIA roles and labels for search, header, logo, mobile menu button, and main content by [@joelhawksley] in [#1259]
 - Fixed: ARIA labels for all anchors with `href="#"`; adds `aria-pressed` information for toggles by [@mattxwang] in [#1262]
 ### New Contributors
 - [@joelhawksley] made their first contribution in [#1259]
 [@joelhawksley]: https://github.com/joelhawksley
 [#1243]: https://github.com/just-the-docs/just-the-docs/pull/1243
 [#1259]: https://github.com/just-the-docs/just-the-docs/pull/1259
 [#1262]: https://github.com/just-the-docs/just-the-docs/pull/1262
 ## Release v0.5.1
 Hi all, this is a very small minor patch release that has two small behavioral bugfixes: fixing a regression introduced in `v0.5.0` on Safari versions `<16.4` (broken media query), and the copy code button providing incorrect feedback in insecure browser contexts. This should be a smooth upgrade with no breaking changes.
 As always, we'd love your feedback. [Open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) for bug reports, feature requests, and any other feedback. Thanks for continuing to use Just the Docs!
 ### Using Release `v0.5.1`
 Users who have not pinned the theme version will be **automatically upgraded to `v0.5.1` the next time they build their site**.
 To use this release explicitly as a remote theme:
 ```yml
 remote_theme: just-the-docs/just-the-docs@v0.5.1
 ```
 To use this version explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`:
 ```ruby
 gem "just-the-docs", "0.5.1"
 ```
 To use and pin a previous version of the theme, replace the `0.5.1` with the desired release tag.
 ### Bugfixes
 - Fixed: disable copy code button in insecure contexts [@rmoff] in [#1226]
 - Fixed: context-based media feature not supported by Safari `<16.4` by [@mattxwang] in [#1240]
 ### Documentation
 - Added: document copy code button requiring secure context by [@rmoff] in [#1225]
 - Fixed: typo ("them" → "theme") in MIGRATION.md by [@waldyrious] in [#1219]
 - Fixed: `font-weight` typo (Utilities > Typography) by [@mattxwang] in [#1229]
 - Fixed: `just the docs` typo in migration guide by [@mattxwang] in [#1230]
 ### New Contributors
 - [@rmoff] made their first contribution in [#1225]
 [#1219]: https://github.com/just-the-docs/just-the-docs/pull/1219
 [#1225]: https://github.com/just-the-docs/just-the-docs/pull/1225
 [#1226]: https://github.com/just-the-docs/just-the-docs/pull/1226
 [#1229]: https://github.com/just-the-docs/just-the-docs/pull/1229
 [#1230]: https://github.com/just-the-docs/just-the-docs/pull/1230
 [#1240]: https://github.com/just-the-docs/just-the-docs/pull/1240
 [@rmoff]: https://github.com/rmoff
 ## Release v0.5.0
 Hope your April is going well! This new release of Just the Docs is relatively minor. It has one **breaking change**: we've reverted the import order of `setup.scss` to be *before* color schemes. In addition, we include two requested fixes: color contrast issues with `::selection` and using Just the Docs with mermaid versions `>=10`.
 We've marked this as a minor version bump due to the breaking change. In the next section, we briefly outline what migration steps should be. Users who did not migrate to `v0.4.2` or who do not have a custom `setup.scss` are guaranteed no breaking changes.
 As always, we'd love your feedback. [Open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) for bug reports, feature requests, and any other feedback. Thanks for continuing to use Just the Docs!
 ### Migrating to `v0.5.0`
 **Migration**: users with a custom `setup.scss` cannot rely on variables or functions defined in `color_scheme`. This reverts to the behaviour in `v0.4.1`. Users should instead move those variables or functions to the `color_scheme` files themselves.
 For more, refer to the [migration guide](https://just-the-docs.com/MIGRATION/).
 ### Using Release `v0.5.0`
 Users who have not pinned the theme version will be **automatically upgraded to `v0.5.0` the next time they build their site**.
 To use this release explicitly as a remote theme:
 ```yml
 remote_theme: just-the-docs/just-the-docs@v0.5.0
 ```
 To use this version explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`:
 ```ruby
 gem "just-the-docs", "0.5.0"
 ```
 To use and pin a previous version of the theme, replace the `0.5.0` with the desired release tag.
 ### Bugfixes
 - **Reverted (breaking)**: "Fix import order for `setup.scss` (#1184)" by [@mattxwang] in [#1209]
 - Fixed: color contrast issues with `::selection` (reverting to browser defaults) [@mattxwang] in [#1208]
 - Fixed: mermaid `v10`, bundle all mermaid code in component by [@mattxwang] in [#1190]
 - Removed: unused images (`just-the-docs.png`, `search.svg`) by [@mattxwang] in [#1107]
 - Removed: `CODE_OF_CONDUCT`, `docker-compose`, and `Dockerfile` files from site by [@mattxwang] in [#1187]
 **Full Changelog**: [https://github.com/just-the-docs/just-the-docs/compare/v0.4.2...v0.5.0](https://github.com/just-the-docs/just-the-docs/compare/v0.4.2...v0.5.0)
 [#1107]: https://github.com/just-the-docs/just-the-docs/pull/1107
 [#1187]: https://github.com/just-the-docs/just-the-docs/pull/1187
 [#1190]: https://github.com/just-the-docs/just-the-docs/pull/1190
 [#1208]: https://github.com/just-the-docs/just-the-docs/pull/1208
 [#1209]: https://github.com/just-the-docs/just-the-docs/pull/1209
 ## Release v0.4.2
 Hello! We're back again with another small release. Like `v0.4.1`, this release is a [semver patch](https://semver.org/): it only includes bugfixes, and is fully backwards-compatible.
 The big highlight of this theme is fixing our light scheme code highlighting contrast issues; this was one of our most-requested features! This change is fully backwards-compatible; users can [opt-in to our old highlighting theme](https://just-the-docs.com/docs/customization/#deprecated-legacy_light) by using `legacy_light` instead of `light`.
 As always, we'd love your feedback. [Open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) for bug reports, feature requests, and any other feedback. Thanks for continuing to use Just the Docs!
 ### Using Release `v0.4.2`
 Users who have not pinned the theme version will be **automatically upgraded to `v0.4.2` the next time they build their site**.
 To use this release explicitly as a remote theme:
 ```yml
 remote_theme: just-the-docs/just-the-docs@v0.4.2
 ```
 To use this RC explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`:
 ```ruby
 gem "just-the-docs", "0.4.2"
 ```
 To use and pin a previous version of the theme, replace the `0.4.2` with the desired release tag.
 ### Bugfixes
 - Fixed: light scheme code highlighting contrast issues; updated to use Atom's One Light colors, consolidate theme variables by [@mattxwang] in [#1166]
 - Fixed: duplicate import of `color_schemes` by [@mattxwang] in [#1173]
 - Fixed: import order for `setup.scss` by [@mattxwang] in [#1184]
 - Removed: unused dark syntax themes by [@mattxwang] in [#1192]
 ### Documentation
 - Added: docs for using mermaid with AsciiDoc by [@flyx] in [#1182]
 **Full Changelog**: [https://github.com/just-the-docs/just-the-docs/compare/v0.4.1...v0.4.2](https://github.com/just-the-docs/just-the-docs/compare/v0.4.1...v0.4.2)
 [#1166]: https://github.com/just-the-docs/just-the-docs/pull/1166
 [#1173]: https://github.com/just-the-docs/just-the-docs/pull/1173
 [#1182]: https://github.com/just-the-docs/just-the-docs/pull/1182
 [#1184]: https://github.com/just-the-docs/just-the-docs/pull/1184
 [#1192]: https://github.com/just-the-docs/just-the-docs/pull/1192
 ## Release v0.4.1
 Hello! We hope you've been enjoying the new `v0.4.0`; we appreciate all the feedback we've gotten already! As promised, future releases will be small with simple steps to upgrade. This is one of them! `v0.4.1` is a [semver patch](https://semver.org/): it only includes bugfixes, and is fully backwards-compatible.
@@ -86,16 +301,16 @@ We're so excited to release Just the Docs `v0.4.0`. This release has been almost
 `v0.4.0` contains many new features and bugfixes. We enumerate all of them in further sections in this changelog; however, we'd like to call out some of the most-requested changes:
 - better support for dark theme: dark highlighting, search input color
- [callouts](https://just-the-docs.github.io/just-the-docs/docs/ui-components/callouts/), a new design component to highlight content
+- [callouts](https://just-the-docs.com/docs/ui-components/callouts/), a new design component to highlight content
- [configuring mermaid.js](https://just-the-docs.github.io/just-the-docs/docs/ui-components/code/#mermaid-diagram-code-blocks), a markdown-native diagram visualization library
+- [configuring mermaid.js](https://just-the-docs.com/docs/ui-components/code/#mermaid-diagram-code-blocks), a markdown-native diagram visualization library
- [copy code button](https://just-the-docs.github.io/just-the-docs/docs/ui-components/code/#copy-button) for code snippets
+- [copy code button](https://just-the-docs.com/docs/ui-components/code/#copy-button) for code snippets
- [external navigation links](https://just-the-docs.github.io/just-the-docs/docs/navigation-structure/#external-navigation-links)
+- [external navigation links](https://just-the-docs.com/docs/navigation-structure/#external-navigation-links)
 - major improvements to nav generation efficiency and robustness
 - minor improvements to built-in accessibility (SVG icons, nav titles, skip to main content)
- [modularized site components](https://just-the-docs.github.io/just-the-docs/docs/customization/#custom-layouts-and-includes) (advanced feature)
+- [modularized site components](https://just-the-docs.com/docs/customization/#custom-layouts-and-includes) (advanced feature)
- [new custom includes](https://just-the-docs.github.io/just-the-docs/docs/customization/#override-includes): table of contents heading, navigation panel footer, search placeholder, lunr search indices
+- [new custom includes](https://just-the-docs.com/docs/customization/#override-includes): table of contents heading, navigation panel footer, search placeholder, lunr search indices
 - bugfixes involving WEBrick and Ruby 3, Liquid processing in CSS comments, nested task lists, relative URLs, scroll navigation, corrupted search data from rake, breadcrumbs, and more!
- more documentation for [custom includes](https://just-the-docs.github.io/just-the-docs/docs/customization/#override-includes), this changelog, and the [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/)
+- more documentation for [custom includes](https://just-the-docs.com/docs/customization/#override-includes), this changelog, and the [migration guide](https://just-the-docs.com/MIGRATION/)
 *After usage instructions and the roadmap, we enumerate all changes from `v0.3.3`.*
@@ -128,7 +343,7 @@ remote_theme: just-the-docs/just-the-docs@v0.3.3
 ### Migration Guide and Strategies
-We've developed a new [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/) for users to migrate from version `v0.3.3` to `v0.4.0`. It outlines major changes in project maintenance (e.g. new repository link, team) as well as breaking changes that may break your site (and potential solutions). We suggest that all users refer to the guide before manually upgrading their site.
+We've developed a new [migration guide](https://just-the-docs.com/MIGRATION/) for users to migrate from version `v0.3.3` to `v0.4.0`. It outlines major changes in project maintenance (e.g. new repository link, team) as well as breaking changes that may break your site (and potential solutions). We suggest that all users refer to the guide before manually upgrading their site.
 **For the vast majority of users, we do not anticipate that this will be a breaking change.** The major touch points are surrounding new includes, navigation (ordering, pages, and collections), the favicon, and a shift to relative URLs. However, users who heavily customize the theme (primarily by overriding includes) will likely have to make minor changes.
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -6,7 +6,7 @@ layout: default
 # Migrating and Upgrading
 Summary
-:   A site that uses `just-the-docs` (as a theme or as a remote them) automatically
+:   A site that uses `just-the-docs` (as a theme or as a remote theme) automatically
    switches to a new release, unless it is pinned to a previous version.
    This migration guide draws attention to:
@@ -33,7 +33,7 @@ This document contains instructions on how to migrate and upgrade Just the Docs
 > website is built using the current `main` branch of the theme, which may include
 > changes made after the latest release; see the [CHANGELOG].
 >
-> If your configuration states `theme: just the docs` and your `Gemfile` specifies
+> If your configuration states `theme: just_the_docs` and your `Gemfile` specifies
 > `gem "just-the-docs"`, your website is always built using the latest release.
 {: .note }
@@ -43,6 +43,25 @@ This document contains instructions on how to migrate and upgrade Just the Docs
 [CHANGELOG]: {{ site.baseurl }}{% link CHANGELOG.md %}
 ## v0.4.x - v0.5.0
 ### POTENTIALLY-BREAKING CHANGES in v0.5.0
 There is one potentially-breaking change for users migrating from `v0.4.2` to `v0.5.0` concering `setup.scss`. To provide context:
 1. `setup.scss` was introduced in `v0.4.0`
 2. in `v0.4.0` and `v0.4.1`, `setup.scss` was imported *before* color scheme SCSS code
 3. in `v0.4.2`, we adjusted the order to import `setup.scss` *after* color scheme SCSS code
 4. in `v0.5.0`, we have reverted the previous change: `setup.scss` is now again imported *before* color scheme SCSS code
 This does not affect most users. Users who did not migrate to `v0.4.2` or who do not have a custom `setup.scss` are guaranteed no breaking changes.
 Explicit migration steps are only needed if:
 1. a custom `setup.scss` has been defined,
 2. **and** the `setup.scss` depends on variables or functions defined in color scheme SCSS code; this change was only possible on `v0.4.2`
 For those users, we suggest moving those variables and functions to each relevant color scheme.
 ## v0.3.3 … v0.4.x
 ### REPOSITORY CHANGES
@@ -52,7 +71,7 @@ This document contains instructions on how to migrate and upgrade Just the Docs
 The theme repo is now at <https://github.com/just-the-docs/just-the-docs>.
 The name of its default branch is now `main`.
-The theme docs website is now published at <https://just-the-docs.github.io/just-the-docs>.
+The theme docs website is now published at <https://just-the-docs.github.io/just-the-docs>. We've also retroactively published the theme docs website for version `v0.3.3` at <https://v0-3-3-docs.just-the-docs.com/>.
 GitHub provides access to previous versions of the theme repo.
 You can browse [previous versions of the theme docs website] on the [Internet Archive].
@@ -65,7 +84,7 @@ formatted for browsing on GitHub.
 It also explains how to install the theme as a Ruby Gem, without creating a new site.
 [README]: https://github.com/just-the-docs/just-the-docs/blob/main/README.md
-[home page]: https://just-the-docs.github.io/just-the-docs
+[home page]: https://just-the-docs.com
 #### Deploy previews
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 <p align="center">
    <h1 align="center">Just the Docs</h1>
    <p align="center">A modern, highly customizable, and responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub Pages with few dependencies.</p>
-    <p align="center"><strong><a href="https://just-the-docs.github.io/just-the-docs/">See it in action!</a></strong></p>
+    <p align="center"><strong><a href="https://just-the-docs.com/">See it in action!</a></strong></p>
    <br><br><br>
 </p>
@@ -102,7 +102,7 @@ The theme is available as open source under the terms of the [MIT License](http:
 [Jekyll]: https://jekyllrb.com
 [Just the Docs Template]: https://just-the-docs.github.io/just-the-docs-template/
-[Just the Docs]: https://just-the-docs.github.io/just-the-docs/
+[Just the Docs]: https://just-the-docs.com
 [Just the Docs repo]: https://github.com/just-the-docs/just-the-docs
 [GitHub Pages]: https://pages.github.com/
 [Template README]: https://github.com/just-the-docs/just-the-docs-template/blob/main/README.md
--- a/_config.yml
+++ b/_config.yml
@@ -15,8 +15,8 @@
 # in the templates via {{ site.myvariable }}.
 title: Just the Docs
 description: A Jekyll theme for documentation
-baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
+baseurl: "" # the subpath of your site, e.g. /blog
-url: "https://just-the-docs.github.io" # the base hostname & protocol for your site, e.g. http://example.com
+url: "https://just-the-docs.com" # the base hostname & protocol for your site, e.g. http://example.com
 repository: just-the-docs/just-the-docs # for github-metadata
 permalink: pretty
@@ -43,6 +43,9 @@ exclude:
   - package-lock.json
   - Rakefile
   - README.md
   - CODE_OF_CONDUCT.md
   - docker-compose.yml
   - Dockerfile
 # theme test code
   - fixtures/
@@ -79,8 +82,6 @@ search:
 # For copy button on code
 enable_copy_code_button: true
 # To disable support for mermaid diagrams (https://mermaid.js.org),
 # comment out the `mermaid` and `version` keys below
 # By default, consuming the theme as a gem leaves mermaid disabled; it is opt-in
 mermaid:
  # Version of mermaid library
@@ -88,8 +89,12 @@ mermaid:
  version: "9.1.6"
  # Put any additional configuration, such as setting the theme, in _includes/mermaid_config.js
  # See also docs/ui-components/code
-  # To load mermaid from a local file use the `path` key to specify the location of the library instead; e.g.
+  # To load mermaid from a local library, also use the `path` key to specify the location of the library; e.g.
  # for (v10+):
  # path: "/assets/js/mermaid.esm.min.mjs"
  # for (<v10):
  # path: "/assets/js/mermaid.min.js"
  # Note: copy both `mermaid.esm.min.mjs` (v10+) or `mermaid.min.js` (<v10) and the associated `.map` file from the specified version of `mermaid/dist` to `/assets/js/`.
 # Enable or disable heading anchors
 heading_anchors: true
--- a/_includes/components/breadcrumbs.html
+++ b/_includes/components/breadcrumbs.html
@@ -1,15 +1,43 @@
-{% unless page.url == "/" %}
+{%- comment -%}
-  {% if page.parent %}
+  Include as: {%- include components/breadcrumbs.html -%}
  Depends on: page, site.
  Results in: HTML for the breadcrumbs component.
  Overwrites:
    pages_list, parent_page, grandparent_page.
 {%- endcomment -%}
 {%- if page.url != "/" and page.parent -%}
  {%- assign pages_list = site[page.collection]
      | default: site.html_pages
      | where_exp: "item", "item.title != nil"
      | where_exp: "item", "item.has_children != nil" -%}
  {%- if page.grand_parent -%}
    {%- assign parent_page = pages_list
        | where: "title", page.parent
        | where: "parent", page.grand_parent
        | first -%}
    {%- assign grandparent_page = pages_list
        | where: "title", page.grand_parent
        | first -%}
  {%- else -%}
    {%- assign parent_page = pages_list
        | where: "title", page.parent
        | where_exp: "item", "item.parent == nil"
        | first -%}
  {%- endif -%}
 <nav aria-label="Breadcrumb" class="breadcrumb-nav">
  <ol class="breadcrumb-nav-list">
-        {% if page.grand_parent %}
+  {% if page.parent -%}
-          <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+  {%- if page.grand_parent %}
-          <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+    <li class="breadcrumb-nav-list-item"><a href="{{ grandparent_page.url | relative_url }}">{{ page.grand_parent }}</a></li>
-        {% else %}
+  {%- endif %}
-          <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+    <li class="breadcrumb-nav-list-item"><a href="{{ parent_page.url | relative_url }}">{{ page.parent }}</a></li>
-        {% endif %}
+  {% endif -%}
    <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
  </ol>
 </nav>
-  {% endif %}
+
-{% endunless %}
+{%- endif -%}
--- a/_includes/components/children_nav.html
+++ b/_includes/components/children_nav.html
@@ -1,7 +1,31 @@
 {%- comment -%}
  Include as: {%- include components/children_nav.html -%}
  Depends on: page, site.
  Results in: HTML for the children-navigation component.
  Includes:
    sorted_pages.html
    toc_heading_custom.html
  Overwrites:
    child_pages.
 {%- endcomment -%}
 {%- if page.has_children == true and page.has_toc != false -%}
  {%- assign child_pages = site[page.collection]
        | default: site.html_pages
        | where: "parent", page.title
        | where: "grand_parent", page.parent -%}
  {%- include sorted_pages.html pages = child_pages -%}
  {%- if page.child_nav_order == 'desc' or page.child_nav_order == 'reversed' -%}
    {%- assign sorted_pages = sorted_pages | reverse -%}
  {%- endif -%}
 {%- endif -%}
 <hr>
 {% include toc_heading_custom.html %}
 <ul>
-  {% for child in include.toc_list %}
+{% for child in sorted_pages %}
  <li>
    <a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
  </li>
--- a/_includes/components/mermaid.html
+++ b/_includes/components/mermaid.html
@@ -1,5 +1,45 @@
 {% comment %}
 The complexity of this file comes from a breaking change in Mermaid v10; mermaid.init has been deprecated (and supposedly, didn't work earlier?).
 So, we check whether the user's Mermaid version is >= 10; if not, we fall back to the previous init syntax.
 If a user is using a custom mermaid file and doesn't specify a version, we default to the < v10 behaviour. Users who use version v10 or above should specify this in the version key.
 {% endcomment %}
 {% if site.mermaid.version %}
  {% assign mermaid_major_version = site.mermaid.version | split: "." | first | plus: 0 %}
 {% else %}
  {% assign mermaid_major_version = 9 %}
 {% endif %}
 {% if mermaid_major_version > 9 %}
 <script type="module">
  {% if site.mermaid.path %}
  import mermaid from '{{ site.mermaid.path | relative_url }}';
  {% else %}
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.esm.min.mjs';
  {% endif %}
  var config = {% include mermaid_config.js %};
  mermaid.initialize(config);
  mermaid.run({
    querySelector: '.language-mermaid',
  });
 </script>
 {% else %}
 {% if site.mermaid.path %}
  <script src="{{ site.mermaid.path | relative_url }}"></script>
 {% else %}
  <script src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"></script>
 {% endif %}
 <script>
  var config = {% include mermaid_config.js %};
  mermaid.initialize(config);
  window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
 </script>
 {% endif %}
--- a/_includes/components/search_footer.html
+++ b/_includes/components/search_footer.html
@@ -1,7 +1,7 @@
 {% if site.search.button %}
-<a href="#" id="search-button" class="search-button">
+<button id="search-button" class="search-button btn-reset" aria-label="Focus on search">
-  <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+  <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
-</a>
+</button>
 {% endif %}
 <div class="search-overlay"></div>
--- a/_includes/components/search_header.html
+++ b/_includes/components/search_header.html
@@ -1,6 +1,6 @@
 {% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
-<div class="search">
+<div class="search" role="search">
  <div class="search-input-wrap">
    <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">
    <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
--- a/_includes/components/sidebar.html
+++ b/_includes/components/sidebar.html
@@ -1,8 +1,8 @@
 <div class="side-bar">
-  <div class="site-header">
+  <div class="site-header" role="banner">
    <a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
-    <a href="#" id="menu-button" class="site-button">
+    <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
-      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
+      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
    </a>
  </div>
  <nav aria-label="Main" id="site-nav" class="site-nav">
@@ -38,7 +38,9 @@
              <ul class="nav-list nav-category-list">
                <li class="nav-list-item{% if page.collection == collection_key %} active{% endif %}">
                  {%- if collection.size > 0 -%}
-                  <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
+                  <button class="nav-list-expander btn-reset" aria-label="Toggle collection {{ collection_value.name }}" aria-pressed="{% if page.collection == collection_key %}true{% else %}false{% endif %}">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
                  </button>
                  {%- endif -%}
                  <div class="nav-category">{{ collection_value.name }}</div>
                  {% include nav.html pages=collection key=collection_key %}
--- a/_includes/css/just-the-docs.scss.liquid
+++ b/_includes/css/just-the-docs.scss.liquid
@@ -4,7 +4,9 @@ $logo: "{{ site.logo | relative_url }}";
@import "./support/support";
@import "./custom/setup";
@import "./color_schemes/light";
 {% unless include.color_scheme == "light" %}
@import "./color_schemes/{{ include.color_scheme }}";
 {% endunless %}
@import "./modules";
 {% include css/callouts.scss.liquid color_scheme = include.color_scheme %}
 {% include css/custom.scss.liquid %}
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -22,14 +22,6 @@
    <script src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
  {% endif %}
  {% if site.mermaid %}
    {% if site.mermaid.path %}
      <script src="{{ site.mermaid.path | relative_url }}"></script>
    {% else %}
      <script src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"></script>
    {% endif %}
  {% endif %}
  <script src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,137 +1,31 @@
 {%- comment -%}
-  The `nav_order` values of pages affect the order in which they are shown in
+  Include as: {%- include nav.html pages = pages key = key -%}
-  the navigation panel and in the automatically generated tables of contents.
+  Depends on: include.pages, include.key, page, site.
-  Sibling pages with the same `nav_order` value may be shown in any order.
+  Results in: HTML for the navigation panel.
-  Sibling pages with no `nav_order` value are shown after all pages that have
+  Includes:
-  explicit `nav_order` values, ordered by their `title` values.
+    sorted_pages.html
-  
+  Overwrites:
-  The `nav_order` and `title` values can be numbers or strings. To avoid build
+    nav_pages, first_level_pages, second_level_pages, third_level_pages,
-  failures, we sort numbers and strings separately. We sort numbers by their
+    node, children_list, child, grand_children_list, grand_child.
  values, and strings lexicographically. The case-sensitivity of string sorting
  is determined by the configuration setting of `nav_sort`. Pages with no `title`
  value are excluded from the navigation.
  Note: Numbers used as `title` or `nav_order` values should not be in quotes,
  unless you intend them to be lexicographically ordered. Numbers are written
  without spaces or thousands-separators. Negative numbers are preceded by `-`.
  Floats are written with the integral and fractional parts separated by `.`.
  (Bounds on the magnitude and precision are presumably the same as in Liquid.)
 {%- endcomment -%}
-{%- assign title_pages = include.pages
+{%- assign nav_pages = include.pages
-      | where_exp: "item", "item.title != nil" -%}
+    | where_exp: "item", "item.title != nil"
    | where_exp: "item", "item.nav_exclude != true" -%}
-{%- comment -%}
+{%- include sorted_pages.html pages = nav_pages -%}
  A page with `nav_exclude: true` does not appear in the main navigation.
  If it has a `parent`, it may appear in the parent's table of contents.
  If it specifies `has_children: true`, it should appear in the breadcrumbs
  of the child pages, but its order in relation to other pages is irrelevant.
  Pages that never appear can be removed from the pages that need to be sorted.
  This optimisation can be significant on a site with many pages.
-  In Jekyll 4, the pages to be sorted can be filtered by:
+{%- assign first_level_pages = sorted_pages
  {%- assign title_pages = title_pages
        | where_exp: "item", "item.nav_exclude != true or item.parent != nil" -%}
  That filter is not allowed in Jekyll 3. The following iterative code gives the
  same effect, but it is activated only when it will filter more than 50% of the
  pages.
 {%- endcomment -%}
 {%- unless title_pages == empty -%}
  {%- assign unsorted_pages = title_pages
        | where_exp: "item", "item.parent == nil" 
        | where_exp: "item", "item.nav_exclude == true" -%}
  {%- assign title_pages_size = title_pages.size -%}
  {%- assign unsorted_pages_percent = unsorted_pages.size
        | times: 100 | divided_by: title_pages_size -%}
  {%- if unsorted_pages_percent > 50 -%}
    {%- assign sorted_pages = "" | split: "" -%}
    {%- for item in title_pages -%}
      {%- if item.nav_exclude != true or item.parent -%}
        {%- assign sorted_pages = sorted_pages | push: item -%}
      {%- endif -%}
    {%- endfor -%}
    {%- assign title_pages = sorted_pages -%}
  {%- endif -%}
 {%- endunless -%}
 {%- assign nav_order_pages = title_pages
      | where_exp: "item", "item.nav_order != nil" -%}
 {%- assign title_order_pages = title_pages
      | where_exp: "item", "item.nav_order == nil" -%}
 {%- comment -%}
  Divide the arrays of `nav_order_pages` and `title_order_pages` according to
  the type of value.
  The first character of the result of `jsonify` is `"` only for strings.
  Grouping by a single character also ensures the number of groups is small.
 {%- endcomment -%}
 {%- assign nav_number_pages = "" | split: "" -%}
 {%- assign nav_string_pages = "" | split: "" -%}
 {%- assign nav_order_groups = nav_order_pages
      | group_by_exp: "item", "item.nav_order | jsonify | slice: 0" -%}
 {%- for group in nav_order_groups -%}
  {%- if group.name == '"' -%}
    {%- assign nav_string_pages = group.items -%}
  {%- else -%}
    {%- assign nav_number_pages = nav_number_pages | concat: group.items -%}
  {%- endif -%}
 {%- endfor -%}
 {%- unless nav_number_pages == empty -%}
  {%- assign nav_number_pages = nav_number_pages | sort: "nav_order" -%}
 {%- endunless -%}
 {%- unless nav_string_pages == empty -%}
  {%- if site.nav_sort == 'case_insensitive' -%}
    {%- assign nav_string_pages = nav_string_pages | sort_natural: "nav_order" -%}
  {%- else -%}
    {%- assign nav_string_pages = nav_string_pages | sort: "nav_order" -%}
  {%- endif -%}
 {%- endunless -%}
 {%- assign title_number_pages = "" | split: "" -%}
 {%- assign title_string_pages = "" | split: "" -%}
 {%- assign title_order_groups = title_order_pages
      | group_by_exp: "item", "item.title | jsonify | slice: 0" -%}
 {%- for group in title_order_groups -%}
  {%- if group.name == '"' -%}
    {%- assign title_string_pages = group.items -%}
  {%- else -%}
    {%- assign title_number_pages = title_number_pages | concat: group.items -%}
  {%- endif -%}
 {%- endfor -%}
 {%- unless title_number_pages == empty -%}
  {%- assign title_number_pages = title_number_pages | sort: "title" -%}
 {%- endunless -%}
 {%- unless title_string_pages == empty -%}
  {%- if site.nav_sort == 'case_insensitive' -%}
    {%- assign title_string_pages = title_string_pages | sort_natural: "title" -%}
  {%- else -%}
    {%- assign title_string_pages = title_string_pages | sort: "title" -%}
  {%- endif -%}
 {%- endunless -%}
 {%- assign pages_list = nav_number_pages | concat: nav_string_pages
      | concat: title_number_pages | concat: title_string_pages -%}
 {%- assign first_level_pages = pages_list
    | where_exp: "item", "item.parent == nil" -%}
-{%- assign second_level_pages = pages_list
+{%- assign second_level_pages = sorted_pages
    | where_exp: "item", "item.parent != nil"
    | where_exp: "item", "item.grand_parent == nil" -%}
-{%- assign third_level_pages = pages_list
+{%- assign third_level_pages = sorted_pages
    | where_exp: "item", "item.grand_parent != nil" -%}
 {%- comment -%}
-  The order of sibling pages in `pages_list` determines the order of display of
+  The order of sibling pages in `sorted_pages` determines the order of display of
-  links to them in lists of navigation links and in auto-generated TOCs.
+  links to them in lists of navigation links.
  Note that Liquid evaluates conditions from right to left (and it does not allow
  the use of parentheses). Some conditions are not so easy to express clearly...
@@ -163,9 +57,9 @@
    {%- unless node.nav_exclude -%}
      <li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil %} active{% endif %}">
        {%- if node.has_children -%}
-          <a href="#" class="nav-list-expander" aria-label="toggle links in {{ node.title }} category">
+        <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ node.title }} category" aria-pressed="{% if page.collection == include.key and page.url == node.url or page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil %}true{% else %}false{% endif %}">
-            <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
+          <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
-          </a>
+        </button>
        {%- endif -%}
        <a href="{{ node.url | relative_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
        {%- if node.has_children -%}
@@ -179,9 +73,9 @@
            {%- unless child.nav_exclude -%}
            <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
              {%- if child.has_children -%}
-                <a href="#" class="nav-list-expander" aria-label="toggle links in {{ child.title }} category">
+                <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ child.title }} category" aria-pressed="{% if page.url == child.url or page.parent == child.title %}true{% else %}false{% endif %}">
-                  <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
-                </a>
+                </button>
              {%- endif -%}
              <a href="{{ child.url | relative_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
              {%- if child.has_children -%}
@@ -210,42 +104,3 @@
    {%- endunless -%}
 {%- endfor -%}
 </ul>
 {%- comment -%}
  `page.collection` is the name of the Jekyll collection that contains the page,
  if any, and otherwise nil. Similarly for `include.key`.
  If the current page is in the collection (if any) whose navigation is currently
  being generated, the following code sets `first_level_url` to the URL used in
  the page's top-level breadcrumb (if any), and `second_level_url` to that used
  in the page's second-level breadcrumb (if any).
  For pages with children, the code also sets `toc_list` to the list of child pages,
  reversing the order if needed.
 {%- endcomment -%}
 {%- if page.collection == include.key -%}
  {%- for node in first_level_pages -%}
      {%- if page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil -%}
        {%- assign first_level_url = node.url | relative_url -%}
      {%- endif -%}
      {%- if node.has_children -%}
        {%- assign children_list = second_level_pages | where: "parent", node.title -%}
        {%- for child in children_list -%}
          {%- if child.has_children -%}
            {%- if page.url == child.url or page.parent == child.title and page.grand_parent == child.parent -%}
              {%- assign second_level_url = child.url | relative_url -%}
            {%- endif -%}
          {%- endif -%}
        {%- endfor -%}
      {%- endif -%}
  {%- endfor -%}
  {%- if page.has_children == true and page.has_toc != false -%}
    {%- assign toc_list = pages_list
          | where: "parent", page.title
          | where_exp: "item", "item.grand_parent == page.parent" -%}
    {%- if page.child_nav_order == 'desc' or page.child_nav_order == 'reversed' -%}
      {%- assign toc_list = toc_list | reverse -%}
    {%- endif -%}
  {%- endif -%}
 {%- endif -%}
--- a/_includes/sorted_pages.html
+++ b/_includes/sorted_pages.html
@@ -0,0 +1,95 @@
 {%- comment -%}
  Include as: {%- include sorted_pages.html pages = pages -%}
  Depends on: include.pages.
  Assigns to: sorted_pages.
  Overwrites: 
    nav_order_pages, title_order_pages, 
    nav_number_pages, nav_string_pages, nav_order_groups, group,
    title_number_pages, title_string_pages, title_order_groups.
 {%- endcomment -%}
 {%- comment -%}
  The `nav_order` values of pages affect the order in which they are shown in
  the navigation panel and in the automatically generated tables of contents.
  Sibling pages with the same `nav_order` value may be shown in any order.
  Sibling pages with no `nav_order` value are shown after all pages that have
  explicit `nav_order` values, ordered by their `title` values.
  The `nav_order` and `title` values can be numbers or strings. To avoid build
  failures, we sort numbers and strings separately. We sort numbers by their
  values, and strings lexicographically. The case-sensitivity of string sorting
  is determined by the configuration setting of `nav_sort`. Pages with no `title`
  value are excluded from the navigation.
  Note: Numbers used as `title` or `nav_order` values should not be in quotes,
  unless you intend them to be lexicographically ordered. Numbers are written
  without spaces or thousands-separators. Negative numbers are preceded by `-`.
  Floats are written with the integral and fractional parts separated by `.`.
  (Bounds on the magnitude and precision are presumably the same as in Liquid.)
 {%- endcomment -%}
 {%- assign nav_order_pages = include.pages
    | where_exp: "item", "item.nav_order != nil" -%}
 {%- assign title_order_pages = include.pages
    | where_exp: "item", "item.nav_order == nil" -%}
 {%- comment -%}
  Divide the arrays of `nav_order_pages` and `title_order_pages` according to
  the type of value.
  The first character of the result of `jsonify` is `"` only for strings.
  Grouping by a single character also ensures the number of groups is small.
 {%- endcomment -%}
 {%- assign nav_number_pages = "" | split: "" -%}
 {%- assign nav_string_pages = "" | split: "" -%}
 {%- assign nav_order_groups = nav_order_pages
  | group_by_exp: "item", "item.nav_order | jsonify | slice: 0" -%}
 {%- for group in nav_order_groups -%}
  {%- if group.name == '"' -%}
    {%- assign nav_string_pages = group.items -%}
  {%- else -%}
    {%- assign nav_number_pages = nav_number_pages | concat: group.items -%}
  {%- endif -%}
 {%- endfor -%}
 {%- unless nav_number_pages == empty -%}
  {%- assign nav_number_pages = nav_number_pages | sort: "nav_order" -%}
 {%- endunless -%}
 {%- unless nav_string_pages == empty -%}
  {%- if site.nav_sort == 'case_insensitive' -%}
    {%- assign nav_string_pages = nav_string_pages | sort_natural: "nav_order" -%}
  {%- else -%}
    {%- assign nav_string_pages = nav_string_pages | sort: "nav_order" -%}
  {%- endif -%}
 {%- endunless -%}
 {%- assign title_number_pages = "" | split: "" -%}
 {%- assign title_string_pages = "" | split: "" -%}
 {%- assign title_order_groups = title_order_pages
    | group_by_exp: "item", "item.title | jsonify | slice: 0" -%}
 {%- for group in title_order_groups -%}
  {%- if group.name == '"' -%}
    {%- assign title_string_pages = group.items -%}
  {%- else -%}
    {%- assign title_number_pages = title_number_pages | concat: group.items -%}
  {%- endif -%}
 {%- endfor -%}
 {%- unless title_number_pages == empty -%}
  {%- assign title_number_pages = title_number_pages | sort: "title" -%}
 {%- endunless -%}
 {%- unless title_string_pages == empty -%}
  {%- if site.nav_sort == 'case_insensitive' -%}
    {%- assign title_string_pages = title_string_pages | sort_natural: "title" -%}
  {%- else -%}
    {%- assign title_string_pages = title_string_pages | sort: "title" -%}
  {%- endif -%}
 {%- endunless -%}
 {%- assign sorted_pages = nav_number_pages
    | concat: nav_string_pages
    | concat: title_number_pages
    | concat: title_string_pages -%}
--- a/_includes/title.html
+++ b/_includes/title.html
@@ -1,5 +1,5 @@
 {% if site.logo %}
-  <div class="site-logo"></div>
+  <div class="site-logo" role="img" aria-label="{{ site.title }}"></div>
 {% else %}
  {{ site.title }}
 {% endif %}
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -14,7 +14,8 @@ layout: table_wrappers
    {% include components/header.html %}
    <div id="main-content-wrap" class="main-content-wrap">
      {% include components/breadcrumbs.html %}
-      <div id="main-content" class="main-content" role="main">
+      <div id="main-content" class="main-content">
        <main>
          {% if site.heading_anchors != false %}
            {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
          {% else %}
@@ -22,11 +23,10 @@ layout: table_wrappers
          {% endif %}
          {% if page.has_children == true and page.has_toc != false %}
-          {% include components/children_nav.html toc_list=toc_list %}
+            {% include components/children_nav.html %}
          {% endif %}
-
+        </main>
        {% include components/footer.html %}
      </div>
    </div>
    {% if site.search_enabled != false %}
--- a/_layouts/minimal.html
+++ b/_layouts/minimal.html
@@ -9,32 +9,6 @@ layout: table_wrappers
 <body>
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  {% include icons/icons.html %}
  {% comment %}
    This is a bandaid fix to properly render breadcrumbs; as of now, there is some variable leakage between the sidebar component (which computes parents, grandparents) and the breadcrumbs component. We plan to remove this in a future release to deduplicate code.
    For more context, see https://github.com/just-the-docs/just-the-docs/pull/1058#discussion_r1057014053
  {% endcomment %}
  {% capture nav %}
    {% assign pages_top_size = site.html_pages
          | where_exp:"item", "item.title != nil"
          | where_exp:"item", "item.parent == nil"
          | where_exp:"item", "item.nav_exclude != true"
          | size %}
    {% if pages_top_size > 0 %}
      {% include nav.html pages=site.html_pages key=nil %}
    {% endif %}
    {% if site.just_the_docs.collections %}
      {% assign collections_size = site.just_the_docs.collections | size %}
      {% for collection_entry in site.just_the_docs.collections %}
        {% assign collection_key = collection_entry[0] %}
        {% assign collection_value = collection_entry[1] %}
        {% assign collection = site[collection_key] %}
        {% if collection_value.nav_exclude != true %}
          {% include nav.html pages=collection key=collection_key %}
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endcapture %}
  <div id="main-content-wrap" class="main-content-wrap" id="top">
    {% include components/breadcrumbs.html %}
    <div id="main-content" class="main-content" role="main">
@@ -45,7 +19,7 @@ layout: table_wrappers
      {% endif %}
      {% if page.has_children == true and page.has_toc != false %}
-        {% include components/children_nav.html toc_list=toc_list %}
+        {% include components/children_nav.html %}
      {% endif %}
      {% include components/footer.html %}
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -5,11 +5,6 @@
  box-sizing: border-box;
 }
 ::selection {
  color: $white;
  background: $link-color;
 }
 html {
  @include fs-4;
@@ -109,6 +104,6 @@ blockquote {
  // resets user-agent stylesheets for blockquotes
  margin-block-start: 0;
  margin-inline-start: 0;
-  padding-left: 15px;
+  padding-left: 1rem;
  border-left: 3px solid $border-color;
 }
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -111,3 +111,13 @@
 .btn-green {
  @include btn-color($white, $green-100);
 }
 .btn-reset {
  background: none;
  border: none;
  margin: 0;
  text-align: inherit;
  font: inherit;
  border-radius: 0;
  appearance: none;
 }
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -1,32 +1,17 @@
 $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;
+$body-text-color: $grey-lt-300;
 $search-result-preview-color: $grey-dk-000;
 $link-color: $blue-000;
-$btn-primary-color: $blue-200;
+$nav-child-link-color: $grey-dk-000;
 $sidebar-color: $grey-dk-300;
 $base-button-color: $grey-dk-250;
-$search-background-color: $grey-dk-250;
+$btn-primary-color: $blue-200;
 $table-background-color: $grey-dk-250;
 $feedback-color: darken($sidebar-color, 3%);
 // The following highlight theme is more legible than that used for the light color scheme
 // @import "./vendor/OneDarkJekyll/syntax-one-dark";
 // $code-background-color: #282c34; // OneDarkJekyll default for syntax-one-dark
 // $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-one-dark
@import "./vendor/OneDarkJekyll/syntax-one-dark-vivid";
 $code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
 $code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
 $feedback-color: darken($sidebar-color, 3%);
 $table-background-color: $grey-dk-250;
 $search-background-color: $grey-dk-250;
 $search-result-preview-color: $grey-dk-000;
 $border-color: $grey-dk-200;
-// @import "./vendor/OneDarkJekyll/syntax-firewatch";
+@import "./vendor/OneDarkJekyll/syntax"; // this is the one-dark-vivid atom syntax theme
 // $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch
 // $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch
 // @import "./vendor/OneDarkJekyll/syntax-firewatch-green";
 // $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch-green
 // $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch-green
--- a/_sass/color_schemes/legacy_light.scss
+++ b/_sass/color_schemes/legacy_light.scss
@@ -0,0 +1,208 @@
 // Moved from _sass/code.scss
 .highlight .c {
  color: #586e75;
 } // comment //
 .highlight .err {
  color: #93a1a1;
 } // error //
 .highlight .g {
  color: #93a1a1;
 } // generic //
 .highlight .k {
  color: #859900;
 } // keyword //
 .highlight .l {
  color: #93a1a1;
 } // literal //
 .highlight .n {
  color: #93a1a1;
 } // name //
 .highlight .o {
  color: #859900;
 } // operator //
 .highlight .x {
  color: #cb4b16;
 } // other //
 .highlight .p {
  color: #93a1a1;
 } // punctuation //
 .highlight .cm {
  color: #586e75;
 } // comment.multiline //
 .highlight .cp {
  color: #859900;
 } // comment.preproc //
 .highlight .c1 {
  color: #586e75;
 } // comment.single //
 .highlight .cs {
  color: #859900;
 } // comment.special //
 .highlight .gd {
  color: #2aa198;
 } // generic.deleted //
 .highlight .ge {
  font-style: italic;
  color: #93a1a1;
 } // generic.emph //
 .highlight .gr {
  color: #dc322f;
 } // generic.error //
 .highlight .gh {
  color: #cb4b16;
 } // generic.heading //
 .highlight .gi {
  color: #859900;
 } // generic.inserted //
 .highlight .go {
  color: #93a1a1;
 } // generic.output //
 .highlight .gp {
  color: #93a1a1;
 } // generic.prompt //
 .highlight .gs {
  font-weight: bold;
  color: #93a1a1;
 } // generic.strong //
 .highlight .gu {
  color: #cb4b16;
 } // generic.subheading //
 .highlight .gt {
  color: #93a1a1;
 } // generic.traceback //
 .highlight .kc {
  color: #cb4b16;
 } // keyword.constant //
 .highlight .kd {
  color: #268bd2;
 } // keyword.declaration //
 .highlight .kn {
  color: #859900;
 } // keyword.namespace //
 .highlight .kp {
  color: #859900;
 } // keyword.pseudo //
 .highlight .kr {
  color: #268bd2;
 } // keyword.reserved //
 .highlight .kt {
  color: #dc322f;
 } // keyword.type //
 .highlight .ld {
  color: #93a1a1;
 } // literal.date //
 .highlight .m {
  color: #2aa198;
 } // literal.number //
 .highlight .s {
  color: #2aa198;
 } // literal.string //
 .highlight .na {
  color: #555;
 } // name.attribute //
 .highlight .nb {
  color: #b58900;
 } // name.builtin //
 .highlight .nc {
  color: #268bd2;
 } // name.class //
 .highlight .no {
  color: #cb4b16;
 } // name.constant //
 .highlight .nd {
  color: #268bd2;
 } // name.decorator //
 .highlight .ni {
  color: #cb4b16;
 } // name.entity //
 .highlight .ne {
  color: #cb4b16;
 } // name.exception //
 .highlight .nf {
  color: #268bd2;
 } // name.function //
 .highlight .nl {
  color: #555;
 } // name.label //
 .highlight .nn {
  color: #93a1a1;
 } // name.namespace //
 .highlight .nx {
  color: #555;
 } // name.other //
 .highlight .py {
  color: #93a1a1;
 } // name.property //
 .highlight .nt {
  color: #268bd2;
 } // name.tag //
 .highlight .nv {
  color: #268bd2;
 } // name.variable //
 .highlight .ow {
  color: #859900;
 } // operator.word //
 .highlight .w {
  color: #93a1a1;
 } // text.whitespace //
 .highlight .mf {
  color: #2aa198;
 } // literal.number.float //
 .highlight .mh {
  color: #2aa198;
 } // literal.number.hex //
 .highlight .mi {
  color: #2aa198;
 } // literal.number.integer //
 .highlight .mo {
  color: #2aa198;
 } // literal.number.oct //
 .highlight .sb {
  color: #586e75;
 } // literal.string.backtick //
 .highlight .sc {
  color: #2aa198;
 } // literal.string.char //
 .highlight .sd {
  color: #93a1a1;
 } // literal.string.doc //
 .highlight .s2 {
  color: #2aa198;
 } // literal.string.double //
 .highlight .se {
  color: #cb4b16;
 } // literal.string.escape //
 .highlight .sh {
  color: #93a1a1;
 } // literal.string.heredoc //
 .highlight .si {
  color: #2aa198;
 } // literal.string.interpol //
 .highlight .sx {
  color: #2aa198;
 } // literal.string.other //
 .highlight .sr {
  color: #dc322f;
 } // literal.string.regex //
 .highlight .s1 {
  color: #2aa198;
 } // literal.string.single //
 .highlight .ss {
  color: #2aa198;
 } // literal.string.symbol //
 .highlight .bp {
  color: #268bd2;
 } // name.builtin.pseudo //
 .highlight .vc {
  color: #268bd2;
 } // name.variable.class //
 .highlight .vg {
  color: #268bd2;
 } // name.variable.global //
 .highlight .vi {
  color: #268bd2;
 } // name.variable.instance //
 .highlight .il {
  color: #2aa198;
 } // literal.number.integer.long //
--- a/_sass/color_schemes/light.scss
+++ b/_sass/color_schemes/light.scss
@@ -1,208 +1,15 @@
-// Moved from _sass/code.scss
+$body-background-color: $white !default;
 $body-heading-color: $grey-dk-300 !default;
 $body-text-color: $grey-dk-100 !default;
 $link-color: $purple-000 !default;
 $nav-child-link-color: $grey-dk-100 !default;
 $sidebar-color: $grey-lt-000 !default;
 $base-button-color: #f7f7f7 !default;
 $btn-primary-color: $purple-100 !default;
 $code-background-color: $grey-lt-000 !default;
 $feedback-color: darken($sidebar-color, 3%) !default;
 $table-background-color: $white !default;
 $search-background-color: $white !default;
 $search-result-preview-color: $grey-dk-000 !default;
-.highlight .c {
+@import "./vendor/OneLightJekyll/syntax";
  color: #586e75;
 } // comment //
 .highlight .err {
  color: #93a1a1;
 } // error //
 .highlight .g {
  color: #93a1a1;
 } // generic //
 .highlight .k {
  color: #859900;
 } // keyword //
 .highlight .l {
  color: #93a1a1;
 } // literal //
 .highlight .n {
  color: #93a1a1;
 } // name //
 .highlight .o {
  color: #859900;
 } // operator //
 .highlight .x {
  color: #cb4b16;
 } // other //
 .highlight .p {
  color: #93a1a1;
 } // punctuation //
 .highlight .cm {
  color: #586e75;
 } // comment.multiline //
 .highlight .cp {
  color: #859900;
 } // comment.preproc //
 .highlight .c1 {
  color: #586e75;
 } // comment.single //
 .highlight .cs {
  color: #859900;
 } // comment.special //
 .highlight .gd {
  color: #2aa198;
 } // generic.deleted //
 .highlight .ge {
  font-style: italic;
  color: #93a1a1;
 } // generic.emph //
 .highlight .gr {
  color: #dc322f;
 } // generic.error //
 .highlight .gh {
  color: #cb4b16;
 } // generic.heading //
 .highlight .gi {
  color: #859900;
 } // generic.inserted //
 .highlight .go {
  color: #93a1a1;
 } // generic.output //
 .highlight .gp {
  color: #93a1a1;
 } // generic.prompt //
 .highlight .gs {
  font-weight: bold;
  color: #93a1a1;
 } // generic.strong //
 .highlight .gu {
  color: #cb4b16;
 } // generic.subheading //
 .highlight .gt {
  color: #93a1a1;
 } // generic.traceback //
 .highlight .kc {
  color: #cb4b16;
 } // keyword.constant //
 .highlight .kd {
  color: #268bd2;
 } // keyword.declaration //
 .highlight .kn {
  color: #859900;
 } // keyword.namespace //
 .highlight .kp {
  color: #859900;
 } // keyword.pseudo //
 .highlight .kr {
  color: #268bd2;
 } // keyword.reserved //
 .highlight .kt {
  color: #dc322f;
 } // keyword.type //
 .highlight .ld {
  color: #93a1a1;
 } // literal.date //
 .highlight .m {
  color: #2aa198;
 } // literal.number //
 .highlight .s {
  color: #2aa198;
 } // literal.string //
 .highlight .na {
  color: #555;
 } // name.attribute //
 .highlight .nb {
  color: #b58900;
 } // name.builtin //
 .highlight .nc {
  color: #268bd2;
 } // name.class //
 .highlight .no {
  color: #cb4b16;
 } // name.constant //
 .highlight .nd {
  color: #268bd2;
 } // name.decorator //
 .highlight .ni {
  color: #cb4b16;
 } // name.entity //
 .highlight .ne {
  color: #cb4b16;
 } // name.exception //
 .highlight .nf {
  color: #268bd2;
 } // name.function //
 .highlight .nl {
  color: #555;
 } // name.label //
 .highlight .nn {
  color: #93a1a1;
 } // name.namespace //
 .highlight .nx {
  color: #555;
 } // name.other //
 .highlight .py {
  color: #93a1a1;
 } // name.property //
 .highlight .nt {
  color: #268bd2;
 } // name.tag //
 .highlight .nv {
  color: #268bd2;
 } // name.variable //
 .highlight .ow {
  color: #859900;
 } // operator.word //
 .highlight .w {
  color: #93a1a1;
 } // text.whitespace //
 .highlight .mf {
  color: #2aa198;
 } // literal.number.float //
 .highlight .mh {
  color: #2aa198;
 } // literal.number.hex //
 .highlight .mi {
  color: #2aa198;
 } // literal.number.integer //
 .highlight .mo {
  color: #2aa198;
 } // literal.number.oct //
 .highlight .sb {
  color: #586e75;
 } // literal.string.backtick //
 .highlight .sc {
  color: #2aa198;
 } // literal.string.char //
 .highlight .sd {
  color: #93a1a1;
 } // literal.string.doc //
 .highlight .s2 {
  color: #2aa198;
 } // literal.string.double //
 .highlight .se {
  color: #cb4b16;
 } // literal.string.escape //
 .highlight .sh {
  color: #93a1a1;
 } // literal.string.heredoc //
 .highlight .si {
  color: #2aa198;
 } // literal.string.interpol //
 .highlight .sx {
  color: #2aa198;
 } // literal.string.other //
 .highlight .sr {
  color: #dc322f;
 } // literal.string.regex //
 .highlight .s1 {
  color: #2aa198;
 } // literal.string.single //
 .highlight .ss {
  color: #2aa198;
 } // literal.string.symbol //
 .highlight .bp {
  color: #268bd2;
 } // name.builtin.pseudo //
 .highlight .vc {
  color: #268bd2;
 } // name.variable.class //
 .highlight .vg {
  color: #268bd2;
 } // name.variable.global //
 .highlight .vi {
  color: #268bd2;
 } // name.variable.instance //
 .highlight .il {
  color: #2aa198;
 } // literal.number.integer.long //
--- a/_sass/print.scss
+++ b/_sass/print.scss
@@ -21,7 +21,7 @@
  }
  .site-title {
-    font-size: $root-font-size !important;
+    font-size: 1rem !important;
    font-weight: 700 !important;
  }
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -42,7 +42,7 @@
  width: 100%;
  height: 100%;
  padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
-  font-size: 16px;
+  font-size: 1rem;
  color: $body-text-color;
  background-color: $search-background-color;
  border-top: 0;
@@ -53,7 +53,7 @@
  @include mq(md) {
    padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
-    font-size: 14px;
+    font-size: 0.875rem;
    background-color: $body-background-color;
    transition: padding-left linear #{$transition-duration * 0.5};
  }
--- a/_sass/support/_functions.scss
+++ b/_sass/support/_functions.scss
@@ -1,9 +0,0 @@
@function rem($size, $unit: "") {
  $rem-size: $size / $root-font-size;
  @if $unit == false {
    @return #{$rem-size};
  } @else {
    @return #{$rem-size}rem;
  }
 }
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -3,7 +3,7 @@
 $body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
  roboto, "Helvetica Neue", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
-$root-font-size: 16px !default; // Base font-size for rems
+$root-font-size: 16px !default; // DEPRECATED: previously base font-size for rems
 $body-line-height: 1.4 !default;
 $content-line-height: 1.6 !default;
 $body-heading-line-height: 1.25 !default;
@@ -11,18 +11,18 @@ $body-heading-line-height: 1.25 !default;
 // Font size
 // `-sm` suffix is the size at the small (and above) media query
-$font-size-1: 9px !default;
+$font-size-1: 0.5625rem !default;
-$font-size-1-sm: 10px !default;
+$font-size-1-sm: 0.625rem !default;
-$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small
+$font-size-2: 0.6875rem !default; // h4 - uppercased!, h6 not uppercased, text-small
-$font-size-3: 12px !default; // h5
+$font-size-3: 0.75rem !default; // h5
-$font-size-4: 14px !default;
+$font-size-4: 0.875rem !default;
-$font-size-5: 16px !default; // h3
+$font-size-5: 1rem !default; // h3
-$font-size-6: 18px !default; // h2
+$font-size-6: 1.125rem !default; // h2
-$font-size-7: 24px !default;
+$font-size-7: 1.5rem !default;
-$font-size-8: 32px !default; // h1
+$font-size-8: 2rem !default; // h1
-$font-size-9: 36px !default;
+$font-size-9: 2.25rem !default;
-$font-size-10: 42px !default;
+$font-size-10: 2.625rem !default;
-$font-size-10-sm: 48px !default;
+$font-size-10-sm: 3rem !default;
 // Colors
@@ -56,19 +56,6 @@ $red-000: #f77e7e !default;
 $red-100: #f96e65 !default;
 $red-200: #e94c4c !default;
 $red-300: #dd2e2e !default;
 $body-background-color: $white !default;
 $sidebar-color: $grey-lt-000 !default;
 $search-background-color: $white !default;
 $table-background-color: $white !default;
 $code-background-color: $grey-lt-000 !default;
 $feedback-color: darken($sidebar-color, 3%) !default;
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
 $search-result-preview-color: $grey-dk-000 !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;
 // Spacing
@@ -108,22 +95,22 @@ $border-color: $grey-lt-100 !default;
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
-$nav-width: 264px !default;
+$nav-width: 16.5rem !default;
-$nav-width-md: 248px !default;
+$nav-width-md: 15.5rem !default;
 $nav-list-item-height: $sp-6 !default;
 $nav-list-item-height-sm: $sp-8 !default;
 $nav-list-expander-right: true;
-$content-width: 800px !default;
+$content-width: 50rem !default;
-$header-height: 60px !default;
+$header-height: 3.75rem !default;
 $search-results-width: $content-width - $nav-width !default;
 $transition-duration: 400ms;
 // Media queries in pixels
 $media-queries: (
-  xs: 320px,
+  xs: 20rem,
-  sm: 500px,
+  sm: 31.25rem,
  md: $content-width,
  lg: $content-width + $nav-width,
-  xl: 1400px,
+  xl: 87.5rem,
 ) !default;
--- a/_sass/support/mixins/_layout.scss
+++ b/_sass/support/mixins/_layout.scss
@@ -12,12 +12,11 @@
  // If the key exists in the map
  @if $value {
    // Prints a media query based on the value
-    @media (min-width: rem($value)) {
+    @media (min-width: $value) {
      @content;
    }
  } @else {
-    @warn "No value could be retrieved from `#{$media-query}`. "
+    @warn "No value could be retrieved from `#{$media-query}`. Please make sure it is defined in `$media-queries` map.";
      + "Please make sure it is defined in `$media-queries` map.";
  }
 }
--- a/_sass/support/support.scss
+++ b/_sass/support/support.scss
@@ -1,3 +1,2 @@
@import "./variables";
@import "./functions";
@import "./mixins/mixins";
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -21,7 +21,7 @@ th,
 td {
  @include fs-3;
-  min-width: 120px;
+  min-width: 7.5rem;
  padding: $sp-2 $sp-3;
  background-color: $table-background-color;
  border-bottom: $border rgba($border-color, 0.5);
--- a/_sass/vendor/OneDarkJekyll/syntax-firewatch.scss
+++ b/_sass/vendor/OneDarkJekyll/syntax-firewatch.scss
@@ -1,200 +0,0 @@
 .highlight,
 pre.highlight {
  background: #282c34;
  color: #abb2bf;
 }
 .highlight pre {
  background: #282c34;
 }
 .highlight .hll {
  background: #282c34;
 }
 .highlight .c {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .err {
  color: #960050;
  background-color: #1e0010;
 }
 .highlight .k {
  color: #dd672c;
 }
 .highlight .l {
  color: #c8ae9d;
 }
 .highlight .n {
  color: #abb2bf;
 }
 .highlight .o {
  color: #abb2bf;
 }
 .highlight .p {
  color: #abb2bf;
 }
 .highlight .cm {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .cp {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .c1 {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .cs {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .ge {
  font-style: italic;
 }
 .highlight .gs {
  font-weight: 700;
 }
 .highlight .kc {
  color: #dd672c;
 }
 .highlight .kd {
  color: #dd672c;
 }
 .highlight .kn {
  color: #dd672c;
 }
 .highlight .kp {
  color: #dd672c;
 }
 .highlight .kr {
  color: #dd672c;
 }
 .highlight .kt {
  color: #dd672c;
 }
 .highlight .ld {
  color: #c8ae9d;
 }
 .highlight .m {
  color: #d19a66;
 }
 .highlight .s {
  color: #c8ae9d;
 }
 .highlight .na {
  color: #d19a66;
 }
 .highlight .nb {
  color: #e5c07b;
 }
 .highlight .nc {
  color: #e5c07b;
 }
 .highlight .no {
  color: #e5c07b;
 }
 .highlight .nd {
  color: #e5c07b;
 }
 .highlight .ni {
  color: #e5c07b;
 }
 .highlight .ne {
  color: #e5c07b;
 }
 .highlight .nf {
  color: #abb2bf;
 }
 .highlight .nl {
  color: #e5c07b;
 }
 .highlight .nn {
  color: #abb2bf;
 }
 .highlight .nx {
  color: #abb2bf;
 }
 .highlight .py {
  color: #e5c07b;
 }
 .highlight .nt {
  color: #e06c75;
 }
 .highlight .nv {
  color: #e5c07b;
 }
 .highlight .ow {
  font-weight: 700;
 }
 .highlight .w {
  color: #f8f8f2;
 }
 .highlight .mf {
  color: #d19a66;
 }
 .highlight .mh {
  color: #d19a66;
 }
 .highlight .mi {
  color: #d19a66;
 }
 .highlight .mo {
  color: #d19a66;
 }
 .highlight .sb {
  color: #c8ae9d;
 }
 .highlight .sc {
  color: #c8ae9d;
 }
 .highlight .sd {
  color: #c8ae9d;
 }
 .highlight .s2 {
  color: #c8ae9d;
 }
 .highlight .se {
  color: #c8ae9d;
 }
 .highlight .sh {
  color: #c8ae9d;
 }
 .highlight .si {
  color: #c8ae9d;
 }
 .highlight .sx {
  color: #c8ae9d;
 }
 .highlight .sr {
  color: #56b6c2;
 }
 .highlight .s1 {
  color: #c8ae9d;
 }
 .highlight .ss {
  color: #56b6c2;
 }
 .highlight .bp {
  color: #e5c07b;
 }
 .highlight .vc {
  color: #e5c07b;
 }
 .highlight .vg {
  color: #e5c07b;
 }
 .highlight .vi {
  color: #e06c75;
 }
 .highlight .il {
  color: #d19a66;
 }
 .highlight .gu {
  color: #75715e;
 }
 .highlight .gd {
  color: #f92672;
 }
 .highlight .gi {
  color: #a6e22e;
 }
--- a/_sass/vendor/OneDarkJekyll/syntax-one-dark.scss
+++ b/_sass/vendor/OneDarkJekyll/syntax-one-dark.scss
@@ -1,200 +0,0 @@
 .highlight,
 pre.highlight {
  background: #282c34;
  color: #abb2bf;
 }
 .highlight pre {
  background: #282c34;
 }
 .highlight .hll {
  background: #282c34;
 }
 .highlight .c {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .err {
  color: #960050;
  background-color: #1e0010;
 }
 .highlight .k {
  color: #c678dd;
 }
 .highlight .l {
  color: #98c379;
 }
 .highlight .n {
  color: #abb2bf;
 }
 .highlight .o {
  color: #abb2bf;
 }
 .highlight .p {
  color: #abb2bf;
 }
 .highlight .cm {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .cp {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .c1 {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .cs {
  color: #5c6370;
  font-style: italic;
 }
 .highlight .ge {
  font-style: italic;
 }
 .highlight .gs {
  font-weight: 700;
 }
 .highlight .kc {
  color: #c678dd;
 }
 .highlight .kd {
  color: #c678dd;
 }
 .highlight .kn {
  color: #c678dd;
 }
 .highlight .kp {
  color: #c678dd;
 }
 .highlight .kr {
  color: #c678dd;
 }
 .highlight .kt {
  color: #c678dd;
 }
 .highlight .ld {
  color: #98c379;
 }
 .highlight .m {
  color: #d19a66;
 }
 .highlight .s {
  color: #98c379;
 }
 .highlight .na {
  color: #d19a66;
 }
 .highlight .nb {
  color: #e5c07b;
 }
 .highlight .nc {
  color: #e5c07b;
 }
 .highlight .no {
  color: #e5c07b;
 }
 .highlight .nd {
  color: #e5c07b;
 }
 .highlight .ni {
  color: #e5c07b;
 }
 .highlight .ne {
  color: #e5c07b;
 }
 .highlight .nf {
  color: #abb2bf;
 }
 .highlight .nl {
  color: #e5c07b;
 }
 .highlight .nn {
  color: #abb2bf;
 }
 .highlight .nx {
  color: #abb2bf;
 }
 .highlight .py {
  color: #e5c07b;
 }
 .highlight .nt {
  color: #e06c75;
 }
 .highlight .nv {
  color: #e5c07b;
 }
 .highlight .ow {
  font-weight: 700;
 }
 .highlight .w {
  color: #f8f8f2;
 }
 .highlight .mf {
  color: #d19a66;
 }
 .highlight .mh {
  color: #d19a66;
 }
 .highlight .mi {
  color: #d19a66;
 }
 .highlight .mo {
  color: #d19a66;
 }
 .highlight .sb {
  color: #98c379;
 }
 .highlight .sc {
  color: #98c379;
 }
 .highlight .sd {
  color: #98c379;
 }
 .highlight .s2 {
  color: #98c379;
 }
 .highlight .se {
  color: #98c379;
 }
 .highlight .sh {
  color: #98c379;
 }
 .highlight .si {
  color: #98c379;
 }
 .highlight .sx {
  color: #98c379;
 }
 .highlight .sr {
  color: #56b6c2;
 }
 .highlight .s1 {
  color: #98c379;
 }
 .highlight .ss {
  color: #56b6c2;
 }
 .highlight .bp {
  color: #e5c07b;
 }
 .highlight .vc {
  color: #e5c07b;
 }
 .highlight .vg {
  color: #e5c07b;
 }
 .highlight .vi {
  color: #e06c75;
 }
 .highlight .il {
  color: #d19a66;
 }
 .highlight .gu {
  color: #75715e;
 }
 .highlight .gd {
  color: #f92672;
 }
 .highlight .gi {
  color: #a6e22e;
 }
--- a/_sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss
+++ b/_sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss
@@ -1,3 +1,5 @@
 // Generated with OneDarkJekyll applied to Atom's One Dark Vivid theme
 .highlight,
 pre.highlight {
  background: #31343f;
--- a/_sass/vendor/OneLightJekyll/LICENSE
+++ b/_sass/vendor/OneLightJekyll/LICENSE
@@ -0,0 +1,65 @@
 OneLightJekyll relies on two works: OneDarkJekyll, and Atom's One Light theme. This file contains the licensing for all the related software.
 ---
 OneLightJekyll (https://github.com/just-the-docs/OneLightJekyll/blob/main/LICENSE)
 MIT License
 Copyright (c) 2023 Matthew Wang
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ---
 OneDarkJekyll (https://github.com/mgyongyosi/OneDarkJekyll/blob/master/LICENSE)
 MIT License
 Copyright (c) 2016 Mihály Gyöngyösi
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ---
 Atom One Light (https://github.com/atom/atom/blob/master/LICENSE.md)
 Copyright (c) 2011-2022 GitHub Inc.
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/_sass/vendor/OneDarkJekyll/syntax-firewatch-green.scss
+++ b/_sass/vendor/OneDarkJekyll/syntax-firewatch-green.scss
@@ -1,51 +1,53 @@
 // Generated with OneLightJekyll applied to Atom's One Light theme
 .highlight,
 pre.highlight {
-  background: #282c34;
+  background: #f9f9f9;
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight pre {
-  background: #282c34;
+  background: #f9f9f9;
 }
 .highlight .hll {
-  background: #282c34;
+  background: #f9f9f9;
 }
 .highlight .c {
-  color: #5c6370;
+  color: #9fa0a6;
  font-style: italic;
 }
 .highlight .err {
-  color: #960050;
+  color: #fff;
-  background-color: #1e0010;
+  background-color: #e05151;
 }
 .highlight .k {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .l {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .n {
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight .o {
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight .p {
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight .cm {
-  color: #5c6370;
+  color: #9fa0a6;
  font-style: italic;
 }
 .highlight .cp {
-  color: #5c6370;
+  color: #9fa0a6;
  font-style: italic;
 }
 .highlight .c1 {
-  color: #5c6370;
+  color: #9fa0a6;
  font-style: italic;
 }
 .highlight .cs {
-  color: #5c6370;
+  color: #9fa0a6;
  font-style: italic;
 }
 .highlight .ge {
@@ -55,73 +57,73 @@ pre.highlight {
  font-weight: 700;
 }
 .highlight .kc {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .kd {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .kn {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .kp {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .kr {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .kt {
-  color: #5ba473;
+  color: #a625a4;
 }
 .highlight .ld {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .m {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .s {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .na {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .nb {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .nc {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .no {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .nd {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .ni {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .ne {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .nf {
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight .nl {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .nn {
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight .nx {
-  color: #abb2bf;
+  color: #383942;
 }
 .highlight .py {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .nt {
-  color: #77b181;
+  color: #e35549;
 }
 .highlight .nv {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .ow {
  font-weight: 700;
@@ -130,71 +132,77 @@ pre.highlight {
  color: #f8f8f2;
 }
 .highlight .mf {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .mh {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .mi {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .mo {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .sb {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .sc {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .sd {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .s2 {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .se {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .sh {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .si {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .sx {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .sr {
-  color: #56b6c2;
+  color: #0083bb;
 }
 .highlight .s1 {
-  color: #c8ae9d;
+  color: #50a04f;
 }
 .highlight .ss {
-  color: #56b6c2;
+  color: #0083bb;
 }
 .highlight .bp {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .vc {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .vg {
-  color: #e5c07b;
+  color: #ca7601;
 }
 .highlight .vi {
-  color: #77b181;
+  color: #e35549;
 }
 .highlight .il {
-  color: #d19a66;
+  color: #b66a00;
 }
 .highlight .gu {
  color: #75715e;
 }
 .highlight .gd {
-  color: #f92672;
+  color: #e05151;
 }
 .highlight .gi {
-  color: #a6e22e;
+  color: #43d089;
 }
 .highlight .language-json .w + .s2 {
  color: #e35549;
 }
 .highlight .language-json .kc {
  color: #0083bb;
 }
--- a/assets/images/just-the-docs.png
+++ b/assets/images/just-the-docs.png
--- a/assets/images/search.svg
+++ b/assets/images/search.svg
@@ -1 +0,0 @@
 <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><title>Search</title><g fill-rule="nonzero" fill="#959396"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -31,7 +31,7 @@ function initNav() {
    }
    if (target) {
      e.preventDefault();
-      target.parentNode.classList.toggle('active');
+      target.ariaPressed = target.parentNode.classList.toggle('active');
    }
  });
@@ -45,9 +45,11 @@ function initNav() {
    if (menuButton.classList.toggle('nav-open')) {
      siteNav.classList.add('nav-open');
      mainHeader.classList.add('nav-open');
      menuButton.ariaPressed = true;
    } else {
      siteNav.classList.remove('nav-open');
      mainHeader.classList.remove('nav-open');
      menuButton.ariaPressed = false;
    }
  });
@@ -488,6 +490,11 @@ jtd.onReady(function(){
 jtd.onReady(function(){
  if (!window.isSecureContext) {
    console.log('Window does not have a secure context, therefore code clipboard copy functionality will not be available. For more details see https://web.dev/async-clipboard/#security-and-permissions');
    return;
  }
  var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock > div.content, figure.highlight');
  // note: the SVG svg-copied and svg-copy is only loaded as a Jekyll include if site.enable_copy_code_button is true; see _includes/icons/icons.html
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -45,6 +45,15 @@ jtd.addEvent(toggleDarkMode, 'click', function(){
 });
 </script>
 ### deprecated: `legacy_light`
 {: .d-inline-block .no_toc }
 New (v0.4.2)
 {: .label .label-green }
 In Just the Docs version `0.4.2`, we changed the default syntax highlighting theme for the `light` color scheme to have higher contrast. Users who are want to use the old highlighting need to explicitly opt-in with the deprecated `legacy_light` color scheme. In a future major release of Just the Docs, we will remove this color scheme.
 ## Custom schemes
 ### Define a custom scheme
@@ -113,7 +122,7 @@ jtd.setTheme("foo")
 New (v0.4.0)
 {: .label .label-green }
-To define new SCSS variables, functions, or override existing theme variables, place SCSS code in `_sass/custom/setup.scss`. This should *not* be used for defining custom styles (see the next section).
+To define new SCSS variables or functions, place SCSS code in `_sass/custom/setup.scss`. This should *not* be used for defining custom styles (see the next section) or overriding color scheme variables (in this case, you should create a new color scheme).
 This is most commonly-used to define [custom callout colors]({% link docs/configuration.md %}#callouts). For example,
--- a/docs/layout/layout.md
+++ b/docs/layout/layout.md
@@ -0,0 +1,40 @@
 ---
 title: Layout
 layout: default
 nav_order: 4.5
 has_children: true
 ---
 # Layout
 You specify the layout for a page in its [front matter]. Just the Docs has a `default` layout with a sidebar, used for almost all pages in the theme docs, and a `minimal` layout that omits the sidebar.
 {: .fs-6 .fw-300 }
 ## The layout concept
 See the [Jekyll docs page about layouts] for an explanation of the general idea of layouts and how to specify them.
 You can use [Jekyll's front matter defaults] to specify the same layout for many pages.
 ## The `default` layout
 This page uses the default layout.
 It is a *responsive* layout: on medium and larger width displays, it displays a sidebar, including a navigation panel; on smaller width displays, the sidebar is automatically hidden under a button.
 Each child (and grandchild) page of a top-level page has so-called *breadcrumbs*: links to its parent (and grandparent) pages. It shows the breadcrumbs above the main content of the page.
 Each page that has child pages generally has a list of links to those pages (you can suppress it by `has_toc: false` in the front matter). It shows the list as a *table of contents* below the main content.
 ## The `minimal` layout
 A child and grandchild page of this page use the minimal layout. This differs from the default layout by omitting the sidebar -- and thereby also the navigation panel. To navigate between pages with the minimal layout, you can use the breadcrumbs and the tables of contents.
 ## Other layouts
 Just the Docs has further layouts: `about`, `home`, `page`, and `post`. Currently, they are all based on the `default` layout. See the [Jekyll docs about inheritance] for how to customize them.
 [front matter]: https://jekyllrb.com/docs/front-matter/ "Jekyll docs about front matter"
 [Jekyll docs page about layouts]: https://jekyllrb.com/docs/layouts/ "Jekyll docs about layouts"
 [Jekyll's front matter defaults]: https://jekyllrb.com/docs/configuration/front-matter-defaults/ "Jekyll docs about front matter defaults"
 [Jekyll docs about inheritance]: https://jekyllrb.com/docs/layouts/#inheritance "Jekyll docs about inheritance"
--- a/docs/layout/minimal/default-child.md
+++ b/docs/layout/minimal/default-child.md
@@ -0,0 +1,8 @@
 ---
 title: Default layout child page
 layout: default
 parent: A minimal layout page 
 grand_parent: Layout
 ---
 This is a child page that uses the same minimal layout as its parent page.
--- a/docs/layout/minimal/minimal-child.md
+++ b/docs/layout/minimal/minimal-child.md
@@ -0,0 +1,8 @@
 ---
 title: Minimal layout child page
 layout: minimal
 parent: A minimal layout page
 grand_parent: Layout
 ---
 This is a child page that uses the same minimal layout as its parent page.
--- a/docs/layout/minimal/minimal.md
+++ b/docs/layout/minimal/minimal.md
@@ -0,0 +1,12 @@
 ---
 title: A minimal layout page
 layout: minimal
 parent: Layout
 has_children: true
 ---
 # A minimal layout page
 This page illustrates the built-in layout `minimal`.
 One of its child pages also uses the minimal layout; the other child pages uses the default layout.
--- a/docs/ui-components/code.md
+++ b/docs/ui-components/code.md
@@ -150,14 +150,45 @@ graph TD;
 ### Using a local mermaid library
-In order to use a local version of the mermaid library instead of one provided by jsDelivr, you can specify a `path` key in the mermaid configuration instead of a `version` key.
+To load a local version of mermaid, also use the `path` key to specify the location of the library; e.g.
 ```yaml
 mermaid:
-  # To load mermaid from a local file use the `path` key to specify the location of the library instead; e.g.
+  version: "10.1.0"
-  path: "/assets/js/mermaid.min.js"
+  # for (v10+)
  path: "/assets/js/mermaid.esm.min.mjs"
  # for (<v10):
  # path: "/assets/js/mermaid.min.js"
  # Note: copy both `mermaid.esm.min.mjs` (v10+) or `mermaid.min.js` (<v10) and the associated
  # `.map` file from the specified version of `mermaid/dist` to `/assets/js/`.
 ```
 For mermaid versions `>=10`, this file is imported directly as an ESM module (rather than as a plain `<script>` tag); users should use the `mermaid.esm.min.mjs` file. In contrast, for mermaid versions `<10`, this file is loaded as a script tag; it should be a standalone CJS file (i.e. `mermaid.min.js`).
 {: .warning }
 Mermaid versions `10.0` - `10.1` (and possibly, future releases) still encode relative imports in `mermaid.esm.min.mjs`. Local users must copy *all* of the contents of the `dist` folder to the specified path (preserving the relative location of the files). Just the Docs is actively monitoring mermaid releases; an upstream fix is planned.
 ### Using mermaid with AsciiDoc
 Users of [AsciiDoc](https://asciidoc.org/) (e.g. via [jekyll-asciidoc](https://github.com/asciidoctor/jekyll-asciidoc)) may need additional configuration to use mermaid.
 By default, AsciiDoc generates HTML markup that mermaid cannot properly parse. The simplest way to resolve this is to use a [passthrough block](https://docs.asciidoctor.org/asciidoc/latest/pass/pass-block/):
 {% highlight asciidoc %}
 ++++
 <pre class="language-mermaid">
 graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
 </pre>
 ++++
 {% endhighlight %}
 Alternatively, community member [@flyx](https://.github.com/flyx) has contributed a Ruby extension that does not require extra markup. The extension is available [as a GitHub Gist](https://gist.github.com/flyx/9fff080cf4edc95d495bc661a002232c). Thank you to [@flyx](https://.github.com/flyx)!
 The [asciidoctor-diagram](https://docs.asciidoctor.org/diagram-extension/latest/) extension which also supports mermaid is not recommended for use with Just the Docs, since it requires separate configuration e.g. for theming, and is known to not be trivial to set up.
 ## Copy button
 {: .d-inline-block }
@@ -171,4 +202,4 @@ The copy button for code blocks can be enabled or disabled via the `enable_copy_
 enable_copy_code_button: true
 ```
-Note that this feature requires JavaScript; if JavaScript is disabled in the browser, this feature will not work.
+Note that this feature requires JavaScript; if JavaScript is disabled in the browser, this feature will not work. In addition, this feature uses `navigator.clipboard`, which is only available in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (such as over HTTPS). If the site is viewed in an insecure context, the copy button will not work ([relevant issue: #1202](https://github.com/just-the-docs/just-the-docs/issues/1202)).
--- a/docs/utilities/typography.md
+++ b/docs/utilities/typography.md
@@ -17,7 +17,7 @@ parent: Utilities
 ## Font size
-Use the `.fs-1` - `.fs-10` to set an explicit font-size.
+Use the `.fs-1` - `.fs-10` to set an explicit `font-size`.
 | Class   | Small screen size `font-size`  | Large screen size `font-size` |
 |:--------|:-------------------------------|:------------------------------|
@@ -81,7 +81,7 @@ Font size 10
 ## Font weight
-Use the `.fw-300` - `.fw-700` to set an explicit font-size.
+Use the `.fw-300` - `.fw-700` to set an explicit `font-weight`.
 <div class="code-example" markdown="1">
 Font weight 300
--- a/fixtures/Gemfile-jekyll-3.9
+++ b/fixtures/Gemfile-jekyll-3.9
@@ -0,0 +1,13 @@
 source "https://rubygems.org"
 gem "jekyll", "~> 3.9"
 gem "jekyll-seo-tag", ">= 2.0"
 gem "rake", ">= 12.3.1"
 # required for Jekyll 3
 gem "webrick", "~> 1.7"
 gem "kramdown-parser-gfm", '~> 1.1'
 # docs-only
 gem "jekyll-github-metadata", ">= 2.15"
--- a/fixtures/Gemfile-jekyll-4.3
+++ b/fixtures/Gemfile-jekyll-4.3
@@ -0,0 +1,9 @@
 source "https://rubygems.org"
 gem "jekyll", "~> 4.3"
 gem "jekyll-seo-tag", ">= 2.0"
 gem "rake", ">= 12.3.1"
 # docs-only
 gem "jekyll-github-metadata", ">= 2.15"
--- a/index.md
+++ b/index.md
@@ -89,7 +89,7 @@ Just the Docs is committed to fostering a welcoming community.
 [Jekyll configuration]: https://jekyllrb.com/docs/configuration/
 [source file for this page]: https://github.com/just-the-docs/just-the-docs/blob/main/index.md
 [Just the Docs Template]: https://just-the-docs.github.io/just-the-docs-template/
-[Just the Docs]: https://just-the-docs.github.io/just-the-docs/
+[Just the Docs]: https://just-the-docs.com
 [Just the Docs repo]: https://github.com/just-the-docs/just-the-docs
 [Just the Docs README]: https://github.com/just-the-docs/just-the-docs/blob/main/README.md
 [GitHub Pages]: https://pages.github.com/
--- a/just-the-docs.gemspec
+++ b/just-the-docs.gemspec
@@ -2,7 +2,7 @@
 Gem::Specification.new do |spec|
  spec.name          = "just-the-docs"
-  spec.version       = "0.4.1"
+  spec.version       = "0.5.3"
  spec.authors       = ["Patrick Marsceill", "Matthew Wang"]
  spec.email         = ["patrick.marsceill@gmail.com", "matt@matthewwang.me"]
@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
  spec.metadata      = {
    "bug_tracker_uri"   => "https://github.com/just-the-docs/just-the-docs/issues",
    "changelog_uri"     => "https://github.com/just-the-docs/just-the-docs/blob/main/CHANGELOG.md",
-    "documentation_uri" => "https://just-the-docs.github.io/just-the-docs/",
+    "documentation_uri" => "https://just-the-docs.com/",
    "source_code_uri"   => "https://github.com/just-the-docs/just-the-docs",
  }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,15 +6,42 @@
  "license": "MIT",
  "bugs": "https://github.com/just-the-docs/just-the-docs/issues",
  "devDependencies": {
-    "prettier": "^2.8.4",
+    "npm-run-all": "^4.1.5",
-    "stylelint": "^14.16.1",
+    "prettier": "^2.8.8",
-    "stylelint-config-prettier-scss": "0.0.1",
+    "stylelint": "^15.7.0",
-    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint-config-standard-scss": "^9.0.0"
    "stylelint-prettier": "^2.0.0"
  },
  "scripts": {
-    "test": "stylelint '**/*.scss'",
+    "lint": "npm-run-all --parallel --continue-on-error lint:*",
    "lint:css": "stylelint '**/*.scss'",
    "lint:formatting": "prettier --check '**/*.{scss,js,json}'",
    "format": "prettier --write '**/*.{scss,js,json}'",
-    "stylelint-check": "stylelint-config-prettier-check"
+    "test": "npm run lint"
  },
  "stylelint": {
    "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"
    ],
    "extends": [
      "stylelint-config-standard-scss"
    ],
    "rules": {
      "alpha-value-notation": null,
      "at-rule-empty-line-before": null,
      "color-function-notation": null,
      "media-feature-range-notation": "prefix",
      "no-descending-specificity": null,
      "scss/no-global-function-names": null
    }
  },
  "prettier": {
    "endOfLine": "lf",
    "semi": false,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5"
  }
 }
		`@@ -1 +0,0 @@`
			`<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><title>Search</title><g fill-rule="nonzero" fill="#959396"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>`