prep for v0.4.0.rc3

* Optimize simple navigation cases

Fix inefficiency reported in feedback on v0.4.0.rc2 (see discussion #958).

This PR:

* essentially reverts `_includes/nav.html` to v0.4.0.rc1
* preserves the ARIA labels added by #950
* adds a test to optimize builds of sites that rely on `title` fields to order pages.

Building the `endoflife.date` site (130 pages) now takes only about 7 seconds.

Building the `machinetranslate.org` site ( 350 pages) takes about 7 minutes. (Without the added test, it takes just over 5 minutes: the condition of the test is merely to compare the size of two arrays, but that is apparently enough to prevent Jekyll from applying some optimization).

A warning is added to the docs about the need for numbers to be in quotes when used as title values.

* Update navigation-structure.md

A clarification is added to the docs about the need for numbers to be in quotes when used as title values.

* Simplify the control and data flow

- Defer concatenation of `string_order_pages` with `title_order_pages` until needed.
- Replace tests on size with tests for `empty`.
- Rename variables accordingly.

* Fix child nav order

This PR started from the navigation in RC1. Some cosmetic improvements had been made in RC2. This commit adds some of those changes to this PR.

It also fixes a bug (revealed by a new regression test) due to a reference to `node.child_nav_order` instead of `child.child_nav_order`, which prevented reversal of the order in children of children. Presumably a top-level reversal should apply only to direct children, and not to grandchildren. The latter interpretation would be very confusing in a deep multi-level hierarchy.

* Allow pages with numeric titles

An omitted `nav_order` value should default to the `title` value, regardless of its type. Jekyll 3 gives build errors when numbers and strings are sorted together. This commit drops the assumption that `title` values are always strings – a 404 page naturally has a numeric title. It updates the docs page accordingly.

The extra code does not affect the build time for the `endoflife.date` site (7 seconds). For the `machinetranslate` site, changing the title of the 404 page to a number increases the build time from 7 minutes to 9 minutes – the `nav_order` numbers on that site are program-generated in the range 1..1000, which might be atypical.

This commit has not yet been checked using the regression tests.

The gemspec used for testing specifies `spec.add_runtime_dependency "jekyll", "~> 3.8.5"`, and `Gemfile.lock` shows `jekyll (3.8.7)`.

* Update nav.html

Add comment about an optimization that will be possible in Jekyll 4.

* Update nav.html

- Update the comment about optimization possibility.
- TEMPORARILY add Jekyll 3 code for conditionally optimizing.

* Update nav.html

Minor improvements and cosmetic changes.

* Major revision

This update is based on extensive experimentation and profiling with alternative versions of the Liquid code used to build the main navigation panel.

Due to the fragility of Jekyll's optimizations, combining alternative approaches with conditionals turned out to be too expensive: merely adding a condition to check whether some array of pages is empty can add about 20% to the build time!

The current code avoids sorting pages on `nav_order` and `title` fields together. The standard way of doing that in Jekyll is to use the `group_by` filter; but extracting the sorted pages from the groups turned out to be too inefficient (as seen in RC1), as was generating links directly from the groups (in RC2).

Making all pages with `nav_order` values come before all those ordered by their `title` values is not ideal (it doesn't support tweaking the relative order of two pages in a list of pages ordered by their titles) but it appears to be necessary for efficient builds on large sites.

This version has not yet been fully tested for regression, but otherwise seems to give the expected navigation on the endoflife.date and machinetranslate websites. (I'm unable to install the Python-based how2data repository on my laptop, due to package version issues on Apple silicon).

Co-authored-by: Peter Mosses <18308236+pdmosses@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -0,0 +1,14 @@
+# [Choice] Debian OS version (use bullseye on local arm64/Apple Silicon): bullseye, buster
+ARG VARIANT=bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/jekyll:0-${VARIANT}
+
+# [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
+ARG NODE_VERSION="none"
+RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment this line to install global node packages.
+# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

.devcontainer/base.Dockerfile

@@ -0,0 +1,26 @@
+# [Choice] Debian OS version (use 2.7-bullseye on local arm64/Apple Silicon): 2.7-bullseye, 2.7-buster
+ARG VARIANT=2.7-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/ruby:${VARIANT}
+COPY library-scripts/meta.env /usr/local/etc/vscode-dev-containers
+
+# ENV Variables required by Jekyll
+ENV LANG=en_US.UTF-8 \
+    LANGUAGE=en_US:en \
+    TZ=Etc/UTC \
+    LC_ALL=en_US.UTF-8 \
+    LANG=en_US.UTF-8 \
+    LANGUAGE=en_US
+
+# Install bundler, latest jekyll, and github-pages for older jekyll
+RUN gem install bundler jekyll github-pages
+
+# [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
+ARG NODE_VERSION="none"
+RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment this line to install global node packages.
+# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.224.2/containers/jekyll
+{
+  "name": "Just the docs",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": {
+      // Update 'VARIANT' to pick a Debian OS version: bullseye, buster
+      // Use bullseye when on local arm64/Apple Silicon.
+      "VARIANT": "bullseye",
+      // Enable Node.js: pick the latest LTS version
+      "NODE_VERSION": "lts/*"
+    }
+  },
+
+  // Set *default* container specific settings.json values on container create.
+  "settings": {},
+
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": ["GitHub.vscode-pull-request-github"],
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [
+    // Jekyll server
+    4000,
+    // Live reload server
+    35729
+  ],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "sh .devcontainer/post-create.sh",
+
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "vscode"
+}

.devcontainer/post-create.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+# Install the version of Bundler.
+if [ -f Gemfile.lock ] && grep "BUNDLED WITH" Gemfile.lock > /dev/null; then
+    cat Gemfile.lock | tail -n 2 | grep -C2 "BUNDLED WITH" | tail -n 1 | xargs gem install bundler -v
+fi
+
+# If there's a Gemfile, then run `bundle install`
+# It's assumed that the Gemfile will install Jekyll too
+if [ -f Gemfile ]; then
+    bundle install
+fi

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Ask a question
+    url: https://github.com/just-the-docs/just-the-docs/discussions
+    about: Ask questions and discuss with other community members

.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "10:00"
+  open-pull-requests-limit: 10
+- package-ecosystem: bundler
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "10:00"
+  open-pull-requests-limit: 10

.github/release-drafter.yml

@@ -0,0 +1,35 @@
+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

.github/workflows/ci.yml

@@ -1,35 +1,42 @@
-on: [push]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+      - 'v**'
 
 name: CI
 
 jobs:
-
-  jekyll:
+  jekyll-build:
     name: Build Jekyll site
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        jekyll-version: [3.8.5, latest]
     steps:
-
-    - uses: actions/checkout@master
-
-    - name: Build the site in the jekyll/builder container
+    - uses: actions/checkout@v3
+    - name: Build the site in the jekyll/jekyll container
       run: |
         docker run --rm \
         --volume="${{ github.workspace }}:/srv/jekyll" \
-        jekyll/builder:3.8.5 /bin/bash -c "chmod 777 /srv/jekyll && jekyll build"
+        jekyll/jekyll:${{ matrix.jekyll-version }} /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && bundle exec jekyll build && bundle exec rake search:init"
 
-  css:
-    name: Stylelint
+  assets:
+    name: Test CSS and JS
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
     steps:
-    
-    - uses: actions/checkout@master
-
-    - name: Use Node.js 10.x
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
-        version: 10.x
-
-    - name: npm install, build, and test
-      run: |
-        npm install
-        npm test
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test

.github/workflows/publish-gem.yml

@@ -1,30 +1,31 @@
-name: Publish Gem
+name: Publish Ruby Gem
 
-on: [release]
+on:
+  workflow_dispatch
 
 jobs:
   build:
-    name: Build + Publish
+    name: Publish
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@master
+    - uses: actions/checkout@v2
     - name: Set up Ruby 2.6
       uses: actions/setup-ruby@v1
       with:
-        version: 2.6.x
+        ruby-version: 2.6.x
 
     - name: Publish to GPR
       run: |
         mkdir -p $HOME/.gem
         touch $HOME/.gem/credentials
         chmod 0600 $HOME/.gem/credentials
-        printf -- "---\n:github: Bearer ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
-        gem build just-the-docs.gemspec
+        printf -- "---\n:github: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
+        gem build *.gemspec
         gem push --KEY github --host https://rubygems.pkg.github.com/${OWNER} *.gem
       env:
-        GEM_HOST_API_KEY: ${{secrets.GPR_AUTH_TOKEN}}
-        OWNER: pmarsceill
+        GEM_HOST_API_KEY: "Bearer ${{secrets.GITHUB_TOKEN}}"
+        OWNER: ${{ github.repository_owner }}
 
     - name: Publish to RubyGems
       run: |
@@ -32,8 +33,7 @@ jobs:
         touch $HOME/.gem/credentials
         chmod 0600 $HOME/.gem/credentials
         printf -- "---\n:rubygems_api_key: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
-        gem build just-the-docs.gemspec
+        gem build *.gemspec
         gem push *.gem
       env:
-        GEM_HOST_API_KEY: ${{secrets.RUBYGEMS_AUTH_TOKEN}}
-
+        GEM_HOST_API_KEY: "${{secrets.RUBYGEMS_AUTH_TOKEN}}"

.gitignore

@@ -1,5 +1,7 @@
 *.gem
 .bundle
+.ruby-version
+.jekyll-cache
 .sass-cache
 _site
 Gemfile.lock

.prettierignore

@@ -0,0 +1,10 @@
+package.json
+package-lock.json
+_site
+assets/css/just-the-docs-default.scss
+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/just-the-docs.js
+*.md

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

.stylelintrc.json

@@ -1,10 +1,21 @@
 {
-  "ignoreFiles" : [
-    "assets/css/just-the-docs.scss",
-    "assets/css/dark-mode-preview.scss",
+  "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-primer"
-  ]
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss"
+  ],
+  "plugins": ["stylelint-prettier"],
+  "rules": {
+    "prettier/prettier": true,
+    "alpha-value-notation": null,
+    "color-function-notation": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "no-descending-specificity": null,
+    "scss/no-global-function-names": null
+  }
 }

.vscode/tasks.json

@@ -0,0 +1,26 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Serve",
+      "type": "shell",
+      "command": "bundle exec jekyll serve --livereload",
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      },
+      "isBackground": true
+    },
+    {
+      "label": "Build",
+      "type": "shell",
+      "command": "bundle exec jekyll build",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

404.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Page not found
+title: 404
 permalink: /404
 nav_exclude: true
 search_exclude: true
@@ -8,4 +8,4 @@ search_exclude: true
 
 <h1>Page not found</h1>
 
-<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled %}or search {% endif %}to find what you're looking for or go to this <a href="{{ site.url }}{{ site.baseurl }}">site's home page</a>.</p>
+<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this <a href="{{ '/' | relative_url }}">site's home page</a>.</p>

CHANGELOG.md

@@ -0,0 +1,769 @@
+---
+title: CHANGELOG
+layout: default
+---
+
+# CHANGELOG
+
+All notable changes to this project are documented in this file.
+
+{: .highlight }
+The project underwent a major maintenance shift in March 2022.
+
+## HEAD
+
+{: .note }
+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.0.rc2` and `v0.3.3`!
+
+Changes to `main` that are *not* in the latest pre-release:
+
+- N/A
+
+## Pre-release v0.4.0.rc3
+
+Hi there! This is (actually) hopefully the last prerelease before `v0.4.0`; in particular, if we find that this prerelease is stable, we'll re-release it as `v0.4.0`.
+
+In general, this is a more mature pre-release; there are few new features. However, we'll highlight [@pdmosses]'s work in [#992] to better optimize nav generation for large sites (ex 100+ pages). We don't expect this to affect most users; however, **it is technically a breaking change**, and we suggest testing your site before upgrading to this prerelease.
+
+We want your feedback! Please [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) and let us know!
+
+As soon as we get stable test results from major downstream users, we'll push out a `v0.4.0` ASAP - closing out almost 2 years of backlogged work!
+
+### Trying out pre-release `v0.4.0.rc3`
+
+Simlar to the prior release, `v0.4.0.rc3` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc3`.
+
+To use this RC explicitly as a remote theme:
+
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.4.0.rc3
+```
+
+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.0.rc3"
+```
+
+By default, **users will not be upgraded to `0.4.0.rc3`**. To enforce that explicitly, either:
+
+1. pin your gem version in your `Gemfile`, like so
+```Ruby
+gem "just-the-docs", "0.3.3"
+```
+2. freeze the `remote_theme`, like so
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.3.3
+```
+
+### Features
+
+Broadly, this prerelease is feature-light!
+
+- Added: styling for `<blockquote>` by [@mattxwang] in [#965]
+- Added: custom include for TOC heading by [@pdmosses] in [#980]
+
+### Bugfixes and Experimental Features
+
+*Note*: experimental nav optimization may be unstable. Please give us feedback!
+
+- Added: experimental nav optimization for simple cases by [@pdmosses] in [#992]
+- Fixed: spacing issue when search is disabled by [@henryiii] in [#960]
+- Fixed: active grandchild link class by [@pdmosses] in [#962]
+- Fixed: HTML validation issues (W3C validator) by [@mattxwang] in [#964]
+- Fixed: link styling now uses `text-decoration` values by [@mattxwang] in [#967]
+- Fixed: cleaning up Jekyll excludes by [@pdmosses] in [#985]
+- Fixed: docs, narrow styling for code highlighting with line numbers by [@pdmosses] in [#974]
+- Fixed: default syntax highlighting in custom color schemes [@pdmosses] in [#986]
+
+[#965]: https://github.com/just-the-docs/just-the-docs/pull/965
+[#960]: https://github.com/just-the-docs/just-the-docs/pull/960
+[#962]: https://github.com/just-the-docs/just-the-docs/pull/962
+[#964]: https://github.com/just-the-docs/just-the-docs/pull/964
+[#967]: https://github.com/just-the-docs/just-the-docs/pull/967
+[#974]: https://github.com/just-the-docs/just-the-docs/pull/974
+[#980]: https://github.com/just-the-docs/just-the-docs/pull/980
+[#985]: https://github.com/just-the-docs/just-the-docs/pull/985
+[#986]: https://github.com/just-the-docs/just-the-docs/pull/986
+[#992]: https://github.com/just-the-docs/just-the-docs/pull/992
+
+[@henryiii]: https://github.com/henryiii
+
+**Full Changelog**: https://github.com/just-the-docs/just-the-docs/compare/v0.4.0.rc2...v0.4.0.rc3
+
+## Pre-release v0.4.0.rc2
+
+{: .warning }
+This website includes docs for some new features that are not available in `v0.4.0.rc1` and `v0.3.3`!
+
+Hey there! This is likely the last pre-release before releasing `v0.4.0`, which we plan on doing soon (i.e. before the end of the month) - very exciting! Some new additions to highlight:
+
+- significant improvement on build time of navigation panel by [@pdmosses]
+  - this is big: for a community member with over 300 pages, we shortened the build time from 3 minutes to 30 seconds!
+- improved accessibility features led by [@JPrevost]
+- more docs!
+
+The intention of this release candidate is to gather even more feedback on a potential `v0.4.0`. As it stands, we have not encountered any breaking changes with early adopters of `v0.4.0.rc1`. If you encounter any - for either of our pre-releases - please let us know!
+
+### Trying out pre-release `v0.4.0.rc2`
+
+Simlar to the prior release, `v0.4.0.rc2` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc2`.
+
+To use this RC explicitly as a remote theme:
+
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.4.0.rc2
+```
+
+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.0.rc2"
+```
+
+By default, **users will not be upgraded to `0.4.0.rc2`**. To enforce that explicitly, either:
+
+1. pin your gem version in your `Gemfile`, like so
+```Ruby
+gem "just-the-docs", "0.3.3"
+```
+2. freeze the `remote_theme`, like so
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.3.3
+```
+
+### Features
+
+- Added: accessible titles to nested page nav toggle by [@JPrevost] in [#950]
+- Added: better title styling for AsciiDoc examples by [@alyssais] in [#944]
+- Added: docs for custom search placeholder by [@mattxwang] in [#939]
+- Added: provide ability to skip to main content by [@JPrevost] in [#949]
+- Fixed: exclude `vendor/` in Jekyll config by [@manuelhenke] in [#941]
+- Fixed: improve build time of navigation panel by [@pdmosses] in [#956]
+
+[#950]: https://github.com/just-the-docs/just-the-docs/pull/950
+[#944]: https://github.com/just-the-docs/just-the-docs/pull/944
+[#939]: https://github.com/just-the-docs/just-the-docs/pull/939
+[#949]: https://github.com/just-the-docs/just-the-docs/pull/949
+[#941]: https://github.com/just-the-docs/just-the-docs/pull/941
+[#956]: https://github.com/just-the-docs/just-the-docs/pull/956
+
+[@alyssais]: https://github.com/alyssais
+
+### Documentation and Maintenance
+
+- Added: docs load mermaid.js by default by [@mattxwang] in [#935]
+- Fixed: table of contents on search docs by [@robinpokorny] in [#940]
+- Fixed: broken docs link (custom footer) by [@olgarithms] in [#951]
+- Fixed: clarify version docs by [@pdmosses] in [#955]
+- Deleted: unused script directory by [@mattxwang] in [#937]
+
+[#935]: https://github.com/just-the-docs/just-the-docs/pull/935
+[#940]: https://github.com/just-the-docs/just-the-docs/pull/940
+[#951]: https://github.com/just-the-docs/just-the-docs/pull/951
+[#955]: https://github.com/just-the-docs/just-the-docs/pull/955
+[#937]: https://github.com/just-the-docs/just-the-docs/pull/937
+
+### New Contributors
+
+* [@robinpokorny] made their first contribution in [#940]
+* [@olgarithms] made their first contribution in [#951]
+* [@manuelhenke] made their first contribution in [#941]
+* [@JPrevost] made their first contribution in [#950]
+
+[@robinpokorny]: https://github.com/robinpokorny
+[@olgarithms]: https://github.com/olgarithms
+[@manuelhenke]: https://github.com/manuelhenke
+[@JPrevost]: https://github.com/JPrevost
+
+## Pre-release v0.4.0.rc1
+
+### We're back!
+
+Hi all! The Just the Docs team is excited to have our first pre-release in over two years! It is jam-packed with features and bugfixes that have been requested by the community since 2020. They include:
+
+- The new callouts component
+- Allowing pages and collections to coexist on the navigation pane
+- New styling: dark syntax highlighting, support for jekyll-asciidoc, word-wrapping instead of overflow for various elements
+- More customization: external nav links, custom nav footers, favicon includes, search color and placeholder configuration, mermaid.js support, and nav sorting
+- Over 20 bugfixes! Big ones include fixing the `rake` command, using `relative_url`, and search input color
+- More documentation, especially on using custom includes
+- Updating core dependencies to stable Ruby versions
+- A WIP [template repository](https://github.com/just-the-docs/just-the-docs-template) that allows you to setup your own repository using Just the Docs and GitHub Pages with one click - give it a shot! More documentation, etc. is on the way!
+
+We want your feedback! Are these changes helpful? Are our docs easy to understand? Should new features like `mermaid` be opt-in or opt-out? Please [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) and let us know!
+
+### Trying out pre-release `v0.4.0.rc1`
+
+Due to the massive scope of these changes, we're making `v0.4.0.rc1` avaialble as a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc1`.
+
+To use this RC explicitly as a remote theme:
+
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.4.0.rc1
+```
+
+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.0.rc1"
+```
+
+### Staying on `v0.3.3`
+
+If you're not ready to make the switch, that's alright! If your version of just-the-docs is pinned to `v0.3.3` (i.e. by a `Gemfile.lock` or in `remote_theme`, then there's nothing you need to do.
+
+If you have not pinned your theme version, you should either:
+
+1. pin your gem version in your `Gemfile`, like so
+```Ruby
+gem "just-the-docs", "0.3.3"
+```
+2. freeze the `remote_theme`, like so
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.3.3
+```
+
+{: .warning }
+Use of branches for closed PRs (e.g., [#466], [#578]) is now deprecated, as those branches have been (directly or indirectly) merged, and they may be deleted after the pre-release of `v0.4.0.rc1`.
+
+### Maintenance
+
+Internally, our maintainer team has expanded: [Patrick Marsceill][@pmarsceill], the original maintainer, has stepped down from an active role after almost 4 years! We're very thankful for the work that he's done to create and maintain one of the most popular Jekyll themes. Please join us in giving him thanks!
+
+The new core team currently consists of [@mattxwang], [@pdmosses], [@skullface], [@dougaitken], and [@max06]. Over the past six months, we've been triaging and merging in PRs, as well as contributing our own fixes. We'll continue to address open issues, merge in PRs from the community, and plan out the future of Just the Docs. If you'd like to contribute, now is a great time!
+
+[@mattxwang]: https://github.com/mattxwang
+[@pdmosses]: https://github.com/pdmosses
+[@skullface]: https://github.com/skullface
+[@dougaitken]: https://github.com/dougaitken
+[@max06]: https://github.com/max06
+
+### Roadmap
+
+In the short-term, we're committed to tidying up everything for a `v0.4.0` release. This involves fixing bugs reported from the community in this pre-release, as well as continually merging in minor PRs.
+
+We're also scoping out medium and long-term projects, and want to keep you in the loop. These include:
+
+- upgrading to Jekyll 4, and stopping support for Jekyll 3
+- versioned docs - issue [#728]
+- improved accessibility - issues [#566], [#870]
+- internationalization (i18n) - issue [#59]
+- recursive/multi-level navigation - PR [#462]
+- toggleable dark mode - issue [#234]
+
+as well as DX improvements like better regression tests, CI, and tooling. If you're interested in any of these, please join us [on GitHub](https://github.com/just-the-docs/just-the-docs) - any contribution (raising an issue, writing docs, or submitting a PR) is welcome!
+
+[#728]: https://github.com/just-the-docs/just-the-docs/issues/728
+[#566]: https://github.com/just-the-docs/just-the-docs/issues/566
+[#870]: https://github.com/just-the-docs/just-the-docs/issues/870
+[#59]: https://github.com/just-the-docs/just-the-docs/issues/59
+[#462]: https://github.com/just-the-docs/just-the-docs/pull/462
+[#234]: https://github.com/just-the-docs/just-the-docs/issues/234
+
+### Features
+
+* Added: Combination by [@pdmosses] in [#578]
+  - Added: dark highlighting in [#463]
+  - Added: pages and collections in [#448]
+  - Added: callouts in [#466]
+  - Fixed: breadcrumb behaviour … by [@AdityaTiwari2102] in [#477]
+  - Fixed: prevent rake command corrupting search data in [#495] (also listed below)
+  - Fixed: nested lists in [#496]
+  - Fixed: set color for search input in [#498] (also listed below)
+  - Fixed: sites with no child pages (no PR)
+  - Fixed: TOC/breadcrumbs for multiple collections in [#494]
+  - Added: collection configuration option `nav_fold` (no PR)
+  - Fixed: indentation and color for folded collection navigation (no PR)
+  - Fixed: scroll navigation to show the link to the current page in [#639]
+  - Fixed: Replace all uses of `absolute_url` by `relative_url`, by [@svrooij] in [#544]
+* Added: custom favicon `_includes` by [@burner1024] in [#364]
+* Added: set color for search input by [@pdmosses] in [#498]
+* Added: search placeholder configuration by [@mattxwang] in [#613]
+* Added: 'child_nav_order' front matter to be able to sort navigation pages in reverse by [@jmertic] in [#726]
+* Added: `nav_footer_custom` include by [@nathanjessen] in [#474]
+* Added: style fixes for jekyll-asciidoc by [@alyssais] in [#829]
+* Added: mermaid.js support by [@nascosto] in [#857]
+* Added: support for external navigation links by [@SPGoding] in [#876]
+* Added: refactor `mermaid` config to use `mermaid_config.js` include, only require `mermaid.version` in `_config.yml` by [@mattxwang] in [#909]
+* Fixed: prepend `site.collections_dir` if exists by [@alexsegura] in [#519]
+* Fixed: nested task lists (#517) by [@pdmosses] in [#855]
+* Fixed: suppress Liquid processing in CSS comments by [@pdmosses] in [#686]
+* Fixed: prevent rake command from corrupting search data by [@pdmosses] in [#495]
+* Fixed: anchor heading links should be visible on focus by [@jacobhq] in [#846]
+* Fixed: add `overflow-x: auto` to `figure.highlight` by [@iridazzle] in [#727]
+* Fixed: add `overflow-wrap: word-break` to `body` by [@iridazzle] in [#889]
+* Fixed: vertical alignment for consecutive labels by [@Eisverygoodletter] in [#893]
+* Fixed: allow links to wrap by [@pdmosses] in [#905]
+* Fixed: nav scroll feature and absolute/relative URLs by [@pdmosses] in [#898]
+
+[#578]: https://github.com/just-the-docs/just-the-docs/pull/578
+[#463]: https://github.com/just-the-docs/just-the-docs/pull/463
+[#448]: https://github.com/just-the-docs/just-the-docs/pull/448
+[#466]: https://github.com/just-the-docs/just-the-docs/pull/466
+[#477]: https://github.com/just-the-docs/just-the-docs/pull/477
+[#495]: https://github.com/just-the-docs/just-the-docs/pull/495
+[#496]: https://github.com/just-the-docs/just-the-docs/pull/496
+[#498]: https://github.com/just-the-docs/just-the-docs/pull/498
+[#494]: https://github.com/just-the-docs/just-the-docs/pull/494
+[#639]: https://github.com/just-the-docs/just-the-docs/pull/639
+[#544]: https://github.com/just-the-docs/just-the-docs/pull/544
+[#364]: https://github.com/just-the-docs/just-the-docs/pull/364
+[#498]: https://github.com/just-the-docs/just-the-docs/pull/498
+[#613]: https://github.com/just-the-docs/just-the-docs/pull/613
+[#726]: https://github.com/just-the-docs/just-the-docs/pull/726
+[#474]: https://github.com/just-the-docs/just-the-docs/pull/474
+[#829]: https://github.com/just-the-docs/just-the-docs/pull/829
+[#857]: https://github.com/just-the-docs/just-the-docs/pull/857
+[#876]: https://github.com/just-the-docs/just-the-docs/pull/876
+[#909]: https://github.com/just-the-docs/just-the-docs/pull/909
+[#519]: https://github.com/just-the-docs/just-the-docs/pull/519
+[#855]: https://github.com/just-the-docs/just-the-docs/pull/855
+[#686]: https://github.com/just-the-docs/just-the-docs/pull/686
+[#495]: https://github.com/just-the-docs/just-the-docs/pull/495
+[#846]: https://github.com/just-the-docs/just-the-docs/pull/846
+[#727]: https://github.com/just-the-docs/just-the-docs/pull/727
+[#889]: https://github.com/just-the-docs/just-the-docs/pull/889
+[#893]: https://github.com/just-the-docs/just-the-docs/pull/893
+[#905]: https://github.com/just-the-docs/just-the-docs/pull/905
+[#898]: https://github.com/just-the-docs/just-the-docs/pull/898
+
+### Documentation
+
+* Added: docs on how to break an `ol` by [@pdmosses] in [#856]
+* Added: docs for custom includes by [@nathanjessen] in [#806]
+* Added: document caveat about variable dependencies by [@waldyrious] in [#555]
+* Added: docs on how to use `custom_head` to add a custom favicon by [@UnclassedPenguin] in [#814]
+* Fixed: `ol` on `index.md` by [@pmarsceill] in [#778]
+* Fixed: image link in Markdown kitchen sink by [@JeffGuKang] in [#221]
+* Fixed: images in Markdown kitchen sink by [@dougaitken] in [#782]
+* Fixed: clearer label of link to Jekyll quickstart by [@waldyrious] in [#549]
+* Fixed: remove extra spaces in component docs by [@MichelleBlanchette] in [#554]
+* Fixed: double "your" typo in `index.md` by [@sehilyi] in [#499]
+* Fixed: "you" -> "your" typo in `index.md` by [@nathanjessen] in [#473]
+* Fixed: spacing in toc example by [@henryiii] in [#835]
+* Fixed: typo in `README` on `_config.yml` by [@ivanskodje] in [#891]
+* Fixed: missing code fence in navigation structure docs by [@mattxwang] in [#906]
+
+[#856]: https://github.com/just-the-docs/just-the-docs/pull/856
+[#806]: https://github.com/just-the-docs/just-the-docs/pull/806
+[#555]: https://github.com/just-the-docs/just-the-docs/pull/555
+[#814]: https://github.com/just-the-docs/just-the-docs/pull/814
+[#778]: https://github.com/just-the-docs/just-the-docs/pull/778
+[#221]: https://github.com/just-the-docs/just-the-docs/pull/221
+[#782]: https://github.com/just-the-docs/just-the-docs/pull/782
+[#549]: https://github.com/just-the-docs/just-the-docs/pull/549
+[#554]: https://github.com/just-the-docs/just-the-docs/pull/554
+[#499]: https://github.com/just-the-docs/just-the-docs/pull/499
+[#473]: https://github.com/just-the-docs/just-the-docs/pull/473
+[#835]: https://github.com/just-the-docs/just-the-docs/pull/835
+[#891]: https://github.com/just-the-docs/just-the-docs/pull/891
+[#906]: https://github.com/just-the-docs/just-the-docs/pull/906
+
+### Maintenance
+
+* Added: VScode devcontainer by [@max06] in [#783]
+* Added: `webrick` to `Gemfile` by [@mattxwang] in [#799]
+* Added: 'This site is powered by Netlify.' to the footer by [@mattxwang] in [#797]
+* Updated: new repo path by [@pmarsceill] in [#775]
+* Updated: rename `master` -> `main` by [@pmarsceill] in [#776]
+* Updated: README by [@pmarsceill] in [#777]
+* Updated: Code of Conduct to Contributor Covenant v2.1 by [@mattxwang] in [#790]
+* Updated: CI files, Ruby & Node Versions by [@mattxwang] in [#820]
+* Updated: Stylelint to v14, extend SCSS plugins, remove primer-* configs, resolve issues by [@mattxwang] in [#821]
+
+[#783]: https://github.com/just-the-docs/just-the-docs/pull/783
+[#799]: https://github.com/just-the-docs/just-the-docs/pull/799
+[#797]: https://github.com/just-the-docs/just-the-docs/pull/797
+[#775]: https://github.com/just-the-docs/just-the-docs/pull/775
+[#776]: https://github.com/just-the-docs/just-the-docs/pull/776
+[#777]: https://github.com/just-the-docs/just-the-docs/pull/777
+[#790]: https://github.com/just-the-docs/just-the-docs/pull/790
+[#820]: https://github.com/just-the-docs/just-the-docs/pull/820
+[#821]: https://github.com/just-the-docs/just-the-docs/pull/821
+
+### Dependencies
+
+* Upgrade to GitHub-native Dependabot by @dependabot-preview in [#627]
+* [Security] Bump y18n from 3.2.1 to 3.2.2 by @dependabot-preview in [#606]
+* [Security] Bump hosted-git-info from 2.7.1 to 2.8.9 by @dependabot-preview in [#641]
+* [Security] Bump lodash from 4.17.19 to 4.17.21 by @dependabot-preview in [#640]
+* [Security] Bump ini from 1.3.5 to 1.3.8 by @dependabot-preview in [#511]
+* Bump path-parse from 1.0.6 to 1.0.7 by @dependabot in [#699]
+* Bump ajv from 6.10.0 to 6.12.6 by @dependabot in [#766]
+* Bump prettier from 2.1.2 to 2.5.1 by @dependabot in [#787]
+* Bump prettier from 2.5.1 to 2.6.2 by @dependabot in [#809]
+* Bump prettier from 2.6.2 to 2.7.1 by @dependabot in [#864]
+
+[#627]: https://github.com/just-the-docs/just-the-docs/pull/627
+[#606]: https://github.com/just-the-docs/just-the-docs/pull/606
+[#641]: https://github.com/just-the-docs/just-the-docs/pull/641
+[#640]: https://github.com/just-the-docs/just-the-docs/pull/640
+[#511]: https://github.com/just-the-docs/just-the-docs/pull/511
+[#699]: https://github.com/just-the-docs/just-the-docs/pull/699
+[#766]: https://github.com/just-the-docs/just-the-docs/pull/766
+[#787]: https://github.com/just-the-docs/just-the-docs/pull/787
+[#809]: https://github.com/just-the-docs/just-the-docs/pull/809
+[#864]: https://github.com/just-the-docs/just-the-docs/pull/864
+
+### New Contributors
+
+* [@AdityaTiwari2102] made their first contribution in [#477]
+* [@svrooij] made their first contribution in [#544]
+* [@alexsegura] made their first contribution in [#519]
+* [@burner1024] made their first contribution in [#364]
+* [@JeffGuKang] made their first contribution in [#221]
+* [@dougaitken] made their first contribution in [#782]
+* [@max06] made their first contribution in [#783]
+* [@sehilyi] made their first contribution in [#499]
+* [@nathanjessen] made their first contribution in [#473]
+* [@waldyrious] made their first contribution in [#549]
+* [@MichelleBlanchette] made their first contribution in [#554]
+* [@henryiii] made their first contribution in [#835]
+* [@jmertic] made their first contribution in [#726]
+* [@jacobhq] made their first contribution in [#846]
+* [@UnclassedPenguin] made their first contribution in [#814]
+* [@alyssais] made their first contribution in [#829]
+* [@nascosto] made their first contribution in [#857]
+* [@SPGoding] made their first contribution in [#876]
+* [@iridazzle] made their first contribution in [#727]
+* [@ivanskodje] made their first contribution in [#891]
+* [@Eisverygoodletter] made their first contribution in [#893]
+
+[@AdityaTiwari2102]: https://githhub.com/AdityaTiwari2102
+[@svrooij]: https://githhub.com/svrooij
+[@alexsegura]: https://githhub.com/alexsegura
+[@burner1024]: https://githhub.com/burner1024
+[@JeffGuKang]: https://githhub.com/JeffGuKang
+[@dougaitken]: https://githhub.com/dougaitken
+[@max06]: https://githhub.com/max06
+[@sehilyi]: https://githhub.com/sehilyi
+[@nathanjessen]: https://githhub.com/nathanjessen
+[@waldyrious]: https://githhub.com/waldyrious
+[@MichelleBlanchette]: https://githhub.com/MichelleBlanchette
+[@henryiii]: https://githhub.com/henryiii
+[@jmertic]: https://githhub.com/jmertic
+[@jacobhq]: https://githhub.com/jacobhq
+[@UnclassedPenguin]: https://githhub.com/UnclassedPenguin
+[@alyssais]: https://githhub.com/alyssais
+[@nascosto]: https://githhub.com/nascosto
+[@SPGoding]: https://githhub.com/SPGoding
+[@iridazzle]: https://githhub.com/iridazzle
+[@ivanskodje]: https://githhub.com/ivanskodje
+[@Eisverygoodletter]: https://githhub.com/Eisverygoodletter
+
+**Full Changelog**: https://github.com/just-the-docs/just-the-docs/compare/v0.3.3...v0.4.0.rc1
+
+[@pmarsceill]: https://githhub.com/pmarsceill
+
+## v0.3.3
+
+### 🚀 Features
+
+- Add custom header and footer include files @CodeSandwich (#334)
+
+### 🐛 Bug Fixes
+
+- Limit the effect of `nav_exclude` to the main navigation @pdmosses (#443)
+- Update normalize.scss @pdmosses (#444)
+- Update code.scss @pdmosses (#445)
+- Fix list alignment @pdmosses (#446)
+
+### 🧰 Maintenance
+
+- Bump stylelint-config-primer from 9.0.0 to 9.2.1 @dependabot-preview (#451)
+- Bump stylelint from 13.6.1 to 13.7.2 @dependabot-preview (#440)
+- Bump @primer/css from 15.1.0 to 15.2.0 @dependabot-preview (#436)
+- Bump prettier from 2.1.1 to 2.1.2 @dependabot-preview (#429)
+
+## v0.3.2
+
+### Changes
+
+- Safe page sorting @pdmosses (#411)
+- v0.3.2 @pmarsceill (#388)
+
+### 🚀 Features
+
+- make font-sizes sass variables so they can be changed @pdebruic (#361)
+- run the site locally inside docker container @fogfish (#398)
+- Feature/doc collections @SgtSilvio (#379)
+- Adjust dl layout @pdmosses (#401)
+
+### 🐛 Bug Fixes
+
+- Add site.gh_edit_source to "Edit this page on GitHub" link @mrfleap (#418)
+- Inhibit text-transform for code in h4 @pdmosses (#404)
+- Fix native font stack precedence issue on Windows systems. @hvianna (#331)
+- Support for the linenos option on highlighted code @pdmosses (#375)
+- Update anchor_headings.html @pdmosses (#399)
+- Fix https @marksie1988 (#359)
+
+### 🧰 Maintenance
+
+- Bump prettier from 2.0.5 to 2.1.1 @dependabot-preview (#427)
+- Bump prettier from 2.0.5 to 2.1.1 @dependabot-preview (#419)
+- [Security] Bump lodash from 4.17.15 to 4.17.19 @dependabot-preview (#389)
+- Bump @primer/css from 14.4.0 to 15.1.0 @dependabot-preview (#402)
+- Bump lodash from 4.17.15 to 4.17.19 @dependabot (#384)
+- Bump @primer/css from 14.4.0 to 15.0.0 @dependabot-preview (#371)
+
+
+## v0.3.1
+
+### Changes
+
+### 🐛 Bug Fixes
+
+- Improve accessibility by adding label to Anchor links. @mscoutermarsh (#376)
+
+### 🧰 Maintenance
+
+- Remove collapsible TOC on nav doc @pmarsceill (#368)
+- Pdmosses collapsible toc @pmarsceill (#367)
+
+
+## v0.3.0
+
+### Changes
+
+- v0.2.9 @pmarsceill (#306)
+
+### 🚀 Features
+
+- Add print styles @pmarsceill (#362)
+- Navigation improvements and search sections @SgtSilvio (#352)
+
+### 🐛 Bug Fixes
+
+- Remove constraint with jekyll 4.1.0 @PierrickMartos (#348)
+
+### 🧰 Maintenance
+
+- Bump version numbers @pmarsceill (#360)
+- Bump stylelint from 13.3.3 to 13.6.1 @dependabot-preview (#343)
+- Bump stylelint-config-prettier from 8.0.1 to 8.0.2 @dependabot-preview (#349)
+
+
+## v0.2.9
+
+### Bug fixes
+- Horizontal Alignment #103 @pmarsceill
+- Code snippet in headers do not inherit font size #140 @pmarsceill
+- Fix duplicated title and description tags #294 @iefserge
+- Update nav.html for handling nav_exclude #282 @blawqchain
+- Fix duplicate entries in nav.html and default.html #239 @KasparEtter
+- Don't show pages with no title (e.g. redirects in nav) https://github.com/pmarsceill/just-the-docs/pull/295/commits/672de29f2e332a9350af7237e4fb6693c848989e @SgtSilvio
+- [SEARCH RAKE] Fix search generator #319 @RoiArthurB
+
+### Enhancements
+- Improvement/custom themes #186 @SgtSilvio
+- feat: adds "edit this page" and "page last modified" to footer #217 @malsf21
+- feat: adds option to open aux links in new tab #229 @malsf21
+- Default nav order #236 @pdmosses
+- Enable IP anonymization in Google Analytics (GDPR) #250 @r-brown
+
+closes #240 #308 #266 #140 #103
+
+## v0.2.8
+
+### Bugfixes
+- bugfix in search.rake #218 @tiaitsch85
+
+### Dependency and security updates:
+
+- Update jekyll requirement from ~> 3.8.5 to >= 3.8.5, < 4.1.0 #197 @dependabot-preview
+- Update rake requirement from ~> 12.3.1 to >= 12.3.1, < 13.1.0 #227 @dependabot-preview
+- Bump stylelint-config-primer from 8.0.0 to 9.0.0 #247 @dependabot-preview
+- Update bundler requirement from ~> 2.0.1 to ~> 2.1.4 #268 @dependabot-preview
+- Bump @primer/css from 12.7.0 to 14.3.0 #296 @dependabot-preview
+
+### Operations
+
+- Update CI to test multiple versions of Jekyll
+- Update CI to check the rake command that builds the search file
+
+fixes #291 #256 #293 #177
+
+## v0.2.7
+
+### Bugs fixed
+- Anchor headings are now displayed on hover, not only on heading hover
+- Deduplicated anchor heading svg
+- If last page of `site.html_pages` was excluded from search, search json breaks
+- Config variable should be `blanklines` not `blank_lines` for html compression
+- `list-style-none` does not hide bullets on `ul`
+
+### Enhancements
+- Summary for child pages appears in generated TOC
+- Site logo configuration supported replacing title text with image
+- Allow custom CSS overrides (new scss partial at the end of the cascade) separate from variable overrides.
+- Configuration around search strings added to allow search for hyphenated words
+
+### Maintenance
+- Update docs to suggest using index.md as section page filename
+- Bump @primer/css from 12.6.0 to 12.7.0
+- Bump mixin-deep from 1.3.1 to 1.3.2
+- Bump stylelint-config-primer from 7.0.1 to 8.0.0
+
+### PR included
+- #98 by @stefanoborini Introduces the possibility for a summary in the table of contents
+- #141 by @ghabs Fix trailing comma bug in search-data.json
+- #153 by @jacobherrington Change button copy on theme preview
+- #181 by @m3nu Recommend using index.md as parent page for sections
+- #183 by @SgtSilvio Improve heading anchors
+- #187 by @SgtSilvio Improvement/site logo
+- #200 Bump mixin-deep from 1.3.1 to 1.3.2
+- #203 by @pdmosses Search config
+- #205 by @pdmosses Fix blank_lines var to blanklines in config.yml
+- #206 by @iamcarrico Allow for custom overrides by the user
+- #208 Bump @primer/css from 12.6.0 to 12.7.0
+- #213 Bump mixin-deep from 1.3.1 to 1.3.2
+- #214 Bump stylelint-config-primer from 7.0.1 to 8.0.0
+- #215 Bump @primer/css from 12.6.0 to 12.7.0
+
+## v0.2.6
+
+### Bugs fixed
+- Google Analytics tag has been updated #162
+- ~BaseURL has been modified #109~ Reverted -- seems the existing implementation worked
+- Titles can now wrap fixes #106
+
+### Enhancements
+- Search now displays content preview #135
+- Custom footer content added #179
+- Now using GitHub Actions for CI #170
+
+### Maintenance
+- lunrjs upgraded #135
+- Nav generation is optimized #159
+- Stylelint upgrade #143
+- Stylelint config primer upgrade #149
+- Lodash upgrade #160
+
+### PR included
+~#109 by @daviddarnes - Fix baseurl link~ Reverted
+#135 by @SgtSilvio - Upgrades lunr.js, improves search UI, adds heading anchors
+#152 by @yavorg - Improves syntax highlighting for js readablity
+#159 by @julienduchesne - Optimizes nav generation
+#162 by @nergmada - Modifies the google analytics code to match the new tags used by GA
+
+
+## v0.2.5
+
+### Bugs fixed
+
+- Duplicate title tag when Jekyll SEO Plugin gem is used #125 #126
+
+### Enhancements
+
+- Favicon support added #118
+
+### Maintenance
+- Bump stylelint-config-primer from 6.0.0 to 7.0.0  #123
+- Bump @primer/css from 12.2.3 to 12.3.1 #129
+- Add workflow to publish to GPR
+- Fix workflow to publish to Ruby Gems
+
+## v0.2.4
+
+### Bugs
+
+- #102 Remove unnecessary console.log() @JoeNyland
+- #97 Import custom Sass variable overrides before default variables are defined @montchr and @ptvandi
+
+### Additions
+- #117 Add links to docs for setting up GH pages locally @gnarea
+- #95 Add SEO and 'lang' param for `_config` @gebeto
+
+## v0.2.3
+
+### Enhancements
+- Adds ability to use Google Analytics tracking by @pmarsceill
+
+### Bug fixes
+- Fixes 404 error for "/assets/js//search-data.json" by @stephenedmondson
+- Fixes #80 Single quotes in the string were unescaped and ruby attempted variable substitution of amp within it (which failed) by @novelistparty
+- Fixes bug that would only show 2 or more search results (not one) by @ilivewithian
+- Fixes a typo on the layout example by @woernfl
+- Fixes #78 Page scroll position too far down on load by @pmarsceill
+- Fixds ability to nest ul in ol without breaking style or counters
+
+### Dependency updates
+- Bumps stylelint dependency from 9.9.0 to 9.10.1
+
+## v0.2.2
+
+- Bumps stylelint-config-primer to 3.0.1 #44
+- Bumps bundler req to 2.0.1 #61
+- Adds custom 404 page
+- Excludes package-lock.json from jekyll build #47
+- Fixes keyboard scrolling / focus #48
+- Adds ARIA roles to navigation elements
+- Adds support for optional page description metadata (if present in yaml front matter)
+- Addresses some issues with search in #46
+- Option to hide TOC on parent pages if turned off in page's YAML front matter #30
+- Option to suppress an item from being indexed by search if present in page's YAML front matter #32
+
+## v0.2.1
+
+This update fixes security vulnerablities in the lodash sub-dependency and bumps other dev dependencies to their latest version.
+
+## v0.2.0
+
+Adds:
+- Dark mode via `color_scheme` parameter
+- Ability to exclude a page from the main nav with `nav_exclude` parameter closes #21
+- Ability for create children of children pages (3 nav levels) closes #25
+
+Changes:
+- Permalink structure for tiered navigation has been updated
+- Some colors have been updated for consistency / accessibility
+
+## v0.1.6
+
+### Added
+
+- Support for task list styles #19
+- Configuration docs
+- Configuration option to enable / disable search
+- Normalize.scss dependency pulled into project #16 #
+
+### Fixed
+
+- Layout bug in navigation #17
+
+## v0.1.5
+
+Major changes:
+
+- Fixed bug where the rake task would fail when the assets/js directory didn't exist
+
+## v0.1.4
+
+Major changes:
+- Adds Rake as a runtime dependency
+- Definition list styled
+- Sidebar and support cleaned up for smaller screen support
+- Updated some stale docs
+
+## v0.1.3
+
+Major changes:
+- Fix path problems, typos, and general clean-up for OSS.
+
+## v0.1.2
+
+Fix paths when deployed to gh-pages
+
+## v0.1.1
+
+Major updates:
+- Adds search to mobile nav
+- Pulls footer to bottom of the page on mobile (not hidden in nav)
+
+Minor updates:
+- Cleans up h1 typography spacing

CODE_OF_CONDUCT.md

@@ -2,45 +2,131 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment include:
+Examples of behavior that contributes to a positive environment for our
+community include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
 
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
-## Our Responsibilities
+## Enforcement Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
 
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at patrick.marsceill@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+patrick.marsceill@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
 
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

Dockerfile

@@ -0,0 +1,12 @@
+FROM ruby:2.7
+
+ENV LC_ALL C.UTF-8
+ENV LANG en_US.UTF-8
+ENV LANGUAGE en_US.UTF-8
+
+WORKDIR /usr/src/app
+
+COPY Gemfile just-the-docs.gemspec ./
+RUN gem install bundler && bundle install
+
+EXPOSE 4000

Gemfile

@@ -1,2 +1,4 @@
 source "https://rubygems.org"
 gemspec
+
+gem "webrick", "~> 1.7"

README.md

@@ -1,11 +1,11 @@
 <p align="right">
-    <a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://github.com/pmarsceill/just-the-docs/actions"><img src="https://github.com/pmarsceill/just-the-docs/workflows/CI/badge.svg" alt="Build status"></a>
+    <a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://github.com/just-the-docs/just-the-docs/actions/workflows/ci.yml"><img src="https://github.com/just-the-docs/just-the-docs/actions/workflows/ci.yml/badge.svg" alt="CI Build status"></a> <a href="https://app.netlify.com/sites/just-the-docs/deploys"><img src="https://api.netlify.com/api/v1/badges/9dc0386d-c2a4-4077-ad83-f02c33a6c0ca/deploy-status" alt="Netlify Status"></a>
 </p>
 <br><br>
 <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://pmarsceill.github.io/just-the-docs/">See it in action!</a></strong></p>
+    <p align="center"><strong><a href="https://just-the-docs.github.io/just-the-docs/">See it in action!</a></strong></p>
     <br><br><br>
 </p>
 
@@ -13,6 +13,17 @@
 
 ## Installation
 
+### via GitHub Pages remote theme
+
+The quickiest way to use Just The Docs is to use GitHub pages [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) feature in your `_config.yml` file:
+
+```yaml
+remote_theme: just-the-docs/just-the-docs
+```
+### via RubyGems:
+
+Alternatively you can install it as a Ruby Gem.
+
 Add this line to your Jekyll site's Gemfile:
 
 ```ruby
@@ -33,20 +44,23 @@ Or install it yourself as:
 
     $ gem install just-the-docs
 
+Alternatively, you can run it inside Docker while developing your site
+
+    $ docker-compose up
+
 ## Usage
 
-[View the documentation](https://pmarsceill.github.io/just-the-docs/) for usage information.
+[View the documentation](https://just-the-docs.github.io/just-the-docs/) for usage information.
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/pmarsceill/just-the-docs. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/just-the-docs/just-the-docs. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 ### Submitting code changes:
 
-- Open a [Pull Request](https://github.com/pmarsceill/just-the-docs/pulls)
+- Open a [Pull Request](https://github.com/just-the-docs/just-the-docs/pulls)
 - Ensure all CI tests pass
 - Await code review
-- Bump the version number in `just-the-docs.gemspec` and `package.json` according to [semantic versioning](https://semver.org/).
 
 ### Design and development principles of this theme:
 
@@ -59,6 +73,8 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/pmarsc
 
 To set up your environment to develop this theme, run `bundle install`.
 
+A modern [devcontainer configuration](https://code.visualstudio.com/docs/remote/containers) for VSCode is included.
+
 Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
 When the theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.

_config.yml

@@ -16,19 +16,72 @@
 title: Just the Docs
 description: A Jekyll theme for documentation
 baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
-url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com
+url: "https://just-the-docs.github.io" # the base hostname & protocol for your site, e.g. http://example.com
 
 permalink: pretty
-exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
+
+exclude:
+ # from https://github.com/jekyll/jekyll/blob/master/lib/site_template/_config.yml:
+   - .sass-cache/
+   - .jekyll-cache/
+   - gemfiles/
+   - Gemfile
+   - Gemfile.lock
+   - node_modules/
+   - vendor/bundle/
+   - vendor/cache/
+   - vendor/gems/
+   - vendor/ruby/
+ # specific to the theme website:
+   - bin/
+   - lib/
+   - "*.gemspec"
+   - "*.gem"
+   - LICENSE.txt
+   - package.json
+   - package-lock.json
+   - Rakefile
+   - README.md
 
 # Set a path/url to a logo that will be displayed instead of the title
 #logo: "/assets/images/just-the-docs.png"
 
 # Enable or disable the site search
+# Supports true (default) or false
 search_enabled: true
+search:
+  # Split pages into sections that can be searched individually
+  # Supports 1 - 6, default: 2
+  heading_level: 2
+  # Maximum amount of previews per search result
+  # Default: 3
+  previews: 2
+  # Maximum amount of words to display before a matched word in the preview
+  # Default: 5
+  preview_words_before: 3
+  # Maximum amount of words to display after a matched word in the preview
+  # Default: 10
+  preview_words_after: 3
+  # Set the search token separator
+  # Default: /[\s\-/]+/
+  # Example: enable support for hyphenated search words
+  tokenizer_separator: /[\s/]+/
+  # Display the relative url in search results
+  # Supports true (default) or false
+  rel_url: true
+  # Enable or disable the search button that appears in the bottom right corner of every page
+  # Supports true or false (default)
+  button: false
 
-# Set the search token separator for hyphenated-word search:
-search_tokenizer_separator: /[\s/]+/
+# To disable support for mermaid diagrams (https://mermaid-js.github.io/mermaid/),
+# 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
+  # Pick an available version from https://cdn.jsdelivr.net/npm/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
 
 # Enable or disable heading anchors
 heading_anchors: true
@@ -36,21 +89,76 @@ heading_anchors: true
 # Aux links for the upper right navigation
 aux_links:
   "Just the Docs on GitHub":
-    - "//github.com/pmarsceill/just-the-docs"
+    - "//github.com/just-the-docs/just-the-docs"
 
-# Footer content appears at the bottom of every page's main content
-footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
+# Makes Aux links open in a new tab. Default is false
+aux_links_new_tab: false
 
-# Color scheme currently only supports "dark" or nil (default)
+# Sort order for navigation links
+# nav_sort: case_insensitive # default, equivalent to nil
+nav_sort: case_sensitive # Capital letters sorted before lowercase
+
+# External navigation links
+nav_external_links:
+  - title: Just the Docs on GitHub
+    url: https://github.com/just-the-docs/just-the-docs
+
+# Footer content
+# appears at the bottom of every page's main content
+
+# Back to top link
+back_to_top: true
+back_to_top_text: "Back to top"
+
+footer_content: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/just-the-docs/just-the-docs/tree/main/LICENSE.txt\">MIT license.</a> <a href=\"https://www.netlify.com/\">This site is powered by Netlify.</a>"
+
+# Footer last edited timestamp
+last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
+last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
+
+
+
+# Footer "Edit this page on GitHub" link text
+gh_edit_link: true # show or hide edit this page link
+gh_edit_link_text: "Edit this page on GitHub"
+gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo
+gh_edit_branch: "main" # the branch that your docs is served from
+# gh_edit_source: docs # the source that your files originate from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
+
+# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
 color_scheme: nil
 
+callouts_level: quiet # or loud
+callouts:
+  highlight:
+    color: yellow
+  important:
+    title: Important
+    color: blue
+  new:
+    title: New
+    color: green
+  note:
+    title: Note
+    color: purple
+  warning:
+    title: Warning
+    color: red
+
 # Google Analytics Tracking (optional)
 # e.g, UA-1234567-89
 ga_tracking: UA-2709176-10
+ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default)
 
 plugins:
   - jekyll-seo-tag
 
+kramdown:
+  syntax_highlighter_opts:
+    block:
+      line_numbers: false
+
 compress_html:
   clippings: all
   comments: all
@@ -58,3 +166,5 @@ compress_html:
   startings: []
   blanklines: false
   profile: false
+  # ignore:
+  #   envs: all

_includes/css/callouts.scss.liquid

@@ -0,0 +1,93 @@
+{%- comment -%}
+  {% include css/callouts.scss.liquid color_scheme = string %}
+  produces SCSS for all the callouts in site.callouts. For the "dark"
+  color scheme, the levels of the text and background colors are reversed.
+{%- endcomment -%}
+
+{%- assign callout_background_hue = "000" -%}
+{%- assign callout_color_hue = "300" -%}
+{%- if site.callouts_level == "loud" or include.color_scheme == "dark" and site.callouts_level != "quiet" -%}
+  {%- assign callout_background_hue = "300" -%}
+  {%- assign callout_color_hue = "000" -%}
+{%- endif -%}
+
+div.opaque {
+  background-color: $body-background-color;
+}
+
+{%- for callout in site.callouts %}
+
+{%- assign callout_opacity = callout[1].opacity | default: site.callouts_opacity | default: 0.2 -%}
+
+p.{{ callout[0] }}, blockquote.{{ callout[0] }} {
+    background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
+    border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
+    border-radius: $border-radius;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+    padding: .8rem;
+    {% if callout[1].title %}
+    &::before {
+        color: ${{ callout[1].color }}-{{ callout_color_hue }};
+        content: "{{ callout[1].title }}";
+        display: block;
+        font-weight: bold;
+        text-transform: uppercase;
+        font-size: .75em;
+        padding-bottom: .125rem;
+    }
+    {% endif %}
+    > .{{ callout[0] }}-title {
+      color: ${{ callout[1].color }}-{{ callout_color_hue }};
+      display: block;
+      font-weight: bold;
+      text-transform: uppercase;
+      font-size: .75em;
+      padding-bottom: .125rem;
+    }
+}
+
+p.{{ callout[0] }}-title, blockquote.{{ callout[0] }}-title {
+    background: rgba(${{ callout[1].color }}-{{ callout_background_hue }}, {{ callout_opacity }});
+    border-left: $border-radius solid ${{ callout[1].color }}-{{ callout_color_hue }};
+    border-radius: $border-radius;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+    padding: .8rem;
+    > p:first-child {
+      margin-top: 0;
+      margin-bottom: 0;
+      color: ${{ callout[1].color }}-{{ callout_color_hue }};
+      display: block;
+      font-weight: bold;
+      text-transform: uppercase;
+      font-size: .75em;
+      padding-bottom: .125rem;
+    }
+}
+
+blockquote.{{ callout[0] }} {
+  margin-left: 0;
+  margin-right: 0;
+  
+  > p:first-child {
+    margin-top: 0;
+  }
+    
+  > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+blockquote.{{ callout[0] }}-title {
+  margin-left: 0;
+  margin-right: 0;
+  
+  > p:nth-child(2) {
+    margin-top: 0;
+  }
+    
+  > p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+{% endfor -%}

_includes/css/custom.scss.liquid

@@ -0,0 +1 @@
+@import "./custom/custom";

_includes/css/just-the-docs.scss.liquid

@@ -0,0 +1,9 @@
+{% if site.logo %}
+$logo: "{{ site.logo | relative_url }}";
+{% endif %}
+@import "./support/support";
+@import "./color_schemes/light";
+@import "./color_schemes/{{ include.color_scheme }}";
+@import "./modules";
+{% include css/custom.scss.liquid %}
+{% include css/callouts.scss.liquid color_scheme = include.color_scheme %}

_includes/favicon.html

@@ -0,0 +1 @@
+<link rel="shortcut icon" href="{{ 'favicon.ico' | relative_url }}" type="image/x-icon">

_includes/fix_linenos.html

@@ -0,0 +1,65 @@
+{%- comment -%}
+This file can be used to fix the HTML produced by Jekyll for highlighted
+code with line numbers.
+
+It works with `{% highlight some_language linenos %}...{% endhighlight %}`
+and with the Kramdown option to add line numbers to fenced code.
+
+The implementation was derived from the workaround provided by 
+Dmitry Hrabrov (DeXP) at
+https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+
+EXPLANATION
+
+The HTML produced by Rouge highlighting with lie numbers is of the form
+`code table`. Jekyll (<= 4.1.1) always wraps the highlighted HTML
+with `pre`. This wrapping is not only unnecessary, but also transforms
+the conforming HTML produced by Rouge to non-conforming HTML, which
+results in HTML validation error reports. 
+
+The fix removes the outer `pre` tags whenever they contain the pattern
+`<table class="rouge-table">`.
+  
+Apart from avoiding HTML validation errors, the fix allows the use of
+the [Jekyll layout for compressing HTML](http://jch.penibelst.de),
+which relies on `pre` tags not being nested, according to
+https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-172069842 
+
+USAGE
+
+(Any names can be used for `some_var` and `some_language`.)
+
+{% capture some_var %}
+{% highlight some_language linenos %}
+Some code
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=some_var %}
+
+For code fences:
+
+{% capture some_var %}
+```some_language
+Some code
+```
+{% endcapture %}
+{% assign some_var = some_var | markdownify %}
+{% include fix_linenos.html code=some_var %}
+
+CAVEATS
+
+The above does not work when `Some code` happens to contain the matched string 
+`<table class="rouge-table">`.
+
+The use of this file overwrites the variable `fix_linenos_code` with `nil`.
+
+{%- endcomment -%}
+
+{% assign fix_linenos_code = include.code %}
+{% if fix_linenos_code contains '<table class="rouge-table">' %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: '<pre class="highlight">', '<pre>' %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: "<pre><code", "<code" %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: "</code></pre>", "</code>" %}
+{% endif %}
+{{ fix_linenos_code }}
+{% assign fix_linenos_code = nil %}

_includes/footer_custom.html

@@ -0,0 +1,3 @@
+{%- if site.footer_content -%}
+  <p class="text-small text-grey-dk-100 mb-0">{{ site.footer_content }}</p>
+{%- endif -%}

_includes/head.html

@@ -2,17 +2,17 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
-  {% if site.plugins.jekyll-seo == nil %}
+  {% unless site.plugins contains "jekyll-seo-tag" %}
     <title>{{ page.title }} - {{ site.title }}</title>
 
     {% if page.description %}
       <meta name="Description" content="{{ page.description }}">
     {% endif %}
-  {% endif %}
+  {% endunless %}
 
-  <link rel="shortcut icon" href="{{ 'favicon.ico' | absolute_url }}" type="image/x-icon">
+  {% include favicon.html %}
 
-  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs.css' | absolute_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
 
   {% if site.ga_tracking != nil %}
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
@@ -21,15 +21,20 @@
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
 
-      gtag('config', "{{ site.ga_tracking }}");
+      gtag('config', '{{ site.ga_tracking }}'{% unless site.ga_tracking_anonymize_ip == nil %}, { 'anonymize_ip': true }{% endunless %});
     </script>
 
   {% endif %}
 
   {% if site.search_enabled != false %}
-    <script type="text/javascript" src="{{ '/assets/js/vendor/lunr.min.js' | absolute_url }}"></script>
+    <script src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
   {% endif %}
-  <script type="text/javascript" src="{{ '/assets/js/just-the-docs.js' | absolute_url }}"></script>
+
+  {% if site.mermaid %}
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"></script>
+  {% endif %}
+
+  <script src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 

_includes/icons/external_link.html

@@ -0,0 +1,5 @@
+<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
+<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
+  <title id="svg-external-link-title">(external link)</title>
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
+</symbol>

_includes/mermaid_config.js

@@ -0,0 +1 @@
+{}

_includes/nav.html

@@ -1,40 +1,233 @@
-<nav role="navigation" aria-label="Main navigation">
-  <ul class="navigation-list">
-    {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
-    {%- for node in pages_list -%}
-      {%- unless node.nav_exclude -%}
-        {%- if node.parent == nil -%}
-          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
-            {%- if page.parent == node.title or page.grand_parent == node.title -%}
-              {%- assign first_level_url = node.url | absolute_url -%}
-            {%- endif -%}
-            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
-            {%- if node.has_children -%}
-              {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
-              <ul class="navigation-list-child-list ">
-                {%- for child in children_list -%}
-                  <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
-                    {%- if page.url == child.url or page.parent == child.title -%}
-                      {%- assign second_level_url = child.url | absolute_url -%}
-                    {%- endif -%}
-                    <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
-                    {%- if child.has_children -%}
-                        {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
-                        <ul class="navigation-list-child-list">
-                        {%- for grand_child in grand_children_list -%}
-                          <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
-                            <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
-                          </li>
-                        {%- endfor -%}
-                      </ul>
-                    {%- endif -%}
-                  </li>
-                {%- endfor -%}
-              </ul>
-            {%- endif -%}
-          </li>
+{%- 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 title_pages = include.pages
+      | where_exp: "item", "item.title != nil" -%}
+
+{%- comment -%}
+  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 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 -%}
+
+{%- 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 -%}
+
+{%- 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
+      | where_exp: "item", "item.parent != nil"
+      | where_exp: "item", "item.grand_parent == nil" -%}
+{%- assign third_level_pages = pages_list
+      | where_exp: "item", "item.grand_parent != nil" -%}
+
+{%- comment -%}
+  The order of sibling pages in `pages_list` determines the order of display of
+  links to them in lists of navigation links and in auto-generated TOCs.
+{%- endcomment -%}
+
+<ul class="nav-list">
+{%- for node in first_level_pages -%}
+    {%- unless node.nav_exclude -%}
+      <li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
+        {%- if node.has_children -%}
+          <a href="#" class="nav-list-expander" aria-label="toggle links in {{ node.title }} category">
+            <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
+          </a>
         {%- endif -%}
-      {%- endunless -%}
-    {%- endfor -%}
-  </ul>
-</nav>
+        <a href="{{ node.url | relative_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
+        {%- if node.has_children -%}
+          {%- assign children_list = second_level_pages
+                | where: "parent", node.title -%}
+          {%- if node.child_nav_order == 'desc' -%}
+            {%- assign children_list = children_list | reverse -%}
+          {%- endif -%}
+          <ul class="nav-list ">
+          {%- for child in children_list -%}
+            {%- 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">
+                  <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
+                </a>
+              {%- 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 -%}
+                {%- assign grand_children_list = third_level_pages
+                      | where: "parent", child.title
+                      | where: "grand_parent", node.title -%}
+                {%- if child.child_nav_order == 'desc' -%}
+                  {%- assign grand_children_list = grand_children_list | reverse -%}
+                {%- endif -%}
+                <ul class="nav-list">
+                {%- for grand_child in grand_children_list -%}
+                  {%- unless grand_child.nav_exclude -%}
+                  <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
+                    <a href="{{ grand_child.url | relative_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+                  </li>
+                  {%- endunless -%}
+                {%- endfor -%}
+                </ul>
+              {%- endif -%}
+            </li>
+            {%- endunless -%}
+          {%- endfor -%}
+          </ul>
+        {%- endif -%}
+      </li>
+    {%- endunless -%}
+{%- endfor -%}
+{%- assign nav_external_links = site.nav_external_links -%}
+{%- for node in nav_external_links -%}
+      <li class="nav-list-item external">
+        <a href="{{ node.url | absolute_url }}" class="nav-list-link external">
+          {{ node.title }}
+          {% unless node.hide_icon %}<svg viewBox="0 0 24 24" aria-labelledby="svg-external-link-title"><use xlink:href="#svg-external-link"></use></svg>{% endunless %}
+        </a>
+      </li>
+{%- 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.
+{%- 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: "grand_parent", page.parent -%}
+    {%- if page.child_nav_order == "desc" -%}
+      {%- assign toc_list = toc_list | reverse -%}
+    {%- endif -%}
+  {%- endif -%}
+{%- endif -%}

_includes/search_placeholder_custom.html

@@ -0,0 +1 @@
+Search {{site.title}}

_includes/toc_heading_custom.html

@@ -0,0 +1 @@
+<h2 class="text-delta">Table of contents</h2>

_includes/vendor/anchor_headings.html

@@ -1,18 +1,44 @@
 {% capture headingsWorkspace %}
   {% comment %}
-    Version 1.0.3
+    Copyright (c) 2018 Vladimir "allejo" Jimenez
+
+    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.
+  {% endcomment %}
+  {% comment %}
+    Version 1.0.7
       https://github.com/allejo/jekyll-anchor-headings
 
     "Be the pull request you wish to see in the world." ~Ben Balter
 
     Usage:
-      {% include anchor_headings.html html=content %}
+      {% include anchor_headings.html html=content anchorBody="#" %}
 
     Parameters:
       * html          (string) - the HTML of compiled markdown generated by kramdown in Jekyll
 
     Optional Parameters:
       * beforeHeading (bool)   : false  - Set to true if the anchor should be placed _before_ the heading's content
+      * anchorAttrs   (string) :  ''    - Any custom HTML attributes that will be added to the `<a>` tag; you may NOT use `href`, `class` or `title`;
+                                          the `%heading%` and `%html_id%` placeholders are available
       * anchorBody    (string) :  ''    - The content that will be placed inside the anchor; the `%heading%` placeholder is available
       * anchorClass   (string) :  ''    - The class(es) that will be used for each anchor. Separate multiple classes with a space
       * anchorTitle   (string) :  ''    - The `title` attribute that will be used for anchors
@@ -42,17 +68,22 @@
     {% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %}
     {% assign headerLevel = nextChar | times: 1 %}
 
-    <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's try to fix it -->
+    <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's see if we need to fix it -->
     {% if headerLevel == 0 %}
-      {% if nextChar != '<' and nextChar != '' %}
+      <!-- Split up the node based on closing angle brackets and get the first one. -->
+      {% assign firstChunk = node | split: '>' | first %}
+
+      <!-- If the first chunk does NOT contain a '<', that means we've broken another HTML tag that starts with 'h' -->
+      {% unless firstChunk contains '<' %}
         {% capture node %}<h{{ node }}{% endcapture %}
-      {% endif %}
+      {% endunless %}
 
       {% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
       {% continue %}
     {% endif %}
 
-    {% assign _workspace = node | split: '</h' %}
+    {% capture _closingTag %}</h{{ headerLevel }}>{% endcapture %}
+    {% assign _workspace = node | split: _closingTag %}
     {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
     {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
     {% assign html_id = _idWorkspace[0] %}
@@ -64,7 +95,7 @@
     {% capture anchor %}{% endcapture %}
 
     {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
-      {% capture anchor %}href="#{{ html_id}}"{% endcapture %}
+      {% capture anchor %}href="#{{ html_id }}"{% endcapture %}
 
       {% if include.anchorClass %}
         {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
@@ -74,6 +105,10 @@
         {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %}
       {% endif %}
 
+      {% if include.anchorAttrs %}
+        {% capture anchor %}{{ anchor }} {{ include.anchorAttrs | replace: '%heading%', header | replace: '%html_id%', html_id }}{% endcapture %}
+      {% endif %}
+
       {% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', header | default: '' }}</a>{% endcapture %}
 
       <!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it -->
@@ -93,8 +128,17 @@
           {{ header }}{{ anchor }}
         {% endif %}
         {{ include.bodySuffix }}
-      </h{{ _workspace | last }}
+      </h{{ headerLevel }}>
     {% endcapture %}
+
+    <!--
+    If we have content after the `</hX>` tag, then we'll want to append that here so we don't lost any content.
+    -->
+    {% assign chunkCount = _workspace | size %}
+    {% if chunkCount > 1 %}
+      {% capture new_heading %}{{ new_heading }}{{ _workspace | last }}{% endcapture %}
+    {% endif %}
+
     {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
   {% endfor %}
 {% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

_layouts/default.html

@@ -4,99 +4,226 @@ layout: table_wrappers
 
 <!DOCTYPE html>
 
-<html lang="{{ site.lang | default: "en-US" }}">
+<html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
 <body>
+  <a class="skip-to-main" href="#main-content">Skip to main content</a>
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-    <symbol id="link" viewBox="0 0 16 16">
+    <symbol id="svg-link" viewBox="0 0 24 24">
       <title>Link</title>
-      <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+      </svg>
     </symbol>
+    <symbol id="svg-search" viewBox="0 0 24 24">
+      <title>Search</title>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
+        <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    </symbol>
+    <symbol id="svg-menu" viewBox="0 0 24 24">
+      <title>Menu</title>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+        <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
+      </svg>
+    </symbol>
+    <symbol id="svg-arrow-right" viewBox="0 0 24 24">
+      <title>Expand</title>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+    </symbol>
+    <symbol id="svg-doc" viewBox="0 0 24 24">
+      <title>Document</title>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
+        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
+      </svg>
+    </symbol>
+    {% include icons/external_link.html %}
   </svg>
 
-  <div class="page-wrap">
-    <div class="side-bar">
-      <div class="site-header">
-        <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
-        <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
-      </div>
-
-      <div class="navigation main-nav js-main-nav">
-        {% include nav.html %}
-      </div>
-      <footer class="site-footer">
-        <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
-      </footer>
+  <div class="side-bar">
+    <div class="site-header">
+      <a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
+      <a href="#" id="menu-button" class="site-button">
+        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
+      </a>
     </div>
-    <div class="main-content-wrap js-main-content" tabindex="0">
-      <div class="main-content">
-        <div class="page-header js-page-header">
-          {% if site.search_enabled != false %}
-          <div class="search">
-            <div class="search-input-wrap">
-              <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
-              <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><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>
-            </div>
-            <div class="js-search-results search-results-wrap"></div>
-          </div>
-          {% endif %}
-          {% if site.aux_links != nil %}
-            <ul class="list-style-none text-small aux-nav">
-              {% for link in site.aux_links %}
-                <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
-              {% endfor %}
-            </ul>
-          {% endif %}
-        </div>
-        <div class="page">
-          {% unless page.url == "/" %}
-            {% if page.parent %}
-              <nav class="breadcrumb-nav">
-                <ol class="breadcrumb-nav-list">
-                  {% if page.grand_parent %}
-                    <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
-                    <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
-                  {% else %}
-                    <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
-                  {% endif %}
-                  <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
-                </ol>
-              </nav>
-            {% endif %}
-          {% endunless %}
-          <div id="main-content" class="page-content" role="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=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
+    <nav aria-label="Main" id="site-nav" class="site-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 %}
+            {% if collections_size > 1 or pages_top_size > 0 %}
+              {% if collection_value.nav_fold == true %}
+                <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>
+                    {%- endif -%}
+                    <div class="nav-category">{{ collection_value.name }}</div>
+                    {% include nav.html pages=collection key=collection_key %}
+                  </li>
+                </ul>
+              {% else %}
+                <div class="nav-category">{{ collection_value.name }}</div>
+                {% include nav.html pages=collection key=collection_key %}
+              {% endif %}
             {% else %}
-              {{ content }}
+              {% include nav.html pages=collection key=collection_key %}
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    </nav>
+
+    {% capture nav_footer_custom %}
+      {%- include nav_footer_custom.html -%}
+    {% endcapture %}
+    {% if nav_footer_custom != "" %}
+      {{ nav_footer_custom }}
+    {% else %}
+      <footer class="site-footer">
+        This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
+      </footer>
+    {% endif %}
+  </div>
+  <div class="main" id="top">
+    <div id="main-header" class="main-header">
+      {% if site.search_enabled != false %}
+
+        {% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
+
+        <div class="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>
+          </div>
+          <div id="search-results" class="search-results"></div>
+        </div>
+      {% else %}
+        <div></div>
+      {% endif %}
+      {% include header_custom.html %}
+      {% if site.aux_links %}
+        <nav aria-label="Auxiliary" class="aux-nav">
+          <ul class="aux-nav-list">
+            {% for link in site.aux_links %}
+              <li class="aux-nav-list-item">
+                <a href="{{ link.last }}" class="site-button"
+                  {% if site.aux_links_new_tab %}
+                  target="_blank" rel="noopener noreferrer"
+                  {% endif %}
+                >
+                  {{ link.first }}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </nav>
+      {% endif %}
+    </div>
+    <div id="main-content-wrap" class="main-content-wrap">
+      {% unless page.url == "/" %}
+        {% if page.parent %}
+          <nav aria-label="Breadcrumb" class="breadcrumb-nav">
+            <ol class="breadcrumb-nav-list">
+              {% if page.grand_parent %}
+                <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+                <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+              {% else %}
+                <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+              {% endif %}
+              <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
+            </ol>
+          </nav>
+        {% endif %}
+      {% endunless %}
+      <div id="main-content" class="main-content" role="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 %}
+          {{ content }}
+        {% endif %}
+
+        {% if page.has_children == true and page.has_toc != false %}
+          <hr>
+          {% include toc_heading_custom.html %}
+          <ul>
+            {% for child in toc_list %}
+              <li>
+                <a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+
+        {% capture footer_custom %}
+          {%- include footer_custom.html -%}
+        {% endcapture %}
+        {% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link %}
+          <hr>
+          <footer>
+            {% if site.back_to_top %}
+              <p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
             {% endif %}
 
-          {% if page.has_children == true and page.has_toc != false %}
-            <hr>
-            <h2 class="text-delta">Table of contents</h2>
-            {% assign children_list = site.pages | sort:"nav_order" %}
-            <ul>
-              {% for child in children_list %}
-                {% if child.parent == page.title and child.title != page.title %}
-                <li>
-                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
-                </li>
+            {{ footer_custom }}
+
+            {% if site.last_edit_timestamp or site.gh_edit_link %}
+              <div class="d-flex mt-2">
+                {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+                  <p class="text-small text-grey-dk-000 mb-0 mr-2">
+                    Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+                  </p>
                 {% endif %}
-              {% endfor %}
-            </ul>
-          {% endif %}
+                {% if
+                  site.gh_edit_link and
+                  site.gh_edit_link_text and
+                  site.gh_edit_repository and
+                  site.gh_edit_branch and
+                  site.gh_edit_view_mode
+                %}
+                  <p class="text-small text-grey-dk-000 mb-0">
+                    <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}{% if page.collection and site.collections_dir %}/{{ site.collections_dir }}{% endif %}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
+                  </p>
+                {% endif %}
+              </div>
+            {% endif %}
+          </footer>
+        {% endif %}
 
-          {% if site.footer_content != nil %}
-            <hr>
-            <footer role="contentinfo">
-              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
-            </footer>
-          {% endif %}
-
-        </div>
       </div>
     </div>
+
+    {% if site.search_enabled != false %}
+      {% if site.search.button %}
+        <a href="#" id="search-button" class="search-button">
+          <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+        </a>
+      {% endif %}
+
+      <div class="search-overlay"></div>
+    {% endif %}
   </div>
 
+  {% if site.mermaid %}
+  <script>
+    var config = {% include mermaid_config.js %};
+    mermaid.initialize(config);
+    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
+  </script>
+  {% endif %}
 </body>
 </html>

_sass/base.scss

@@ -1,7 +1,5 @@
-//
 // Base element style overrides
-//
-// stylelint-disable selector-no-type, selector-max-type
+// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
 
 * {
   box-sizing: border-box;
@@ -14,6 +12,8 @@
 
 html {
   @include fs-4;
+
+  scroll-behavior: smooth;
 }
 
 body {
@@ -22,27 +22,21 @@ body {
   line-height: $body-line-height;
   color: $body-text-color;
   background-color: $body-background-color;
+  overflow-wrap: break-word;
 }
 
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 ol,
 ul,
+dl,
 pre,
 address,
 blockquote,
-dl,
+table,
 div,
-fieldset,
-form,
 hr,
-noscript,
-table {
+form,
+fieldset,
+noscript .table-wrapper {
   margin-top: 0;
 }
 
@@ -51,15 +45,17 @@ h2,
 h3,
 h4,
 h5,
-h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.8em;
+h6,
+#toctitle {
+  margin-top: 0;
+  margin-bottom: 1em;
   font-weight: 500;
   line-height: $body-heading-line-height;
   color: $body-heading-color;
 }
 
 p {
+  margin-top: 1em;
   margin-bottom: 1em;
 }
 
@@ -69,22 +65,18 @@ a {
 }
 
 a:not([class]) {
-  text-decoration: none;
-  background-image: linear-gradient($border-color 0%, $border-color 100%);
-  background-repeat: repeat-x;
-  background-position: 0 100%;
-  background-size: 1px 1px;
+  text-decoration: underline;
+  text-decoration-color: $border-color;
+  text-underline-offset: 2px;
 
   &:hover {
-    background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
-    background-size: 1px 1px;
-
+    text-decoration-color: rgba($link-color, 0.45);
   }
 }
 
 code {
   font-family: $mono-font-family;
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: $body-line-height;
 }
 
@@ -109,3 +101,14 @@ hr {
   background-color: $border-color;
   border: 0;
 }
+
+// adds a GitHub-style sidebar to blockquotes
+blockquote {
+  margin: 10px 0;
+
+  // resets user-agent stylesheets for blockquotes
+  margin-block-start: 0;
+  margin-inline-start: 0;
+  padding-left: 15px;
+  border-left: 3px solid $border-color;
+}

_sass/buttons.scss

@@ -1,6 +1,4 @@
-//
 // Buttons and things that look like buttons
-//
 // stylelint-disable color-named
 
 .btn {

_sass/code.scss

@@ -1,7 +1,7 @@
-//
 // Code and syntax highlighting
-//
-// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type, scss/comment-no-empty
+
+// {% raw %}
 
 code {
   padding: 0.2em 0.15em;
@@ -11,99 +11,117 @@ code {
   border-radius: $border-radius;
 }
 
-pre.highlight,
-figure.highlight {
-  padding: $sp-3;
-  margin-bottom: 0;
-  -webkit-overflow-scrolling: touch;
-  background-color: $code-background-color;
+// Avoid appearance of dark border around visited code links in Safari
+a:visited code {
+  border-color: $border-color;
+}
 
+// Content structure for highlighted code blocks using fences or Liquid
+//
+// ```[LANG]...```, no kramdown line_numbers:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//
+// ```[LANG]...```, kramdown line_numbers = true:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.rouge-gutter.gl > pre.lineno
+//   | td.rouge-code > pre
+//
+// {% highlight LANG %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//
+// {% highlight LANG linenos %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.gutter.gl > pre.lineno
+//   | td.code > pre
+//
+// ----...---- (AsciiDoc)
+//   div.listingblock > div.content > pre.rouge.highlight
+//
+// fix_linenos removes the outermost pre when it encloses table.rouge-table
+//
+// See docs/index-test.md for some tests.
+//
+// No kramdown line_numbers: fences and Liquid highlighting look the same.
+// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
+
+// ```[LANG]...```
+div.highlighter-rouge,
+div.listingblock > div.content {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  overflow-x: auto;
+  background-color: $code-background-color;
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  div.highlight,
+  pre.highlight,
   code {
     padding: 0;
+    margin: 0;
     border: 0;
   }
 }
 
-.highlighter-rouge {
+// {% highlight LANG %}...{% endhighlight %},
+// {% highlight LANG linenos %}...{% endhighlight %}:
+figure.highlight {
+  padding: $sp-3;
+  margin-top: 0;
   margin-bottom: $sp-3;
-  overflow: hidden;
+  overflow-x: auto;
+  background-color: $code-background-color;
   border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  pre,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
 }
 
-.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 //
+// ```[LANG]...```, kramdown line_numbers = true,
+// {% highlight LANG linenos %}...{% endhighlight %}:
+.highlight .table-wrapper {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+
+  td,
+  pre {
+    @include fs-2;
+
+    min-width: 0;
+    padding: 0;
+    background-color: $code-background-color;
+    border: 0;
+  }
+
+  td.gl {
+    width: 1em;
+    padding-right: $sp-3;
+  }
+
+  pre {
+    margin: 0;
+    line-height: 2;
+  }
+}
 
 //
 // Code examples (rendered)
 //
 
-.code-example {
+.code-example,
+.listingblock > .title {
   padding: $sp-3;
   margin-bottom: $sp-3;
   overflow: auto;
@@ -111,6 +129,8 @@ figure.highlight {
   border-radius: $border-radius;
 
   + .highlighter-rouge,
+  + .sectionbody .listingblock,
+  + .content,
   + figure.highlight {
     position: relative;
     margin-top: -$sp-4;
@@ -121,3 +141,12 @@ figure.highlight {
     border-top-right-radius: 0;
   }
 }
+
+// Mermaid diagram code blocks should be left unstyled.
+code.language-mermaid {
+  padding: 0;
+  background-color: inherit;
+  border: 0;
+}
+
+// {% endraw %}

_sass/color_schemes/dark.scss

@@ -1,17 +1,28 @@
-
 $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;
 $search-result-preview-color: $grey-dk-000;
-
 $link-color: $blue-000;
 $btn-primary-color: $blue-200;
 $base-button-color: $grey-dk-250;
-
-$code-background-color: $grey-dk-250;
 $search-background-color: $grey-dk-250;
 $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;
+
+@import "./vendor/OneDarkJekyll/syntax-one-dark-vivid";
+
+$code-background-color: #31343f;
+
+// @import "./vendor/OneDarkJekyll/syntax-firewatch";
+// $code-background-color: #282c34;
+
+// @import "./vendor/OneDarkJekyll/syntax-firewatch-green";
+// $code-background-color: #282c34;

_sass/color_schemes/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 //

_sass/content.scss

@@ -1,17 +1,24 @@
 @charset "UTF-8";
 
-//
 // Styles for rendered markdown in the .main-content container
-//
-// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id
 
-.page-content {
+.main-content {
   line-height: $content-line-height;
 
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
   a {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   ul,
@@ -19,6 +26,12 @@
     padding-left: 1.5em;
   }
 
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
   ol {
     list-style-type: none;
     counter-reset: step-counter;
@@ -43,7 +56,7 @@
       ol {
         counter-reset: sub-counter;
 
-        li {
+        > li {
           &::before {
             content: counter(sub-counter, lower-alpha);
             counter-increment: sub-counter;
@@ -66,14 +79,7 @@
     }
   }
 
-  .task-list {
-    padding-left: 0;
-  }
-
   .task-list-item {
-    display: flex;
-    align-items: center;
-
     &::before {
       content: "";
     }
@@ -81,6 +87,9 @@
 
   .task-list-item-checkbox {
     margin-right: 0.6em;
+    margin-left: -1.4em;
+
+    // The same margin-left is used above for ul > li::before
   }
 
   hr + * {
@@ -93,7 +102,7 @@
 
   dl {
     display: grid;
-    grid-template-columns: max-content 1fr;
+    grid-template: auto / 10em 1fr;
   }
 
   dt,
@@ -102,6 +111,8 @@
   }
 
   dt {
+    grid-column: 1;
+    font-weight: 500;
     text-align: right;
 
     &::after {
@@ -110,8 +121,42 @@
   }
 
   dd {
+    grid-column: 2;
+    margin-bottom: 0;
     margin-left: 1em;
-    font-weight: 500;
+
+    blockquote,
+    div,
+    dl,
+    dt,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    ol,
+    p,
+    pre,
+    table,
+    ul,
+    .table-wrapper {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  dd,
+  ol,
+  ul {
+    dl:first-child {
+      dt:first-child,
+      dd:nth-child(2) {
+        margin-top: 0;
+      }
+    }
   }
 
   .anchor-heading {
@@ -132,12 +177,13 @@
       display: inline-block;
       width: 100%;
       height: 100%;
-      fill: $link-color;
+      color: $link-color;
       visibility: hidden;
     }
   }
 
   .anchor-heading:hover,
+  .anchor-heading:focus,
   h1:hover > .anchor-heading,
   h2:hover > .anchor-heading,
   h3:hover > .anchor-heading,
@@ -149,12 +195,45 @@
     }
   }
 
+  summary {
+    cursor: pointer;
+  }
+
   h1,
   h2,
   h3,
   h4,
   h5,
-  h6 {
+  h6,
+  #toctitle {
     position: relative;
+    margin-top: 1.5em;
+    margin-bottom: 0.25em;
+
+    + table,
+    + .table-wrapper,
+    + .code-example,
+    + .highlighter-rouge,
+    + .sectionbody .listingblock {
+      margin-top: 1em;
+    }
+
+    + p:not(.label) {
+      margin-top: 0;
+    }
+  }
+
+  > h1:first-child,
+  > h2:first-child,
+  > h3:first-child,
+  > h4:first-child,
+  > h5:first-child,
+  > h6:first-child,
+  > .sect1:first-child > h2,
+  > .sect2:first-child > h3,
+  > .sect3:first-child > h4,
+  > .sect4:first-child > h5,
+  > .sect5:first-child > h6 {
+    margin-top: $sp-2;
   }
 }

_sass/custom/custom.scss

@@ -1,129 +1,4 @@
-////
-//// Typography
-////
-
-//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
-//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
-//$root-font-size: 16px;         // Base font-size for rems
-//$body-line-height: 1.4;
-//$content-line-height: 1.5;
-//$body-heading-line-height: 1.15;
-
-////
-//// Colors
-////
-
-//$white: #fff;
-
-//$grey-dk-000: #959396;
-//$grey-dk-100: #5c5962;
-//$grey-dk-200: #44434d;
-//$grey-dk-250: #302d36;
-//$grey-dk-300: #27262b;
-
-//$grey-lt-000: #f5f6fa;
-//$grey-lt-100: #eeebee;
-//$grey-lt-200: #ecebed;
-//$grey-lt-300: #e6e1e8;
-
-//$purple-000: #7253ed;
-//$purple-100: #5e41d0;
-//$purple-200: #4e26af;
-//$purple-300: #381885;
-
-//$blue-000: #2c84fa;
-//$blue-100: #2869e6;
-//$blue-200: #264caf;
-//$blue-300: #183385;
-
-//$green-000: #41d693;
-//$green-100: #11b584;
-//$green-200: #009c7b;
-//$green-300: #026e57;
-
-//$yellow-000: #ffeb82;
-//$yellow-100: #fadf50;
-//$yellow-200: #f7d12e;
-//$yellow-300: #e7af06;
-
-//$red-000: #f77e7e;
-//$red-100: #f96e65;
-//$red-200: #e94c4c;
-//$red-300: #dd2e2e;
-
-//$body-background-color: $white;
-//$sidebar-color: $grey-lt-000;
-//$search-background-color: $white;
-//$table-background-color: $white;
-//$code-background-color: $grey-lt-000;
-
-//$body-text-color: $grey-dk-100;
-//$body-heading-color: $grey-dk-300;
-//$search-result-preview-color: $grey-dk-000;
-//$nav-child-link-color: $grey-dk-100;
-//$link-color: $purple-000;
-//$btn-primary-color: $purple-100;
-//$base-button-color: #f7f7f7;
-
-////
-//// Spacing
-////
-
-//$spacing-unit: 1rem; // 1rem == 16px
-
-//$spacers: (
-//sp-0: 0,
-//sp-1: $spacing-unit * 0.25,
-//sp-2: $spacing-unit * 0.5,
-//sp-3: $spacing-unit * 0.75,
-//sp-4: $spacing-unit,
-//sp-5: $spacing-unit * 1.5,
-//sp-6: $spacing-unit * 2,
-//sp-7: $spacing-unit * 2.5,
-//sp-8: $spacing-unit * 3,
-//sp-9: $spacing-unit * 3.5,
-//sp-10: $spacing-unit * 4
-//);
-
-//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
-//$sp-2: map-get($spacers, sp-2); // 0.5  rem == 8px
-//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
-//$sp-4: map-get($spacers, sp-4); // 1    rem == 16px
-//$sp-5: map-get($spacers, sp-5); // 1.5  rem == 24px
-//$sp-6: map-get($spacers, sp-6); // 2    rem == 32px
-//$sp-7: map-get($spacers, sp-7); // 2.5  rem == 40px
-//$sp-8: map-get($spacers, sp-8); // 3    rem == 48px
-//$sp-9: map-get($spacers, sp-9); // 4    rem == 48px
-//$sp-10: map-get($spacers, sp-10); // 4.5  rem == 48px
-
-////
-//// Borders
-////
-
-//$border: 1px solid;
-//$border-radius: 4px;
-//$border-color: $grey-lt-100;
-
-////
-//// Grid system
-////
-
-//$gutter-spacing: $sp-6;
-//$gutter-spacing-sm: $sp-4;
-//$nav-width: 264px;
-//$nav-width-md: 248px;
-//$content-width: 800px;
-//$header-height: 60px;
-//$search-results-width: 500px;
-
-////
-//// Media queries in pixels
-////
-
-//$media-queries: (
-//xs: 320px,
-//sm: 500px,
-//md: $content-width,
-//lg: $content-width + $nav-width,
-//xl: 1400px
-//);
+$pink-000: #f77ef1;
+$pink-100: #f967f1;
+$pink-200: #e94ee1;
+$pink-300: #dd2cd4;

_sass/labels.scss

@@ -1,21 +1,21 @@
-//
 // Labels (not the form kind)
-//
 
 .label,
 .label-blue {
   display: inline-block;
   padding-top: 0.16em;
-  padding-right: 0.42em;
+  padding-right: 0.56em;
   padding-bottom: 0.16em;
-  padding-left: 0.42em;
-  margin-right: $sp-1;
-  margin-left: $sp-1;
+  padding-left: 0.56em;
+  margin-right: $sp-2;
+  margin-left: $sp-2;
   color: $white;
   text-transform: uppercase;
   vertical-align: middle;
   background-color: $blue-100;
   @include fs-2;
+
+  border-radius: 12px;
 }
 
 .label-green {

_sass/layout.scss

@@ -1,29 +1,14 @@
-//
 // The basic two column layout
-//
-
-.page-wrap {
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-  }
-}
 
 .side-bar {
-  z-index: 100;
+  z-index: 0;
   display: flex;
   flex-wrap: wrap;
   background-color: $sidebar-color;
 
   @include mq(md) {
     flex-wrap: nowrap;
-    position: absolute;
+    position: fixed;
     width: $nav-width-md;
     height: 100%;
     flex-direction: column;
@@ -37,20 +22,7 @@
   }
 }
 
-.main-content-wrap {
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-}
-
-.main-content {
+.main {
   @include mq(md) {
     position: relative;
     max-width: $content-width;
@@ -58,16 +30,15 @@
   }
 
   @include mq(lg) {
-    margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
+    margin-left: calc(
+      (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}
+    );
   }
 }
 
-.js-main-content:focus {
-  outline: none;
-}
-
-.page {
+.main-content-wrap {
   @include container;
+
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
 
@@ -77,16 +48,14 @@
   }
 }
 
-.page-header {
-  @include container;
+.main-header {
+  z-index: 0;
   display: none;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
   background-color: $sidebar-color;
 
   @include mq(md) {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     height: $header-height;
     background-color: $body-background-color;
     border-bottom: $border $border-color;
@@ -101,10 +70,9 @@
   }
 }
 
-.navigation,
+.site-nav,
 .site-header,
 .site-footer {
-
   width: 100%;
 
   @include mq(lg) {
@@ -112,10 +80,15 @@
   }
 }
 
-.navigation {
-  @include container;
+.site-nav {
+  display: none;
+
+  &.nav-open {
+    display: block;
+  }
 
   @include mq(md) {
+    display: block;
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
@@ -129,7 +102,6 @@
   align-items: center;
 
   @include mq(md) {
-    z-index: 101;
     height: $header-height;
     max-height: $header-height;
     border-bottom: $border $border-color;
@@ -138,6 +110,7 @@
 
 .site-title {
   @include container;
+
   flex-grow: 1;
   display: flex;
   height: 100%;
@@ -164,27 +137,42 @@
   }
 }
 
-.menu-button {
-  appearance: none;
+.site-button {
   display: flex;
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
-  color: $link-color;
-  text-transform: uppercase;
-  background: transparent;
-  border: 0;
+}
 
-  @include mq(md) {
+@include mq(md) {
+  .site-header .site-button {
     display: none;
   }
 }
 
+.site-title:hover {
+  background-image: linear-gradient(
+    -90deg,
+    rgba($feedback-color, 1) 0%,
+    rgba($feedback-color, 0.8) 80%,
+    rgba($feedback-color, 0) 100%
+  );
+}
+
+.site-button:hover {
+  background-image: linear-gradient(
+    -90deg,
+    rgba($feedback-color, 1) 0%,
+    rgba($feedback-color, 0.8) 100%
+  );
+}
+
 // stylelint-disable selector-max-type
 
 body {
   position: relative;
   padding-bottom: $sp-10;
+  overflow-y: scroll;
 
   @include mq(md) {
     position: static;
@@ -196,14 +184,23 @@ body {
 
 .site-footer {
   @include container;
+
   position: absolute;
   bottom: 0;
   left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
+  color: $grey-dk-000;
+  @include fs-2;
 
   @include mq(md) {
     position: static;
     justify-self: end;
   }
 }
+
+.icon {
+  width: $sp-5;
+  height: $sp-5;
+  color: $link-color;
+}

_sass/modules.scss

@@ -0,0 +1,17 @@
+// Import external dependencies
+@import "./vendor/normalize.scss/normalize";
+
+// Modules
+@import "./base";
+@import "./layout";
+@import "./content";
+@import "./navigation";
+@import "./typography";
+@import "./labels";
+@import "./buttons";
+@import "./search";
+@import "./tables";
+@import "./code";
+@import "./utilities/utilities";
+@import "./print";
+@import "./skiptomain";

_sass/navigation.scss

@@ -1,89 +1,214 @@
-//
 // Main nav, breadcrumb, etc...
-//
-.navigation-list {
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
+
+.nav-list {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-}
 
-.navigation-list-child-list {
-  padding-left: $sp-3;
-  list-style: none;
+  .nav-list-item {
+    @include fs-4;
 
-  .navigation-list-link {
-    color: $nav-child-link-color;
-  }
-
-  .navigation-list-item {
     position: relative;
+    margin: 0;
 
-    &::before {
+    @include mq(md) {
+      @include fs-3;
+    }
+
+    .nav-list-link {
+      display: block;
+      min-height: $nav-list-item-height-sm;
+      padding-top: $sp-1;
+      padding-bottom: $sp-1;
+      line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
+      @if $nav-list-expander-right {
+        padding-right: $nav-list-item-height-sm;
+        padding-left: $gutter-spacing-sm;
+      } @else {
+        padding-right: $gutter-spacing-sm;
+        padding-left: $nav-list-item-height-sm;
+      }
+
+      @include mq(md) {
+        min-height: $nav-list-item-height;
+        line-height: #{$nav-list-item-height - 2 * $sp-1};
+        @if $nav-list-expander-right {
+          padding-right: $nav-list-item-height;
+          padding-left: $gutter-spacing;
+        } @else {
+          padding-right: $gutter-spacing;
+          padding-left: $nav-list-item-height;
+        }
+      }
+
+      &.external > svg {
+        width: $sp-4;
+        height: $sp-4;
+        vertical-align: text-bottom;
+      }
+
+      &.active {
+        font-weight: 600;
+        text-decoration: none;
+      }
+
+      &:hover,
+      &.active {
+        background-image: linear-gradient(
+          -90deg,
+          rgba($feedback-color, 1) 0%,
+          rgba($feedback-color, 0.8) 80%,
+          rgba($feedback-color, 0) 100%
+        );
+      }
+    }
+
+    .nav-list-expander {
       position: absolute;
-      margin-top: 0.3em;
-      margin-left: -0.8em;
-      color: rgba($body-text-color, 0.3);
-      content: "- ";
+      @if $nav-list-expander-right {
+        right: 0;
+      }
+
+      width: $nav-list-item-height-sm;
+      height: $nav-list-item-height-sm;
+      padding-top: #{$nav-list-item-height-sm / 4};
+      padding-right: #{$nav-list-item-height-sm / 4};
+      padding-bottom: #{$nav-list-item-height-sm / 4};
+      padding-left: #{$nav-list-item-height-sm / 4};
+      color: $link-color;
+
+      @include mq(md) {
+        width: $nav-list-item-height;
+        height: $nav-list-item-height;
+        padding-top: #{$nav-list-item-height / 4};
+        padding-right: #{$nav-list-item-height / 4};
+        padding-bottom: #{$nav-list-item-height / 4};
+        padding-left: #{$nav-list-item-height / 4};
+      }
+
+      &:hover {
+        background-image: linear-gradient(
+          -90deg,
+          rgba($feedback-color, 1) 0%,
+          rgba($feedback-color, 0.8) 100%
+        );
+      }
+
+      @if $nav-list-expander-right {
+        svg {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    > .nav-list {
+      display: none;
+      padding-left: $sp-3;
+      list-style: none;
+
+      .nav-list-item {
+        position: relative;
+
+        .nav-list-link {
+          color: $nav-child-link-color;
+        }
+
+        .nav-list-expander {
+          color: $nav-child-link-color;
+        }
+      }
     }
 
     &.active {
-      &::before {
-        color: $body-text-color;
+      > .nav-list-expander svg {
+        @if $nav-list-expander-right {
+          transform: rotate(-90deg);
+        } @else {
+          transform: rotate(90deg);
+        }
+      }
+
+      > .nav-list {
+        display: block;
       }
     }
   }
 }
 
-.navigation-list-item {
-  @include fs-4;
-  margin: 0;
+.nav-category {
+  padding-top: $sp-2;
+  padding-right: $gutter-spacing-sm;
+  padding-bottom: $sp-2;
+  padding-left: $gutter-spacing-sm;
+  font-weight: 600;
+  text-align: start;
+  text-transform: uppercase;
+  border-bottom: $border $border-color;
+  @include fs-2;
 
   @include mq(md) {
-    @include fs-3;
-  }
+    padding-right: $gutter-spacing;
+    padding-left: $gutter-spacing;
+    margin-top: $gutter-spacing-sm;
+    text-align: start;
 
-  .navigation-list-child-list {
-    display: none;
-  }
-
-  &.active {
-    .navigation-list-child-list {
-      display: block;
+    &:first-child {
+      margin-top: 0;
     }
   }
 }
 
-.navigation-list-link {
-  display: block;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
+.nav-list.nav-category-list {
+  > .nav-list-item {
+    margin: 0;
 
-  &.active {
-    font-weight: 600;
-    color: $body-heading-color;
-    text-decoration: none;
+    > .nav-list {
+      padding: 0;
+
+      > .nav-list-item {
+        > .nav-list-link {
+          color: $link-color;
+        }
+
+        > .nav-list-expander {
+          color: $link-color;
+        }
+      }
+    }
   }
 }
 
-// Small screen nav
-
-.main-nav {
-  display: none;
-
-  &.nav-open {
-    display: block;
-  }
-  @include mq(md) {
-    display: block;
-  }
-}
+// Aux nav
 
 .aux-nav {
-  align-self: center;
+  height: 100%;
+  overflow-x: auto;
+  @include fs-2;
+
+  .aux-nav-list {
+    display: flex;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .aux-nav-list-item {
+    display: inline-block;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  @include mq(md) {
+    padding-right: $gutter-spacing-sm;
+  }
 }
 
 // Breadcrumb nav
+
 .breadcrumb-nav {
   @include mq(md) {
     margin-top: -$sp-4;

_sass/overrides.scss

@@ -1,3 +0,0 @@
-//
-// Custom overrides from a user.
-//

_sass/print.scss

@@ -0,0 +1,40 @@
+// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type
+
+@media print {
+  .site-footer,
+  .site-button,
+  #edit-this-page,
+  #back-to-top,
+  .site-nav,
+  .main-header {
+    display: none !important;
+  }
+
+  .side-bar {
+    width: 100%;
+    height: auto;
+    border-right: 0 !important;
+  }
+
+  .site-header {
+    border-bottom: 1px solid $border-color;
+  }
+
+  .site-title {
+    font-size: $root-font-size !important;
+    font-weight: 700 !important;
+  }
+
+  .text-small {
+    font-size: 8pt !important;
+  }
+
+  pre.highlight {
+    border: 1px solid $border-color;
+  }
+
+  .main {
+    max-width: none;
+    margin-left: 0;
+  }
+}

_sass/search.scss

@@ -1,94 +1,117 @@
-//
 // Search input and autocomplete
-//
 
 .search {
   position: relative;
-  z-index: 99;
+  z-index: 2;
   flex-grow: 1;
-  height: 100%;
-  margin-bottom: $sp-3;
+  height: $sp-10;
+  padding: $sp-2;
+  transition: padding linear #{$transition-duration / 2};
 
   @include mq(md) {
-    margin-bottom: 0;
+    position: relative !important;
+    width: auto !important;
+    height: 100% !important;
+    padding: 0;
+    transition: none;
   }
 }
 
 .search-input-wrap {
-  display: flex;
-  height: 100%;
-  padding: $sp-2;
-  background-color: $search-background-color;
+  position: relative;
+  z-index: 1;
+  height: $sp-8;
+  overflow: hidden;
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  transition: height linear #{$transition-duration / 2};
 
   @include mq(md) {
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    background-color: $body-background-color;
+    position: absolute;
+    width: 100%;
+    max-width: $search-results-width;
+    height: 100% !important;
     border-radius: 0;
     box-shadow: none;
+    transition: width ease $transition-duration;
   }
 }
 
 .search-input {
-  align-self: center;
+  position: absolute;
   width: 100%;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
+  height: 100%;
+  padding-top: $sp-2;
+  padding-right: $gutter-spacing-sm;
+  padding-bottom: $sp-2;
+  padding-left: #{$gutter-spacing-sm + $sp-5};
+  font-size: 16px;
+  color: $body-text-color;
   background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
-  order: 2;
-  @include fs-4;
+  border-radius: 0;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing-sm;
+    padding-bottom: $gutter-spacing-sm;
+    padding-left: #{$gutter-spacing + $sp-5};
+    font-size: 14px;
+    background-color: $body-background-color;
+    transition: padding-left linear #{$transition-duration / 2};
+  }
 
   &:focus {
     outline: 0;
-    box-shadow: none;
 
-    + .search-icon {
-      fill: $link-color;
+    + .search-label .search-icon {
+      color: $link-color;
     }
   }
+}
+
+.search-label {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  padding-left: $gutter-spacing-sm;
 
   @include mq(md) {
-    background-color: $body-background-color;
-    @include fs-3;
+    padding-left: $gutter-spacing;
+    transition: padding-left linear #{$transition-duration / 2};
+  }
+
+  .search-icon {
+    width: #{$sp-4 * 1.2};
+    height: #{$sp-4 * 1.2};
+    align-self: center;
+    color: $grey-dk-000;
   }
 }
 
-.search-icon {
-  align-self: center;
-  margin-right: $sp-2;
-  fill: $grey-dk-000;
-  order: 1;
-}
-
-.search-results-wrap {
+.search-results {
   position: absolute;
-  z-index: 100;
+  left: 0;
   display: none;
   width: 100%;
-  background: $search-background-color;
-  border-radius: $border-radius;
+  max-height: calc(100% - #{$sp-10});
+  overflow-y: auto;
+  background-color: $search-background-color;
+  border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
 
-  &.active {
-    display: block;
-  }
-
   @include mq(md) {
+    top: 100%;
     width: $search-results-width;
+    max-height: calc(100vh - 200%) !important;
   }
 }
 
 .search-results-list {
   padding-left: 0;
-  margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
   @include fs-4;
@@ -112,31 +135,58 @@
 
   &:hover,
   &.active {
-    background-color: $sidebar-color;
-  }
-
-  @include mq(md) {
-    padding-right: $sp-4;
-    padding-left: $sp-4;
+    background-color: $feedback-color;
   }
 }
 
 .search-result-title {
   display: block;
   padding-top: $sp-2;
-  padding-right: $sp-4;
   padding-bottom: $sp-2;
 
   @include mq(sm) {
     display: inline-block;
     width: 40%;
-    word-wrap: break-word;
+    padding-right: $sp-2;
     vertical-align: top;
   }
 }
 
+.search-result-doc {
+  display: flex;
+  align-items: center;
+  word-wrap: break-word;
+
+  &.search-result-doc-parent {
+    opacity: 0.5;
+    @include fs-3;
+
+    @include mq(md) {
+      @include fs-2;
+    }
+  }
+
+  .search-result-icon {
+    width: $sp-4;
+    height: $sp-4;
+    margin-right: $sp-2;
+    color: $link-color;
+    flex-shrink: 0;
+  }
+
+  .search-result-doc-title {
+    overflow: auto;
+  }
+}
+
+.search-result-section {
+  margin-left: #{$sp-4 + $sp-2};
+  word-wrap: break-word;
+}
+
 .search-result-rel-url {
   display: block;
+  margin-left: #{$sp-4 + $sp-2};
   overflow: hidden;
   color: $search-result-preview-color;
   text-overflow: ellipsis;
@@ -144,12 +194,14 @@
   @include fs-1;
 }
 
-.search-result-preview {
+.search-result-previews {
   display: block;
   padding-top: $sp-2;
   padding-bottom: $sp-2;
   padding-left: $sp-4;
+  margin-left: $sp-2;
   color: $search-result-preview-color;
+  word-wrap: break-word;
   border-left: $border;
   border-left-color: $border-color;
   @include fs-2;
@@ -157,11 +209,114 @@
   @include mq(sm) {
     display: inline-block;
     width: 60%;
+    padding-left: $sp-2;
+    margin-left: 0;
     vertical-align: top;
   }
 }
 
+.search-result-preview + .search-result-preview {
+  margin-top: $sp-1;
+}
+
 .search-result-highlight {
   font-weight: bold;
-  color: $link-color;
+}
+
+.search-no-result {
+  padding-top: $sp-2;
+  padding-right: $sp-3;
+  padding-bottom: $sp-2;
+  padding-left: $sp-3;
+  @include fs-3;
+}
+
+.search-button {
+  position: fixed;
+  right: $sp-4;
+  bottom: $sp-4;
+  display: flex;
+  width: $sp-9;
+  height: $sp-9;
+  background-color: $search-background-color;
+  border: 1px solid rgba($link-color, 0.3);
+  border-radius: #{$sp-9 / 2};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  align-items: center;
+  justify-content: center;
+}
+
+.search-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: opacity ease $transition-duration, width 0s $transition-duration,
+    height 0s $transition-duration;
+}
+
+.search-active {
+  .search {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  .search-input-wrap {
+    height: $sp-10;
+    border-radius: 0;
+
+    @include mq(md) {
+      width: $search-results-width;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .search-input {
+    background-color: $search-background-color;
+
+    @include mq(md) {
+      padding-left: 2.3rem;
+    }
+  }
+
+  .search-label {
+    @include mq(md) {
+      padding-left: 0.6rem;
+    }
+  }
+
+  .search-results {
+    display: block;
+  }
+
+  .search-overlay {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transition: opacity ease $transition-duration, width 0s, height 0s;
+  }
+
+  @include mq(md) {
+    .main {
+      position: fixed;
+      right: 0;
+      left: 0;
+    }
+  }
+
+  .main-header {
+    padding-top: $sp-10;
+
+    @include mq(md) {
+      padding-top: 0;
+    }
+  }
 }

_sass/skiptomain.scss

@@ -0,0 +1,30 @@
+// Skipnav
+// Skip to main content
+
+a.skip-to-main {
+  left: -999px;
+  position: absolute;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: -999;
+}
+
+a.skip-to-main:focus,
+a.skip-to-main:active {
+  color: $link-color;
+  background-color: $body-background-color;
+  left: auto;
+  top: auto;
+  width: 30%;
+  height: auto;
+  overflow: auto;
+  margin: 10px 35%;
+  padding: 5px;
+  border-radius: 15px;
+  border: 4px solid $btn-primary-color;
+  text-align: center;
+  font-size: 1.2em;
+  z-index: 999;
+}

_sass/support/_functions.scss

@@ -1,10 +1,9 @@
-@function rem($size, $unit:"") {
-  $remSize: $size / $root-font-size;
+@function rem($size, $unit: "") {
+  $rem-size: $size / $root-font-size;
 
-  @if ($unit == false) {
-    @return #{$remSize};
-  }
-  @else {
-    @return #{$remSize}rem;
+  @if $unit == false {
+    @return #{$rem-size};
+  } @else {
+    @return #{$rem-size}rem;
   }
 }

_sass/support/_variables.scss

@@ -1,62 +1,67 @@
-//
 // Typography
-//
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
-$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
-$root-font-size: 16px !default;         // Base font-size for rems
+$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
 $body-line-height: 1.4 !default;
-$content-line-height: 1.5 !default;
-$body-heading-line-height: 1.15 !default !default;
+$content-line-height: 1.6 !default;
+$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-sm: 10px !default;
+$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small
+$font-size-3: 12px !default; // h5
+$font-size-4: 14px !default;
+$font-size-5: 16px !default; // h3
+$font-size-6: 18px !default; // h2
+$font-size-7: 24px !default;
+$font-size-8: 32px !default; // h1
+$font-size-9: 36px !default;
+$font-size-10: 42px !default;
+$font-size-10-sm: 48px !default;
 
-//
 // Colors
-//
 
 $white: #fff !default;
-
 $grey-dk-000: #959396 !default;
 $grey-dk-100: #5c5962 !default;
 $grey-dk-200: #44434d !default;
 $grey-dk-250: #302d36 !default;
 $grey-dk-300: #27262b !default;
-
 $grey-lt-000: #f5f6fa !default;
 $grey-lt-100: #eeebee !default;
 $grey-lt-200: #ecebed !default;
 $grey-lt-300: #e6e1e8 !default;
-
 $purple-000: #7253ed !default;
 $purple-100: #5e41d0 !default;
 $purple-200: #4e26af !default;
 $purple-300: #381885 !default;
-
 $blue-000: #2c84fa !default;
 $blue-100: #2869e6 !default;
 $blue-200: #264caf !default;
 $blue-300: #183385 !default;
-
 $green-000: #41d693 !default;
 $green-100: #11b584 !default;
 $green-200: #009c7b !default;
 $green-300: #026e57 !default;
-
 $yellow-000: #ffeb82 !default;
 $yellow-100: #fadf50 !default;
 $yellow-200: #f7d12e !default;
 $yellow-300: #e7af06 !default;
-
 $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;
@@ -65,9 +70,7 @@ $link-color: $purple-000 !default;
 $btn-primary-color: $purple-100 !default;
 $base-button-color: #f7f7f7 !default;
 
-//
 // Spacing
-//
 
 $spacing-unit: 1rem; // 1rem == 16px
 
@@ -82,9 +85,8 @@ $spacers: (
   sp-7: $spacing-unit * 2.5,
   sp-8: $spacing-unit * 3,
   sp-9: $spacing-unit * 3.5,
-  sp-10: $spacing-unit * 4
+  sp-10: $spacing-unit * 4,
 ) !default;
-
 $sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
 $sp-2: map-get($spacers, sp-2) !default; // 0.5  rem == 8px
 $sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
@@ -93,37 +95,35 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
 $sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
 $sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
 $sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
-$sp-9: map-get($spacers, sp-9) !default; // 4    rem == 48px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5  rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5  rem == 56px
+$sp-10: map-get($spacers, sp-10) !default; // 4  rem == 64px
 
-//
 // Borders
-//
 
 $border: 1px solid !default;
 $border-radius: 4px !default;
 $border-color: $grey-lt-100 !default;
 
-//
 // Grid system
-//
 
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !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;
 $header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
 
-//
 // Media queries in pixels
-//
 
 $media-queries: (
   xs: 320px,
   sm: 500px,
   md: $content-width,
   lg: $content-width + $nav-width,
-  xl: 1400px
+  xl: 1400px,
 ) !default;

_sass/support/mixins/_layout.scss

@@ -10,14 +10,12 @@
   $value: map-get($media-queries, $name);
 
   // If the key exists in the map
-  @if $value != null {
+  @if $value {
     // Prints a media query based on the value
     @media (min-width: rem($value)) {
       @content;
     }
-  }
-
-  @else {
+  } @else {
     @warn "No value could be retrieved from `#{$media-query}`. "
       + "Please make sure it is defined in `$media-queries` map.";
   }

_sass/support/mixins/_typography.scss

@@ -1,81 +1,84 @@
-// Font size
-
 @mixin fs-1 {
-  font-size: 9px !important;
+  font-size: $font-size-1 !important;
 
   @include mq(sm) {
-    font-size: 10px !important;
+    font-size: $font-size-1-sm !important;
   }
 }
 
 @mixin fs-2 {
-  font-size: 11px !important;
+  font-size: $font-size-2 !important;
 
   @include mq(sm) {
-    font-size: 12px !important;
+    font-size: $font-size-3 !important;
   }
 }
 
 @mixin fs-3 {
-  font-size: 12px !important;
+  font-size: $font-size-3 !important;
 
   @include mq(sm) {
-    font-size: 14px !important;
+    font-size: $font-size-4 !important;
   }
 }
 
 @mixin fs-4 {
-  font-size: 14px !important;
+  font-size: $font-size-4 !important;
 
   @include mq(sm) {
-    font-size: 16px !important;
+    font-size: $font-size-5 !important;
   }
 }
 
 @mixin fs-5 {
-  font-size: 16px !important;
+  font-size: $font-size-5 !important;
 
   @include mq(sm) {
-    font-size: 18px !important;
+    font-size: $font-size-6 !important;
   }
 }
 
 @mixin fs-6 {
-  font-size: 18px !important;
+  font-size: $font-size-6 !important;
 
   @include mq(sm) {
-    font-size: 24px !important;
+    font-size: $font-size-7 !important;
+    line-height: $body-heading-line-height;
   }
 }
 
 @mixin fs-7 {
-  font-size: 24px !important;
+  font-size: $font-size-7 !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
-    font-size: 32px !important;
+    font-size: $font-size-8 !important;
   }
 }
 
 @mixin fs-8 {
-  font-size: 32px !important;
+  font-size: $font-size-8 !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
-    font-size: 36px !important;
+    font-size: $font-size-9 !important;
   }
 }
 
 @mixin fs-9 {
-  font-size: 36px !important;
+  font-size: $font-size-9 !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
-    font-size: 42px !important;
+    font-size: $font-size-10 !important;
   }
 }
 
 @mixin fs-10 {
-  font-size: 42px !important;
+  font-size: $font-size-10 !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
-    font-size: 48px !important;
+    font-size: $font-size-10-sm !important;
   }
 }

_sass/tables.scss

@@ -1,6 +1,4 @@
-//
 // Tables
-//
 // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
 
 .table-wrapper {
@@ -22,6 +20,7 @@ table {
 th,
 td {
   @include fs-3;
+
   min-width: 120px;
   padding-top: $sp-2;
   padding-right: $sp-3;

_sass/typography.scss

@@ -1,16 +1,17 @@
-//
 // Typography
-//
-// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
+
+// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id
 
 h1,
 .text-alpha {
   @include fs-8;
+
   font-weight: 300;
 }
 
 h2,
-.text-beta {
+.text-beta,
+#toctitle {
   @include fs-6;
 }
 
@@ -22,27 +23,24 @@ h3,
 h4,
 .text-delta {
   @include fs-2;
-  font-weight: 300;
+
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
+h4 code {
+  text-transform: none;
+}
+
 h5,
 .text-epsilon {
   @include fs-3;
-  color: $grey-dk-200;
 }
 
 h6,
 .text-zeta {
   @include fs-2;
-  color: $grey-dk-200;
-}
-
-li {
-  .highlight {
-    margin-top: $sp-2;
-  }
 }
 
 .text-small {
@@ -53,6 +51,14 @@ li {
   font-family: $mono-font-family !important;
 }
 
+.text-left {
+  text-align: left !important;
+}
+
 .text-center {
   text-align: center !important;
 }
+
+.text-right {
+  text-align: right !important;
+}

_sass/utilities/_colors.scss

@@ -1,6 +1,4 @@
-//
 // Utility classes for colors
-//
 
 // Text colors
 

_sass/utilities/_layout.scss

@@ -1,15 +1,26 @@
-// stylelint-disable primer/selector-no-utility, primer/no-override
-//
 // Utility classes for layout
-//
 
 // Display
 
-.d-block { display: block !important; }
-.d-flex { display: flex !important; }
-.d-inline { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-none { display: none !important; }
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-none {
+  display: none !important;
+}
 
 @each $media-query in map-keys($media-queries) {
   @for $i from 1 through length($spacers) {
@@ -18,21 +29,73 @@
       $scale: #{$i - 1};
 
       // .d-sm-block, .d-md-none, .d-lg-inline
-      .d-#{$media-query}-block { display: block !important; }
-      .d-#{$media-query}-flex { display: flex !important; }
-      .d-#{$media-query}-inline { display: inline !important; }
-      .d-#{$media-query}-inline-block { display: inline-block !important; }
-      .d-#{$media-query}-none { display: none !important; }
-
+      .d-#{$media-query}-block {
+        display: block !important;
+      }
+      .d-#{$media-query}-flex {
+        display: flex !important;
+      }
+      .d-#{$media-query}-inline {
+        display: inline !important;
+      }
+      .d-#{$media-query}-inline-block {
+        display: inline-block !important;
+      }
+      .d-#{$media-query}-none {
+        display: none !important;
+      }
     }
   }
 }
 
+// Horizontal alignment
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.flex-justify-start {
+  justify-content: flex-start !important;
+}
+
+.flex-justify-end {
+  justify-content: flex-end !important;
+}
+
+.flex-justify-between {
+  justify-content: space-between !important;
+}
+
+.flex-justify-around {
+  justify-content: space-around !important;
+}
+
 // Vertical alignment
 
-.v-align-baseline { vertical-align: baseline !important; }
-.v-align-bottom { vertical-align: bottom !important; }
-.v-align-middle { vertical-align: middle !important; }
-.v-align-text-bottom { vertical-align: text-bottom !important; }
-.v-align-text-top { vertical-align: text-top !important; }
-.v-align-top { vertical-align: top !important; }
+.v-align-baseline {
+  vertical-align: baseline !important;
+}
+
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+
+.v-align-middle {
+  vertical-align: middle !important;
+}
+
+.v-align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.v-align-text-top {
+  vertical-align: text-top !important;
+}
+
+.v-align-top {
+  vertical-align: top !important;
+}

_sass/utilities/_lists.scss

@@ -1,8 +1,6 @@
-//
 // Utility classes for lists
-//
 
-// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
+// stylelint-disable selector-max-type
 
 .list-style-none {
   padding: 0 !important;

_sass/utilities/_spacing.scss

@@ -1,22 +1,34 @@
-//
 // Utility classes for margins and padding
-//
 
-// scss-lint:disable SpaceAfterPropertyName
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
 
 // Margin spacer utilities
 
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
 @for $i from 1 through length($spacers) {
   $size: #{map-get($spacers, sp-#{$i - 1})};
   $scale: #{$i - 1};
 
   // .m-0, .m-1, .m-2...
-  .m-#{$scale}  { margin: #{$size} !important; }
-  .mt-#{$scale} { margin-top: #{$size} !important; }
-  .mr-#{$scale} { margin-right: #{$size} !important; }
-  .mb-#{$scale} { margin-bottom: #{$size} !important; }
-  .ml-#{$scale} { margin-left: #{$size} !important; }
+  .m-#{$scale} {
+    margin: #{$size} !important;
+  }
+  .mt-#{$scale} {
+    margin-top: #{$size} !important;
+  }
+  .mr-#{$scale} {
+    margin-right: #{$size} !important;
+  }
+  .mb-#{$scale} {
+    margin-bottom: #{$size} !important;
+  }
+  .ml-#{$scale} {
+    margin-left: #{$size} !important;
+  }
 
   .mx-#{$scale} {
     margin-right: #{$size} !important;
@@ -32,11 +44,10 @@
     margin-right: -#{$size} !important;
     margin-left: -#{$size} !important;
   }
-}
-
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
+  .mx-#{$scale}-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
 }
 
 @each $media-query in map-keys($media-queries) {
@@ -46,11 +57,21 @@
       $scale: #{$i - 1};
 
       // .m-sm-0, .m-md-1, .m-lg-2...
-      .m-#{$media-query}-#{$scale}  { margin: #{$size} !important; }
-      .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
-      .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
-      .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
-      .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
+      .m-#{$media-query}-#{$scale} {
+        margin: #{$size} !important;
+      }
+      .mt-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+      }
+      .mr-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+      }
+      .mb-#{$media-query}-#{$scale} {
+        margin-bottom: #{$size} !important;
+      }
+      .ml-#{$media-query}-#{$scale} {
+        margin-left: #{$size} !important;
+      }
 
       .mx-#{$media-query}-#{$scale} {
         margin-right: #{$size} !important;
@@ -77,11 +98,21 @@
   $scale: #{$i - 1};
 
   // .p-0, .p-1, .p-2...
-  .p-#{$scale}  { padding: #{$size} !important; }
-  .pt-#{$scale} { padding-top: #{$size} !important; }
-  .pr-#{$scale} { padding-right: #{$size} !important; }
-  .pb-#{$scale} { padding-bottom: #{$size} !important; }
-  .pl-#{$scale} { padding-left: #{$size} !important; }
+  .p-#{$scale} {
+    padding: #{$size} !important;
+  }
+  .pt-#{$scale} {
+    padding-top: #{$size} !important;
+  }
+  .pr-#{$scale} {
+    padding-right: #{$size} !important;
+  }
+  .pb-#{$scale} {
+    padding-bottom: #{$size} !important;
+  }
+  .pl-#{$scale} {
+    padding-left: #{$size} !important;
+  }
 
   .px-#{$scale} {
     padding-right: #{$size} !important;
@@ -101,11 +132,21 @@
       $scale: #{$i - 1};
 
       // .p-sm-0, .p-md-1, .p-lg-2...
-      .p-#{$media-query}-#{$scale}  { padding: #{$size} !important; }
-      .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
-      .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
-      .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
-      .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
+      .p-#{$media-query}-#{$scale} {
+        padding: #{$size} !important;
+      }
+      .pt-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+      }
+      .pr-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+      }
+      .pb-#{$media-query}-#{$scale} {
+        padding-bottom: #{$size} !important;
+      }
+      .pl-#{$media-query}-#{$scale} {
+        padding-left: #{$size} !important;
+      }
 
       .px-#{$media-query}-#{$scale} {
         padding-right: #{$size} !important;

_sass/utilities/_typography.scss

@@ -1,8 +1,4 @@
-//
 // Utility classes for typography
-//
-
-// stylelint-disable primer/selector-no-utility, primer/no-override
 
 .fs-1 {
   @include fs-1;
@@ -87,5 +83,3 @@
 .text-uppercase {
   text-transform: uppercase !important;
 }
-
-// stylelint-enable primer/selector-no-utility

_sass/vendor/OneDarkJekyll/LICENSE

@@ -0,0 +1,21 @@
+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.

_sass/vendor/OneDarkJekyll/README.md

@@ -0,0 +1,25 @@
+# OneDarkJekyll
+
+*Use Atom's One Dark syntax colors in your Jekyll powered blog!*
+
+It's LESS file which can be compiled to a - Pygments, Rouge compatible - stylesheet from Atom editor's One Dark syntax theme (and any theme based on it, for example One Dark Vivid, Firewatch, etc.).
+
+Download the stylesheet files or compile a new one from any Atom syntax theme which based on One Dark (the variable names in `colors.less` must match with One Dark's)
+
+## Create a new syntax stylesheet
+
+1. `npm install -g less less-plugin-clean-css`
+2. Clone this repository
+3. Download the `colors.css` file from the syntax theme's repository (for example https://github.com/atom/one-dark-syntax/blob/master/styles/colors.less in case of One-Dark)
+4. Put the previously downloaded file next to `syntax.less`
+5. Run `lessc syntax.less syntax.css --clean-css`
+6. Use the `syntax.css`
+
+It's not final and in case you find any error/improvement feel free to create a PR. :)
+
+----
+
+# UPDATES FOR USE IN JUST-THE-DOCS:
+
+1. Layout added in `*.css`
+2. Renamed `*.css` to `*.scss`

_sass/vendor/OneDarkJekyll/colors.less

@@ -0,0 +1,30 @@
+// Config -----------------------------------
+@syntax-hue:          220;
+@syntax-saturation:   13%;
+@syntax-brightness:   18%;
+
+
+// Monochrome -----------------------------------
+@mono-1: hsl(@syntax-hue, 14%, 71%); // default text
+@mono-2: hsl(@syntax-hue,  9%, 55%);
+@mono-3: hsl(@syntax-hue, 10%, 40%);
+
+// Colors -----------------------------------
+@hue-1:   hsl(187, 47%, 55%); // <-cyan
+@hue-2:   hsl(207, 82%, 66%); // <-blue
+@hue-3:   hsl(286, 60%, 67%); // <-purple
+@hue-4:   hsl( 95, 38%, 62%); // <-green
+
+@hue-5:   hsl(355, 65%, 65%); // <-red 1
+@hue-5-2: hsl(  5, 48%, 51%); // <-red 2
+
+@hue-6:   hsl( 29, 54%, 61%); // <-orange 1
+@hue-6-2: hsl( 39, 67%, 69%); // <-orange 2
+
+
+// Base colors -----------------------------------
+@syntax-fg:     @mono-1;
+@syntax-bg:     hsl(@syntax-hue, @syntax-saturation, @syntax-brightness);
+@syntax-gutter: darken(@syntax-fg, 26%);
+@syntax-guide:  fade(@syntax-fg, 15%);
+@syntax-accent: hsl(@syntax-hue, 100%, 66% );

_sass/vendor/OneDarkJekyll/syntax-firewatch-green.scss

@@ -0,0 +1,200 @@
+.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: #5ba473;
+}
+.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: #5ba473;
+}
+.highlight .kd {
+  color: #5ba473;
+}
+.highlight .kn {
+  color: #5ba473;
+}
+.highlight .kp {
+  color: #5ba473;
+}
+.highlight .kr {
+  color: #5ba473;
+}
+.highlight .kt {
+  color: #5ba473;
+}
+.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: #77b181;
+}
+.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: #77b181;
+}
+.highlight .il {
+  color: #d19a66;
+}
+.highlight .gu {
+  color: #75715e;
+}
+.highlight .gd {
+  color: #f92672;
+}
+.highlight .gi {
+  color: #a6e22e;
+}

_sass/vendor/OneDarkJekyll/syntax-firewatch.scss

@@ -0,0 +1,200 @@
+.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;
+}

_sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss

@@ -0,0 +1,200 @@
+.highlight,
+pre.highlight {
+  background: #31343f;
+  color: #dee2f7;
+}
+.highlight pre {
+  background: #31343f;
+}
+.highlight .hll {
+  background: #31343f;
+}
+.highlight .c {
+  color: #63677e;
+  font-style: italic;
+}
+.highlight .err {
+  color: #960050;
+  background-color: #1e0010;
+}
+.highlight .k {
+  color: #e19ef5;
+}
+.highlight .l {
+  color: #a3eea0;
+}
+.highlight .n {
+  color: #dee2f7;
+}
+.highlight .o {
+  color: #dee2f7;
+}
+.highlight .p {
+  color: #dee2f7;
+}
+.highlight .cm {
+  color: #63677e;
+  font-style: italic;
+}
+.highlight .cp {
+  color: #63677e;
+  font-style: italic;
+}
+.highlight .c1 {
+  color: #63677e;
+  font-style: italic;
+}
+.highlight .cs {
+  color: #63677e;
+  font-style: italic;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gs {
+  font-weight: 700;
+}
+.highlight .kc {
+  color: #e19ef5;
+}
+.highlight .kd {
+  color: #e19ef5;
+}
+.highlight .kn {
+  color: #e19ef5;
+}
+.highlight .kp {
+  color: #e19ef5;
+}
+.highlight .kr {
+  color: #e19ef5;
+}
+.highlight .kt {
+  color: #e19ef5;
+}
+.highlight .ld {
+  color: #a3eea0;
+}
+.highlight .m {
+  color: #eddc96;
+}
+.highlight .s {
+  color: #a3eea0;
+}
+.highlight .na {
+  color: #eddc96;
+}
+.highlight .nb {
+  color: #fdce68;
+}
+.highlight .nc {
+  color: #fdce68;
+}
+.highlight .no {
+  color: #fdce68;
+}
+.highlight .nd {
+  color: #fdce68;
+}
+.highlight .ni {
+  color: #fdce68;
+}
+.highlight .ne {
+  color: #fdce68;
+}
+.highlight .nf {
+  color: #dee2f7;
+}
+.highlight .nl {
+  color: #fdce68;
+}
+.highlight .nn {
+  color: #dee2f7;
+}
+.highlight .nx {
+  color: #dee2f7;
+}
+.highlight .py {
+  color: #fdce68;
+}
+.highlight .nt {
+  color: #f9867b;
+}
+.highlight .nv {
+  color: #fdce68;
+}
+.highlight .ow {
+  font-weight: 700;
+}
+.highlight .w {
+  color: #f8f8f2;
+}
+.highlight .mf {
+  color: #eddc96;
+}
+.highlight .mh {
+  color: #eddc96;
+}
+.highlight .mi {
+  color: #eddc96;
+}
+.highlight .mo {
+  color: #eddc96;
+}
+.highlight .sb {
+  color: #a3eea0;
+}
+.highlight .sc {
+  color: #a3eea0;
+}
+.highlight .sd {
+  color: #a3eea0;
+}
+.highlight .s2 {
+  color: #a3eea0;
+}
+.highlight .se {
+  color: #a3eea0;
+}
+.highlight .sh {
+  color: #a3eea0;
+}
+.highlight .si {
+  color: #a3eea0;
+}
+.highlight .sx {
+  color: #a3eea0;
+}
+.highlight .sr {
+  color: #7be2f9;
+}
+.highlight .s1 {
+  color: #a3eea0;
+}
+.highlight .ss {
+  color: #7be2f9;
+}
+.highlight .bp {
+  color: #fdce68;
+}
+.highlight .vc {
+  color: #fdce68;
+}
+.highlight .vg {
+  color: #fdce68;
+}
+.highlight .vi {
+  color: #f9867b;
+}
+.highlight .il {
+  color: #eddc96;
+}
+.highlight .gu {
+  color: #75715e;
+}
+.highlight .gd {
+  color: #f92672;
+}
+.highlight .gi {
+  color: #a6e22e;
+}

_sass/vendor/OneDarkJekyll/syntax-one-dark.scss

@@ -0,0 +1,200 @@
+.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;
+}

_sass/vendor/OneDarkJekyll/syntax-variables.less

@@ -0,0 +1,56 @@
+@import "colors.less";
+
+// Official Syntax Variables -----------------------------------
+
+// General colors
+@syntax-text-color:            @syntax-fg;
+@syntax-cursor-color:          @syntax-accent;
+@syntax-selection-color:       lighten(@syntax-background-color, 10%);
+@syntax-selection-flash-color: @syntax-accent;
+@syntax-background-color:      @syntax-bg;
+
+// Guide colors
+@syntax-wrap-guide-color:          @syntax-guide;
+@syntax-indent-guide-color:        @syntax-guide;
+@syntax-invisible-character-color: @syntax-guide;
+
+// For find and replace markers
+@syntax-result-marker-color:          fade(@syntax-accent, 24%);
+@syntax-result-marker-color-selected: @syntax-accent;
+
+// Gutter colors
+@syntax-gutter-text-color:                @syntax-gutter;
+@syntax-gutter-text-color-selected:       @syntax-fg;
+@syntax-gutter-background-color:          @syntax-bg; // unused
+@syntax-gutter-background-color-selected: lighten(@syntax-bg, 2%);
+
+// Git colors - For git diff info. i.e. in the gutter
+@syntax-color-renamed:  hsl(208, 100%, 60%);
+@syntax-color-added:    hsl(150,  60%, 54%);
+@syntax-color-modified: hsl(40,   60%, 70%);
+@syntax-color-removed:  hsl(0,    70%, 60%);
+
+// For language entity colors
+@syntax-color-variable:   @hue-5;
+@syntax-color-constant:   @hue-6;
+@syntax-color-property:   @syntax-fg;
+@syntax-color-value:      @syntax-fg;
+@syntax-color-function:   @hue-2;
+@syntax-color-method:     @hue-2;
+@syntax-color-class:      @hue-6-2;
+@syntax-color-keyword:    @hue-3;
+@syntax-color-tag:        @hue-5;
+@syntax-color-attribute:  @hue-6;
+@syntax-color-import:     @hue-3;
+@syntax-color-snippet:    @hue-4;
+
+
+// Custom Syntax Variables -----------------------------------
+// Don't use in packages
+
+@syntax-cursor-line: hsla(@syntax-hue, 100%,  80%, .04); // needs to be semi-transparent to show search results
+
+@syntax-deprecated-fg: darken(@syntax-color-modified, 50%);
+@syntax-deprecated-bg: @syntax-color-modified;
+@syntax-illegal-fg:    white;
+@syntax-illegal-bg:    @syntax-color-removed;

_sass/vendor/OneDarkJekyll/syntax.less

@@ -0,0 +1,93 @@
+/*
+  LESS for Pygments
+*/
+
+@import "syntax-variables.less";
+
+pre.highlight,
+.highlight {
+  background: @syntax-bg;
+	color: @mono-1;
+}
+.highlight {
+ pre { background: @syntax-bg; }
+ .hll { background: @syntax-bg; }
+ .c {  color: @mono-3; font-style: italic;  } /* Comment */
+ .err { color: @syntax-illegal-fg; background-color: @syntax-illegal-bg; } /* Error */
+ .k { color: @hue-3;  } /* Keyword */
+ .l { color: @hue-4; } /* Literal */
+ .n { color: @mono-1; } /* Name */
+ .o { color: @mono-1; } /* Operator */
+ .p { color: @mono-1; } /* Punctuation */
+ .cm { color: @mono-3; font-style: italic; } /* Comment.Multiline */
+ .cp { color: @mono-3; font-style: italic; } /* Comment.Preproc */
+ .c1 { color: @mono-3; font-style: italic; } /* Comment.Single */
+ .cs { color: @mono-3; font-style: italic; } /* Comment.Special */
+ .ge { font-style: italic } /* Generic.Emph */
+ .gs { font-weight: bold } /* Generic.Strong */
+ .kc { color: @hue-3;  } /* Keyword.Constant */
+ .kd { color: @hue-3;  } /* Keyword.Declaration */
+ .kn { color: @hue-3;  } /* Keyword.Namespace */
+ .kp { color: @hue-3;  } /* Keyword.Pseudo */
+ .kr { color: @hue-3;  } /* Keyword.Reserved */
+ .kt { color: @hue-3;  } /* Keyword.Type */
+ .ld { color: @hue-4; } /* Literal.Date */
+ .m { color: @hue-6; } /* Literal.Number */
+ .s { color: @hue-4; } /* Literal.String */
+ .na { color: @hue-6; } /* Name.Attribute */
+ .nb { color: @hue-6-2; } /* Name.Builtin */
+ .nc { color: @hue-6-2; } /* Name.Class */
+ .no { color: @hue-6-2; } /* Name.Constant */
+ .nd { color: @hue-6-2; } /* Name.Decorator */
+ .ni { color: @hue-6-2; } /* Name.Entity */
+ .ne { color: @hue-6-2; } /* Name.Exception */
+ .nf { color: @mono-1; } /* Name.Function */
+ .nl { color: @hue-6-2; } /* Name.Label */
+ .nn { color: @mono-1; } /* Name.Namespace */
+ .nx { color: @mono-1; } /* Name.Other */
+ .py { color: @hue-6-2; } /* Name.Property */
+ .nt { color: @hue-5; } /* Name.Tag */
+ .nv { color: @hue-6-2; } /* Name.Variable */
+ .ow { font-weight: bold; } /* Operator.Word */
+ .w { color: #f8f8f2 } /* Text.Whitespace */
+ .mf { color: @hue-6; } /* Literal.Number.Float */
+ .mh { color: @hue-6; } /* Literal.Number.Hex */
+ .mi { color: @hue-6; } /* Literal.Number.Integer */
+ .mo { color: @hue-6; } /* Literal.Number.Oct */
+ .sb { color: @hue-4; } /* Literal.String.Backtick */
+ .sc { color: @hue-4; } /* Literal.String.Char */
+ .sd { color: @hue-4; } /* Literal.String.Doc */
+ .s2 { color: @hue-4; } /* Literal.String.Double */
+ .se { color: @hue-4; } /* Literal.String.Escape */
+ .sh { color: @hue-4; } /* Literal.String.Heredoc */
+ .si { color: @hue-4; } /* Literal.String.Interpol */
+ .sx { color: @hue-4; } /* Literal.String.Other */
+ .sr { color: @hue-1; } /* Literal.String.Regex */
+ .s1 { color: @hue-4; } /* Literal.String.Single */
+ .ss { color: @hue-1; } /* Literal.String.Symbol */
+ .bp { color: @hue-6-2; } /* Name.Builtin.Pseudo */
+ .vc { color: @hue-6-2; } /* Name.Variable.Class */
+ .vg { color: @hue-6-2; } /* Name.Variable.Global */
+ .vi { color: @hue-5; } /* Name.Variable.Instance */
+ .il { color: @hue-6; } /* Literal.Number.Integer.Long */
+
+ .gh { } /* Generic Heading & Diff Header */
+ .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+ .gd { color: @syntax-color-removed; } /* Generic.Deleted & Diff Deleted */
+ .gi { color: @syntax-color-added; } /* Generic.Inserted & Diff Inserted */
+	
+ ::selection { background-color: @syntax-selection-color; }
+
+ .language-json {
+   .w + .s2 { color: @hue-5; }
+   .kc { color: @hue-1; }
+ }
+
+ .language-python {
+   // python related modifications
+ }
+
+ .language-csharp {
+   // csharp related modifications
+ }
+}

_sass/vendor/normalize.scss/README.md

@@ -1,78 +1,7 @@
-# normalize.scss v0.1.0
+# normalize.scss
 
-Normalize.scss is the SCSS version of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
+Normalize.scss is an SCSS copy of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
+
+The [normalize.scss fork](https://github.com/guerrero/normalize.scss) of [normalize.css](http://necolas.github.io/normalize.css) was archived in 2014, and has not been updated since v0.1.0.
 
 [View the normalize.css test file](http://necolas.github.io/normalize.css/latest/test.html)
-
-## Install
-
-* [npm](http://npmjs.org/): `npm install --save normalize.scss`
-* [Component(1)](https://github.com/component/component/): `component install guerrero/normalize.scss`
-* [Bower](http://bower.io/): `bower install --save normalize.scss`
-* Download: Go to [this link](https://raw.githubusercontent.com/guerrero/normalize.scss/master/normalize.scss), press right-click on the page and choose "Save as..."
-
-No other styles should come before Normalize.scss.
-
-It's recommendable to modify `normalize.scss` to suit it to your project
-
-## What does it do?
-
-* Preserves useful defaults, unlike many CSS resets.
-* Normalizes styles for a wide range of elements.
-* Corrects bugs and common browser inconsistencies.
-* Improves usability with subtle improvements.
-* Explains what code does using detailed comments.
-
-## Browser support
-
-* Google Chrome (latest)
-* Mozilla Firefox (latest)
-* Mozilla Firefox 4
-* Opera (latest)
-* Apple Safari 6+
-* Internet Explorer 8+
-
-[Normalize.css v1 provides legacy browser
-support](https://github.com/necolas/normalize.css/tree/v1) (IE 6+, Safari 4+),
-but is no longer actively developed.
-
-## Extended details
-
-Additional detail and explanation of the esoteric parts of normalize.css.
-
-#### `pre, code, kbd, samp`
-
-The `font-family: monospace, monospace` hack fixes the inheritance and scaling
-of font-size for preformated text. The duplication of `monospace` is
-intentional.  [Source](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59).
-
-#### `sub, sup`
-
-Normally, using `sub` or `sup` affects the line-box height of text in all
-browsers. [Source](http://gist.github.com/413930).
-
-#### `svg:not(:root)`
-
-Adding `overflow: hidden` fixes IE9's SVG rendering. Earlier versions of IE
-don't support SVG, so we can safely use the `:not()` and `:root` selectors that
-modern browsers use in the default UA stylesheets to apply this style. [SVG
-Mailing List discussion](http://lists.w3.org/Archives/Public/public-svg-wg/2008JulSep/0339.html)
-
-#### `input[type="search"]`
-
-The search input is not fully stylable by default. In Chrome and Safari on
-OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
-Chrome and Safari on Windows you can't control `border` properly. It will apply
-`border-width` but will only show a border color (which cannot be controlled)
-for the outer 1px of that border. Applying `-webkit-appearance: textfield`
-addresses these issues without removing the benefits of search inputs (e.g.
-showing past searches).
-
-#### `legend`
-
-Adding `border: 0` corrects an IE 8–11 bug where `color` (yes, `color`) is not
-inherited by `legend`.
-
-## Acknowledgements
-
-Normalize.scss is a project by [Alex Guerrero](https://github.com/guerrero) based on [normalize.css](http://necolas.github.io/normalize.css) from [Nicolas Gallagher](https://github.com/necolas), co-created with [Jonathan Neal](https://github.com/jonathantneal).

_sass/vendor/normalize.scss/normalize.scss

@@ -1,135 +1,40 @@
-/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
 
 /**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
+  line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
+/* Sections
+   ========================================================================== */
+
 /**
- * Remove default margin.
+ * Remove the margin in all browsers.
  */
 
 body {
   margin: 0;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
-
 /**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
+ * Render the `main` element consistently in IE.
  */
 
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
+main {
   display: block;
 }
 
 /**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
  */
 
 h1 {
@@ -137,17 +42,75 @@ h1 {
   margin: 0.67em 0;
 }
 
+/* Grouping content
+   ========================================================================== */
+
 /**
- * Address styling not present in IE 8/9.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
  */
 
-mark {
-  background: #ff0;
-  color: #000;
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
- * Address inconsistent and variable font size in all browsers.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
  */
 
 small {
@@ -155,7 +118,8 @@ small {
 }
 
 /**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
  */
 
 sub,
@@ -166,87 +130,31 @@ sup {
   vertical-align: baseline;
 }
 
-sup {
-  top: -0.5em;
-}
-
 sub {
   bottom: -0.25em;
 }
 
+sup {
+  top: -0.5em;
+}
+
 /* Embedded content
    ========================================================================== */
 
 /**
- * Remove border when inside `a` element in IE 8/9/10.
+ * Remove the border on images inside links in IE 10.
  */
 
 img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
+  border-style: none;
 }
 
 /* Forms
    ========================================================================== */
 
 /**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
  */
 
 button,
@@ -254,146 +162,102 @@ input,
 optgroup,
 select,
 textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
  */
 
-button {
+button,
+input {
+  /* 1 */
   overflow: visible;
 }
 
 /**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
  */
 
 button,
 select {
+  /* 1 */
   text-transform: none;
 }
 
 /**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
+ * Correct the inability to style clickable types in iOS and Safari.
  */
 
 button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
 }
 
 /**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
+ * Remove the inner border and padding in Firefox.
  */
 
 button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
   padding: 0;
 }
 
 /**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
+ * Restore the focus styles unset by the previous rule.
  */
 
-input {
-  line-height: normal;
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }
 
 /**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
+ * Correct the padding in Firefox.
  */
 
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
  */
 
 legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
 /**
- * Remove default vertical scrollbar in IE 8/9/10/11.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
  */
 
 textarea {
@@ -401,27 +265,87 @@ textarea {
 }
 
 /**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
  */
 
-optgroup {
-  font-weight: bold;
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
-/* Tables
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
    ========================================================================== */
 
 /**
- * Remove most spacing between table cells.
+ * Add the correct display in IE 10+.
  */
 
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+template {
+  display: none;
 }
 
-td,
-th {
-  padding: 0;
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
 }

_sass/vendor/normalize.scss/package.json

@@ -1,70 +0,0 @@
-{
-  "_args": [
-    [
-      "normalize.scss",
-      "/Users/pmarsceill/_projects/just-the-docs"
-    ]
-  ],
-  "_from": "normalize.scss@*",
-  "_id": "normalize.scss@0.1.0",
-  "_inCache": true,
-  "_installable": true,
-  "_location": "/normalize.scss",
-  "_nodeVersion": "0.10.32",
-  "_npmUser": {
-    "email": "alexguerrero1092@gmail.com",
-    "name": "alexguerrero"
-  },
-  "_npmVersion": "2.0.2",
-  "_phantomChildren": {},
-  "_requested": {
-    "name": "normalize.scss",
-    "raw": "normalize.scss",
-    "rawSpec": "",
-    "scope": null,
-    "spec": "*",
-    "type": "range"
-  },
-  "_requiredBy": [
-    "#DEV:/"
-  ],
-  "_resolved": "https://registry.npmjs.org/normalize.scss/-/normalize.scss-0.1.0.tgz",
-  "_shasum": "4a21dc25bd4c019c857785f829b658aba2a8f9ab",
-  "_shrinkwrap": null,
-  "_spec": "normalize.scss",
-  "_where": "/Users/pmarsceill/_projects/just-the-docs",
-  "author": "",
-  "bugs": {
-    "url": "https://github.com/guerrero/normalize.scss/issues"
-  },
-  "dependencies": {},
-  "description": "Normalize.scss as a node packaged module",
-  "devDependencies": {},
-  "directories": {},
-  "dist": {
-    "shasum": "4a21dc25bd4c019c857785f829b658aba2a8f9ab",
-    "tarball": "https://registry.npmjs.org/normalize.scss/-/normalize.scss-0.1.0.tgz"
-  },
-  "files": [
-    "normalize.scss"
-  ],
-  "gitHead": "d67d517e28615a873066438af1d4845c157c9baf",
-  "homepage": "https://github.com/guerrero/normalize.scss",
-  "license": "MIT",
-  "maintainers": [
-    {
-      "name": "alexguerrero",
-      "email": "alexguerrero1092@gmail.com"
-    }
-  ],
-  "name": "normalize.scss",
-  "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/guerrero/normalize.scss.git"
-  },
-  "scripts": {},
-  "style": "normalize.scss",
-  "version": "0.1.0"
-}

assets/css/dark-mode-preview.scss

@@ -1,45 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-{% if site.logo %}
-$logo: "{{ site.logo | absolute_url }}";
-{% endif %}
-
-//
-// Import external dependencies
-//
-
-@import "./vendor/normalize.scss/normalize.scss";
-
-//
-// Import Just the Docs scss
-//
-
-// Support
-@import "./support/support";
-
-//
-// Import custom color scheme scss
-//
-
-@import "./color_schemes/dark.scss";
-
-// Modules
-@import "./base";
-@import "./layout";
-@import "./content";
-@import "./navigation";
-@import "./typography";
-@import "./labels";
-@import "./buttons";
-@import "./search";
-@import "./tables";
-@import "./code";
-@import "./utilities/utilities";
-
-//
-// Import custom overrides
-//
-@import "./custom/custom";

assets/css/just-the-docs-dark.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="dark" %}

assets/css/just-the-docs-default.scss

@@ -0,0 +1,8 @@
+---
+---
+{% if site.color_scheme and site.color_scheme != "nil" %}
+  {% assign color_scheme = site.color_scheme %}
+{% else %}
+  {% assign color_scheme = "light" %}
+{% endif %}
+{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}

assets/css/just-the-docs-light.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="light" %}

assets/css/just-the-docs.scss

@@ -1,49 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-{% if site.logo %}
-$logo: "{{ site.logo | absolute_url }}";
-{% endif %}
-
-//
-// Import external dependencies
-//
-
-@import "./vendor/normalize.scss/normalize.scss";
-
-//
-// Import Just the Docs scss
-//
-
-// Support
-@import "./support/support";
-
-//
-// Import custom overrides
-//
-
-@import "./custom/custom";
-
-//
-// Import custom color scheme scss
-//
-
-{% if site.color_scheme == "dark" %}
-@import "./color_schemes/dark.scss";
-{% endif %}
-
-// Modules
-@import "./base";
-@import "./layout";
-@import "./content";
-@import "./navigation";
-@import "./typography";
-@import "./labels";
-@import "./buttons";
-@import "./search";
-@import "./tables";
-@import "./code";
-@import "./utilities/utilities";
-@import "./overrides";

assets/js/dark-mode-preview.js

@@ -1,23 +0,0 @@
-document.addEventListener("DOMContentLoaded", function(){
-
-  const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
-  const cssFile = document.querySelector('[rel="stylesheet"]')
-  const originalCssRef = cssFile.getAttribute('href')
-  const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
-  const buttonCopy = ['Return to the light side', 'Preview dark color scheme']
-  const updateButtonText = function(toggleDarkMode) {
-    toggleDarkMode.textContent === buttonCopy[0] ?
-      toggleDarkMode.textContent = buttonCopy[1] :
-      toggleDarkMode.textContent = buttonCopy[0]
-  }
-
-  jtd.addEvent(toggleDarkMode, 'click', function(){
-    if (cssFile.getAttribute('href') === originalCssRef) {
-      cssFile.setAttribute('href', darkModeCssRef)
-      updateButtonText(toggleDarkMode)
-    } else {
-      cssFile.setAttribute('href', originalCssRef)
-      updateButtonText(toggleDarkMode)
-    }
-  })
-})

assets/js/just-the-docs.js

@@ -24,274 +24,459 @@ jtd.onReady = function(ready) {
 // Show/hide mobile menu
 
 function initNav() {
-  const mainNav = document.querySelector('.js-main-nav');
-  const pageHeader = document.querySelector('.js-page-header');
-  const navTrigger = document.querySelector('.js-main-nav-trigger');
+  jtd.addEvent(document, 'click', function(e){
+    var target = e.target;
+    while (target && !(target.classList && target.classList.contains('nav-list-expander'))) {
+      target = target.parentNode;
+    }
+    if (target) {
+      e.preventDefault();
+      target.parentNode.classList.toggle('active');
+    }
+  });
 
-  jtd.addEvent(navTrigger, 'click', function(e){
+  const siteNav = document.getElementById('site-nav');
+  const mainHeader = document.getElementById('main-header');
+  const menuButton = document.getElementById('menu-button');
+
+  jtd.addEvent(menuButton, 'click', function(e){
     e.preventDefault();
-    var text = navTrigger.innerText;
-    var textToggle = navTrigger.getAttribute('data-text-toggle');
 
-    mainNav.classList.toggle('nav-open');
-    pageHeader.classList.toggle('nav-open');
-    navTrigger.classList.toggle('nav-open');
-    navTrigger.innerText = textToggle;
-    navTrigger.setAttribute('data-text-toggle', text);
-    textToggle = text;
-  })
+    if (menuButton.classList.toggle('nav-open')) {
+      siteNav.classList.add('nav-open');
+      mainHeader.classList.add('nav-open');
+    } else {
+      siteNav.classList.remove('nav-open');
+      mainHeader.classList.remove('nav-open');
+    }
+  });
+
+  {%- if site.search_enabled != false and site.search.button %}
+  const searchInput = document.getElementById('search-input');
+  const searchButton = document.getElementById('search-button');
+
+  jtd.addEvent(searchButton, 'click', function(e){
+    e.preventDefault();
+
+    mainHeader.classList.add('nav-open');
+    searchInput.focus();
+  });
+  {%- endif %}
 }
 
+{%- if site.search_enabled != false %}
 // Site search
 
 function initSearch() {
   var request = new XMLHttpRequest();
-  request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
+  request.open('GET', '{{ "assets/js/search-data.json" | relative_url }}', true);
 
   request.onload = function(){
     if (request.status >= 200 && request.status < 400) {
-      // Success!
-      var data = JSON.parse(request.responseText);
+      var docs = JSON.parse(request.responseText);
       
-      {% if site.search_tokenizer_separator != nil %}
-      lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
-      {% else %}
-      lunr.tokenizer.separator = /[\s\-/]+/
-      {% endif %}
+      lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
 
-      var index = lunr(function () {
+      var index = lunr(function(){
         this.ref('id');
         this.field('title', { boost: 200 });
         this.field('content', { boost: 2 });
-        this.field('url');
+        {%- if site.search.rel_url != false %}
+        this.field('relUrl');
+        {%- endif %}
         this.metadataWhitelist = ['position']
 
-        for (var i in data) {
+        for (var i in docs) {
           this.add({
             id: i,
-            title: data[i].title,
-            content: data[i].content,
-            url: data[i].url
+            title: docs[i].title,
+            content: docs[i].content,
+            {%- if site.search.rel_url != false %}
+            relUrl: docs[i].relUrl
+            {%- endif %}
           });
         }
       });
 
-      searchResults(index, data);
+      searchLoaded(index, docs);
     } else {
-      // We reached our target server, but it returned an error
       console.log('Error loading ajax request. Request status:' + request.status);
     }
   };
 
   request.onerror = function(){
-    // There was a connection error of some sort
     console.log('There was a connection error');
   };
 
   request.send();
+}
 
-  function searchResults(index, data) {
-    var index = index;
-    var docs = data;
-    var searchInput = document.querySelector('.js-search-input');
-    var searchResults = document.querySelector('.js-search-results');
+function searchLoaded(index, docs) {
+  var index = index;
+  var docs = docs;
+  var searchInput = document.getElementById('search-input');
+  var searchResults = document.getElementById('search-results');
+  var mainHeader = document.getElementById('main-header');
+  var currentInput;
+  var currentSearchIndex = 0;
 
-    function hideResults() {
-      searchResults.innerHTML = '';
-      searchResults.classList.remove('active');
+  function showSearch() {
+    document.documentElement.classList.add('search-active');
+  }
+
+  function hideSearch() {
+    document.documentElement.classList.remove('search-active');
+  }
+
+  function update() {
+    currentSearchIndex++;
+
+    var input = searchInput.value;
+    if (input === '') {
+      hideSearch();
+    } else {
+      showSearch();
+      // scroll search input into view, workaround for iOS Safari
+      window.scroll(0, -1);
+      setTimeout(function(){ window.scroll(0, 0); }, 0);
+    }
+    if (input === currentInput) {
+      return;
+    }
+    currentInput = input;
+    searchResults.innerHTML = '';
+    if (input === '') {
+      return;
     }
 
-    jtd.addEvent(searchInput, 'keydown', function(e){
-      switch (e.keyCode) {
-        case 38: // arrow up
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            active.classList.remove('active');
-            if (active.parentElement.previousSibling) {
-              var previous = active.parentElement.previousSibling.querySelector('.search-result');
-              previous.classList.add('active');
-            }
-          }
-          return;
-        case 40: // arrow down
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            if (active.parentElement.nextSibling) {
-              var next = active.parentElement.nextSibling.querySelector('.search-result');
-              active.classList.remove('active');
-              next.classList.add('active');
-            }
-          } else {
-            var next = document.querySelector('.search-result');
-            if (next) {
-              next.classList.add('active');
-            }
-          }
-          return;
-        case 13: // enter
-          e.preventDefault();
-          var active = document.querySelector('.search-result.active');
-          if (active) {
-            active.click();
-          } else {
-            var first = document.querySelector('.search-result');
-            if (first) {
-              first.click();
-            }
-          }
-          return;
-      }
+    var results = index.query(function (query) {
+      var tokens = lunr.tokenizer(input)
+      query.term(tokens, {
+        boost: 10
+      });
+      query.term(tokens, {
+        wildcard: lunr.Query.wildcard.TRAILING
+      });
     });
 
-    jtd.addEvent(searchInput, 'keyup', function(e){
-      switch (e.keyCode) {
-        case 27: // When esc key is pressed, hide the results and clear the field
-          hideResults();
-          searchInput.value = '';
-          return;
-        case 38: // arrow up
-        case 40: // arrow down
-        case 13: // enter
-          e.preventDefault();
-          return;
+    if ((results.length == 0) && (input.length > 2)) {
+      var tokens = lunr.tokenizer(input).filter(function(token, i) {
+        return token.str.length < 20;
+      })
+      if (tokens.length > 0) {
+        results = index.query(function (query) {
+          query.term(tokens, {
+            editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
+          });
+        });
       }
+    }
 
-      hideResults();
+    if (results.length == 0) {
+      var noResultsDiv = document.createElement('div');
+      noResultsDiv.classList.add('search-no-result');
+      noResultsDiv.innerText = 'No results found';
+      searchResults.appendChild(noResultsDiv);
 
-      var input = this.value;
-      if (input === '') {
+    } else {
+      var resultsList = document.createElement('ul');
+      resultsList.classList.add('search-results-list');
+      searchResults.appendChild(resultsList);
+
+      addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
+    }
+
+    function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) {
+      if (searchIndex != currentSearchIndex) {
         return;
       }
+      for (var i = start; i < (start + batchSize); i++) {
+        if (i == results.length) {
+          return;
+        }
+        addResult(resultsList, results[i]);
+      }
+      setTimeout(function() {
+        addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex);
+      }, batchMillis);
+    }
 
-      var results = index.query(function (query) {
-        var tokens = lunr.tokenizer(input)
-        query.term(tokens, {
-          boost: 10
-        });
-        query.term(tokens, {
-          wildcard: lunr.Query.wildcard.TRAILING
-        });
-      });
+    function addResult(resultsList, result) {
+      var doc = docs[result.ref];
 
-      if (results.length > 0) {
-        searchResults.classList.add('active');
-        var resultsList = document.createElement('ul');
-        resultsList.classList.add('search-results-list');
-        searchResults.appendChild(resultsList);
+      var resultsListItem = document.createElement('li');
+      resultsListItem.classList.add('search-results-list-item');
+      resultsList.appendChild(resultsListItem);
 
-        for (var i in results) {
-          var result = results[i];
-          var doc = docs[result.ref];
+      var resultLink = document.createElement('a');
+      resultLink.classList.add('search-result');
+      resultLink.setAttribute('href', doc.url);
+      resultsListItem.appendChild(resultLink);
 
-          var resultsListItem = document.createElement('li');
-          resultsListItem.classList.add('search-results-list-item');
-          resultsList.appendChild(resultsListItem);
+      var resultTitle = document.createElement('div');
+      resultTitle.classList.add('search-result-title');
+      resultLink.appendChild(resultTitle);
 
-          var resultLink = document.createElement('a');
-          resultLink.classList.add('search-result');
-          resultLink.setAttribute('href', doc.url);
-          resultsListItem.appendChild(resultLink);
+      var resultDoc = document.createElement('div');
+      resultDoc.classList.add('search-result-doc');
+      resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
+      resultTitle.appendChild(resultDoc);
 
-          var resultTitle = document.createElement('div');
-          resultTitle.classList.add('search-result-title');
-          resultTitle.innerText = doc.title;
-          resultLink.appendChild(resultTitle);
+      var resultDocTitle = document.createElement('div');
+      resultDocTitle.classList.add('search-result-doc-title');
+      resultDocTitle.innerHTML = doc.doc;
+      resultDoc.appendChild(resultDocTitle);
+      var resultDocOrSection = resultDocTitle;
 
-          var resultRelUrl = document.createElement('span');
-          resultRelUrl.classList.add('search-result-rel-url');
-          resultRelUrl.innerText = doc.relUrl;
-          resultTitle.appendChild(resultRelUrl);
+      if (doc.doc != doc.title) {
+        resultDoc.classList.add('search-result-doc-parent');
+        var resultSection = document.createElement('div');
+        resultSection.classList.add('search-result-section');
+        resultSection.innerHTML = doc.title;
+        resultTitle.appendChild(resultSection);
+        resultDocOrSection = resultSection;
+      }
 
-          var metadata = result.matchData.metadata;
-          var contentFound = false;
-          for (var j in metadata) {
-            if (metadata[j].title) {
-              var position = metadata[j].title.position[0];
-              var start = position[0];
-              var end = position[0] + position[1];
-              resultTitle.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length)+'<span class="search-result-rel-url">'+doc.relUrl+'</span>';
-
-            } else if (metadata[j].content && !contentFound) {
-              contentFound = true;
-
-              var position = metadata[j].content.position[0];
-              var start = position[0];
-              var end = position[0] + position[1];
-              var previewStart = start;
-              var previewEnd = end;
-              var ellipsesBefore = true;
-              var ellipsesAfter = true;
-              for (var k = 0; k < 3; k++) {
-                var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
-                var nextDot = doc.content.lastIndexOf('.', previewStart - 2);
-                if ((nextDot > 0) && (nextDot > nextSpace)) {
-                  previewStart = nextDot + 1;
-                  ellipsesBefore = false;
-                  break;
-                }
-                if (nextSpace < 0) {
-                  previewStart = 0;
-                  ellipsesBefore = false;
-                  break;
-                }
-                previewStart = nextSpace + 1;
+      var metadata = result.matchData.metadata;
+      var titlePositions = [];
+      var contentPositions = [];
+      for (var j in metadata) {
+        var meta = metadata[j];
+        if (meta.title) {
+          var positions = meta.title.position;
+          for (var k in positions) {
+            titlePositions.push(positions[k]);
+          }
+        }
+        if (meta.content) {
+          var positions = meta.content.position;
+          for (var k in positions) {
+            var position = positions[k];
+            var previewStart = position[0];
+            var previewEnd = position[0] + position[1];
+            var ellipsesBefore = true;
+            var ellipsesAfter = true;
+            for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
+              var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
+              var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
+              if ((nextDot >= 0) && (nextDot > nextSpace)) {
+                previewStart = nextDot + 1;
+                ellipsesBefore = false;
+                break;
               }
-              for (var k = 0; k < 10; k++) {
-                var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
-                var nextDot = doc.content.indexOf('.', previewEnd + 1);
-                if ((nextDot > 0) && (nextDot < nextSpace)) {
-                  previewEnd = nextDot;
-                  ellipsesAfter = false;
-                  break;
-                }
-                if (nextSpace < 0) {
-                  previewEnd = doc.content.length;
-                  ellipsesAfter = false;
-                  break;
-                }
-                previewEnd = nextSpace;
+              if (nextSpace < 0) {
+                previewStart = 0;
+                ellipsesBefore = false;
+                break;
               }
-              var preview = doc.content.substring(previewStart, start);
-              if (ellipsesBefore) {
-                preview = '... ' + preview;
-              }
-              preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
-              preview += doc.content.substring(end, previewEnd);
-              if (ellipsesAfter) {
-                preview += ' ...';
-              }
-
-              var resultPreview = document.createElement('div');
-              resultPreview.classList.add('search-result-preview');
-              resultPreview.innerHTML = preview;
-              resultLink.appendChild(resultPreview);
+              previewStart = nextSpace + 1;
             }
+            for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
+              var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
+              var nextDot = doc.content.indexOf('. ', previewEnd + 1);
+              if ((nextDot >= 0) && (nextDot < nextSpace)) {
+                previewEnd = nextDot;
+                ellipsesAfter = false;
+                break;
+              }
+              if (nextSpace < 0) {
+                previewEnd = doc.content.length;
+                ellipsesAfter = false;
+                break;
+              }
+              previewEnd = nextSpace;
+            }
+            contentPositions.push({
+              highlight: position,
+              previewStart: previewStart, previewEnd: previewEnd,
+              ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
+            });
           }
         }
       }
-    });
 
-    jtd.addEvent(searchInput, 'blur', function(){
-      setTimeout(function(){ hideResults() }, 300);
-    });
+      if (titlePositions.length > 0) {
+        titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
+        resultDocOrSection.innerHTML = '';
+        addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
+      }
+
+      if (contentPositions.length > 0) {
+        contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
+        var contentPosition = contentPositions[0];
+        var previewPosition = {
+          highlight: [contentPosition.highlight],
+          previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+          ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
+        };
+        var previewPositions = [previewPosition];
+        for (var j = 1; j < contentPositions.length; j++) {
+          contentPosition = contentPositions[j];
+          if (previewPosition.previewEnd < contentPosition.previewStart) {
+            previewPosition = {
+              highlight: [contentPosition.highlight],
+              previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+              ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
+            }
+            previewPositions.push(previewPosition);
+          } else {
+            previewPosition.highlight.push(contentPosition.highlight);
+            previewPosition.previewEnd = contentPosition.previewEnd;
+            previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
+          }
+        }
+
+        var resultPreviews = document.createElement('div');
+        resultPreviews.classList.add('search-result-previews');
+        resultLink.appendChild(resultPreviews);
+
+        var content = doc.content;
+        for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
+          var position = previewPositions[j];
+
+          var resultPreview = document.createElement('div');
+          resultPreview.classList.add('search-result-preview');
+          resultPreviews.appendChild(resultPreview);
+
+          if (position.ellipsesBefore) {
+            resultPreview.appendChild(document.createTextNode('... '));
+          }
+          addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
+          if (position.ellipsesAfter) {
+            resultPreview.appendChild(document.createTextNode(' ...'));
+          }
+        }
+      }
+
+      {%- if site.search.rel_url != false %}
+      var resultRelUrl = document.createElement('span');
+      resultRelUrl.classList.add('search-result-rel-url');
+      resultRelUrl.innerText = doc.relUrl;
+      resultTitle.appendChild(resultRelUrl);
+      {%- endif %}
+    }
+
+    function addHighlightedText(parent, text, start, end, positions) {
+      var index = start;
+      for (var i in positions) {
+        var position = positions[i];
+        var span = document.createElement('span');
+        span.innerHTML = text.substring(index, position[0]);
+        parent.appendChild(span);
+        index = position[0] + position[1];
+        var highlight = document.createElement('span');
+        highlight.classList.add('search-result-highlight');
+        highlight.innerHTML = text.substring(position[0], index);
+        parent.appendChild(highlight);
+      }
+      var span = document.createElement('span');
+      span.innerHTML = text.substring(index, end);
+      parent.appendChild(span);
+    }
   }
+
+  jtd.addEvent(searchInput, 'focus', function(){
+    setTimeout(update, 0);
+  });
+
+  jtd.addEvent(searchInput, 'keyup', function(e){
+    switch (e.keyCode) {
+      case 27: // When esc key is pressed, hide the results and clear the field
+        searchInput.value = '';
+        break;
+      case 38: // arrow up
+      case 40: // arrow down
+      case 13: // enter
+        e.preventDefault();
+        return;
+    }
+    update();
+  });
+
+  jtd.addEvent(searchInput, 'keydown', function(e){
+    switch (e.keyCode) {
+      case 38: // arrow up
+        e.preventDefault();
+        var active = document.querySelector('.search-result.active');
+        if (active) {
+          active.classList.remove('active');
+          if (active.parentElement.previousSibling) {
+            var previous = active.parentElement.previousSibling.querySelector('.search-result');
+            previous.classList.add('active');
+          }
+        }
+        return;
+      case 40: // arrow down
+        e.preventDefault();
+        var active = document.querySelector('.search-result.active');
+        if (active) {
+          if (active.parentElement.nextSibling) {
+            var next = active.parentElement.nextSibling.querySelector('.search-result');
+            active.classList.remove('active');
+            next.classList.add('active');
+          }
+        } else {
+          var next = document.querySelector('.search-result');
+          if (next) {
+            next.classList.add('active');
+          }
+        }
+        return;
+      case 13: // enter
+        e.preventDefault();
+        var active = document.querySelector('.search-result.active');
+        if (active) {
+          active.click();
+        } else {
+          var first = document.querySelector('.search-result');
+          if (first) {
+            first.click();
+          }
+        }
+        return;
+    }
+  });
+
+  jtd.addEvent(document, 'click', function(e){
+    if (e.target != searchInput) {
+      hideSearch();
+    }
+  });
+}
+{%- endif %}
+
+// Switch theme
+
+jtd.getTheme = function() {
+  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
 }
 
-function pageFocus() {
-  var mainContent = document.querySelector('.js-main-content');
-  mainContent.focus();
+jtd.setTheme = function(theme) {
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
+}
+
+// Scroll site-nav to ensure the link to the current page is visible
+
+function scrollNav() {
+  const href = document.location.pathname;
+  const siteNav = document.getElementById('site-nav');
+  const targetLink = siteNav.querySelector('a[href="' + href + '"], a[href="' + href + '/"]');
+  if(targetLink){
+    const rect = targetLink.getBoundingClientRect();
+    siteNav.scrollBy(0, rect.top - 3*rect.height);
+  }
 }
 
 // Document ready
 
 jtd.onReady(function(){
   initNav();
-  pageFocus();
-  if (typeof lunr !== 'undefined') {
-    initSearch();
-  }
+  {%- if site.search_enabled != false %}
+  initSearch();
+  {%- endif %}
+  scrollNav();
 });
 
 })(window.jtd = window.jtd || {});

assets/js/search-data.json

@@ -1,12 +0,0 @@
----
----
-{
-  {% assign comma = false %}
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
-    "title": "{{ page.title | replace: '&', '&' }}",
-    "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
-    "url": "{{ page.url | absolute_url }}",
-    "relUrl": "{{ page.url }}"
-  }{% assign comma = true %}
-  {% endif %}{% endfor %}
-}

assets/js/zzzz-search-data.json

@@ -0,0 +1,72 @@
+---
+permalink: /assets/js/search-data.json
+---
+{
+{%- assign i = 0 -%}
+{%- assign pages_array = "" | split: "" -%}
+{%- assign pages_array = pages_array | push: site.html_pages -%}
+{%- if site.just_the_docs.collections -%}
+  {%- 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.search_exclude != true -%}
+      {%- assign pages_array = pages_array | push: collection -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endif -%}
+{%- for pages in pages_array -%}
+  {%- for page in pages -%}
+    {%- if page.title and page.search_exclude != true -%}
+      {%- assign page_content = page.content -%}
+      {%- assign heading_level = site.search.heading_level | default: 2 -%}
+      {%- for j in (2..heading_level) -%}
+        {%- assign tag = '<h' | append: j -%}
+        {%- assign closing_tag = '</h' | append: j -%}
+        {%- assign page_content = page_content | replace: tag, '<h1' | replace: closing_tag, '</h1' -%}
+      {%- endfor -%}
+      {%- assign parts = page_content | split: '<h1' -%}
+      {%- assign title_found = false -%}
+      {%- for part in parts offset: 1 -%}
+        {%- assign titleAndContent = part | split: '</h1>' -%}
+        {%- assign title = titleAndContent[0] | replace_first: '>', '<h1>' | split: '<h1>' -%}
+        {%- assign title = title[1] | strip_html -%}
+        {%- assign content = titleAndContent[1] -%}
+        {%- assign url = page.url -%}
+        {%- if title == page.title and parts[0] == '' -%}
+          {%- assign title_found = true -%}
+        {%- else -%}
+          {%- assign id = titleAndContent[0] -%}
+          {%- assign id = id | split: 'id="' -%}
+          {%- if id.size == 2 -%}
+            {%- assign id = id[1] -%}
+            {%- assign id = id | split: '"' -%}
+            {%- assign id = id[0] -%}
+            {%- capture url -%}{{ url | append: '#' | append: id }}{%- endcapture -%}
+          {%- endif -%}
+        {%- endif -%}
+  {%- unless i == 0 -%},{%- endunless -%}
+  "{{ i }}": {
+    "doc": {{ page.title | jsonify }},
+    "title": {{ title | jsonify }},
+    "content": {{ content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
+    "url": "{{ url | relative_url }}",
+    "relUrl": "{{ url }}"
+  }
+        {%- assign i = i | plus: 1 -%}
+      {%- endfor -%}
+      {%- unless title_found -%}
+  {%- unless i == 0 -%},{%- endunless -%}
+  "{{ i }}": {
+    "doc": {{ page.title | jsonify }},
+    "title": {{ page.title | jsonify }},
+    "content": {{ parts[0] | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
+    "url": "{{ page.url | relative_url }}",
+    "relUrl": "{{ page.url }}"
+  }
+        {%- assign i = i | plus: 1 -%}
+      {%- endunless -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor %}
+}

docker-compose.yml

@@ -0,0 +1,14 @@
+version: "3.5"
+
+services:
+  jekyll:
+    build:
+      context: ./
+    ports:
+      - 4000:4000
+    volumes:
+      - .:/usr/src/app
+    stdin_open: true
+    tty: true
+    command: bundle exec jekyll serve -H 0.0.0.0 -t
+

docs/configuration.md

@@ -7,8 +7,7 @@ nav_order: 2
 # Configuration
 {: .no_toc }
 
-
-Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's _config.yml file.
+Just the Docs has some specific configuration parameters that can be defined in your Jekyll site's \_config.yml file.
 {: .fs-6 .fw-300 }
 
 ## Table of contents
@@ -19,8 +18,7 @@ Just the Docs has some specific configuration parameters that can be defined in
 
 ---
 
-
-View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
+View this site's [\_config.yml](https://github.com/just-the-docs/just-the-docs/tree/main/_config.yml) file as an example.
 
 ## Site logo
 
@@ -36,18 +34,54 @@ logo: "/assets/images/just-the-docs.png"
 # Supports true (default) or false
 search_enabled: true
 
-# Enable support for hyphenated search words:
-search_tokenizer_separator: /[\s/]+/
-
+search:
+  # Split pages into sections that can be searched individually
+  # Supports 1 - 6, default: 2
+  heading_level: 2
+  # Maximum amount of previews per search result
+  # Default: 3
+  previews: 3
+  # Maximum amount of words to display before a matched word in the preview
+  # Default: 5
+  preview_words_before: 5
+  # Maximum amount of words to display after a matched word in the preview
+  # Default: 10
+  preview_words_after: 10
+  # Set the search token separator
+  # Default: /[\s\-/]+/
+  # Example: enable support for hyphenated search words
+  tokenizer_separator: /[\s/]+/
+  # Display the relative url in search results
+  # Supports true (default) or false
+  rel_url: true
+  # Enable or disable the search button that appears in the bottom right corner of every page
+  # Supports true or false (default)
+  button: false
 ```
 
+## Mermaid Diagrams
+
+The minimum configuration requires the key for `version` ([from jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)) in `_config.yml`:
+
+```yaml
+mermaid:
+  # Version of mermaid library
+  # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
+  version: "9.1.3"
+```
+
+See [the Code documentation]({{ site.baseurl }}{% link docs/ui-components/code.md %}#mermaid-diagram-code-blocks) for more configuration options and information.
+
 ## Aux links
 
 ```yaml
 # Aux links for the upper right navigation
 aux_links:
   "Just the Docs on GitHub":
-    - "//github.com/pmarsceill/just-the-docs"
+    - "//github.com/just-the-docs/just-the-docs"
+
+# Makes Aux links open in a new tab. Default is false
+aux_links_new_tab: false
 ```
 
 ## Heading anchor links
@@ -56,33 +90,188 @@ aux_links:
 # Heading anchor links appear on hover over h1-h6 tags in page content
 # allowing users to deep link to a particular heading on a page.
 #
-# Supports true (default) or false/nil
+# Supports true (default) or false
 heading_anchors: true
 ```
 
+## External navigation links
+
+External links can be added to the navigation through the `nav_external_links` option.
+See [Navigation Structure]({{ site.baseurl }}{% link docs/navigation-structure.md %}#external-navigation-links) for more details.
+
 ## Footer content
 
 ```yaml
-# Footer content appears at the bottom of every page's main content
-footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
+# Footer content
+# appears at the bottom of every page's main content
+# Note: The footer_content option is deprecated and will be removed in a future major release. Please use `_includes/footer_custom.html` for more robust
+markup / liquid-based content.
+footer_content: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/just-the-docs/just-the-docs/tree/main/LICENSE.txt\">MIT license.</a>"
+
+# Footer last edited timestamp
+last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
+last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
+
+# Footer "Edit this page on GitHub" link text
+gh_edit_link: true # show or hide edit this page link
+gh_edit_link_text: "Edit this page on GitHub."
+gh_edit_repository: "https://github.com/just-the-docs/just-the-docs" # the github URL for your repo
+gh_edit_branch: "main" # the branch that your docs is served from
+# gh_edit_source: docs # the source that your files originate from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
 ```
 
+_note: `footer_content` is deprecated, but still supported. For a better experience we have moved this into an include called `_includes/footer_custom.html` which will allow for robust markup / liquid-based content._
+
+- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format
+- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime)
+- `gh_edit_repository` is the URL of the project's GitHub repository
+- `gh_edit_branch` is the branch that the docs site is served from; defaults to `main`
+- `gh_edit_source` is the source directory that your project files are stored in (should be the same as [site.source](https://jekyllrb.com/docs/configuration/options/))
+- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode
+
 ## Color scheme
 
 ```yaml
-# Color scheme currently only supports "dark" or nil (default)
-color_scheme: "dark"
+# Color scheme supports "light" (default) and "dark"
+color_scheme: dark
 ```
+
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
-<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+
+jtd.addEvent(toggleDarkMode, 'click', function(){
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
+  } else {
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
+  }
+});
+</script>
 
 See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
 
+## Callouts
+
+To use this feature, you need to configure a `color` and (optionally) `title` for each kind of callout you want to use, e.g.:
+
+```yaml
+callouts:
+  warning:
+    title: Warning
+    color: red
+```
+
+This uses the color `$red-000` for the background of the callout, and `$red-300` for the title and box decoration.[^dark] You can then style a paragraph as a `warning` callout like this:
+
+```markdown
+{: .warning }
+A paragraph...
+```
+
+[^dark]:
+    If you use the `dark` color scheme, this callout uses `$red-300` for the background, and `$red-000` for the title.
+
+The colors `grey-lt`, `grey-dk`, `purple`, `blue`, `green`, `yellow`, and `red` are predefined; to use a custom color, you need to define its `000` and `300` levels in your SCSS files. For example, to use `pink`, add the following to your `_sass/custom/custom.scss` file:
+
+```scss
+$pink-000: #f77ef1;
+$pink-100: #f967f1;
+$pink-200: #e94ee1;
+$pink-300: #dd2cd4;
+```
+
+You can override the default `opacity` of the background for a particular callout, e.g.:
+
+```yaml
+callouts:
+  custom:
+    color: pink
+    opacity: 0.3
+```
+
+You can change the default opacity (`0.2`) for all callouts, e.g.:
+
+```yaml
+callouts_opacity: 0.3
+```
+
+You can also adjust the overall level of callouts.
+The value of `callouts_level` is either `quiet` or `loud`;
+`loud` increases the saturation and lightness of the backgrounds.
+The default level is `quiet` when using the `light` or custom color schemes,
+and `loud` when using the `dark color scheme.`
+
+See [Callouts]({{ site.baseurl }}{% link docs/ui-components/callouts.md %}) for more information.
+
 ## Google Analytics
 
 ```yaml
 # Google Analytics Tracking (optional)
 # e.g, UA-1234567-89
 ga_tracking: UA-5555555-55
+ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true by default)
 ```
+
+## Document collections
+
+By default, the navigation and search include normal [pages](https://jekyllrb.com/docs/pages/).
+You can also use [Jekyll collections](https://jekyllrb.com/docs/collections/) which group documents semantically together.
+
+For example, put all your test files in the `_tests` folder and create the `tests` collection:
+
+```yaml
+# Define Jekyll collections
+collections:
+  # Define a collection named "tests", its documents reside in the "_tests" directory
+  tests:
+    permalink: "/:collection/:path/"
+    output: true
+
+just_the_docs:
+  # Define which collections are used in just-the-docs
+  collections:
+    # Reference the "tests" collection
+    tests:
+      # Give the collection a name
+      name: Tests
+      # Exclude the collection from the navigation
+      # Supports true or false (default)
+      # nav_exclude: true
+      # Fold the collection in the navigation
+      # Supports true or false (default)
+      # nav_fold: true
+      # Exclude the collection from the search
+      # Supports true or false (default)
+      # search_exclude: true
+```
+
+The navigation for all your normal pages (if any) is displayed before those in collections.
+
+You can reference multiple collections.
+This creates categories in the navigation with the configured names.
+
+```yaml
+collections:
+  tests:
+    permalink: "/:collection/:path/"
+    output: true
+  tutorials:
+    permalink: "/:collection/:path/"
+    output: true
+
+just_the_docs:
+  collections:
+    tests:
+      name: Tests
+    tutorials:
+      name: Tutorials
+```
+
+When *all* your pages are in a single collection, its name is not displayed.
+
+The navigation for each collection is a separate name space for page titles: a page in one collection cannot be a child of a page in a different collection, or of a normal page.

docs/customization.md

@@ -16,6 +16,7 @@ nav_order: 6
 ---
 
 ## Color schemes
+
 {: .d-inline-block }
 
 New
@@ -29,37 +30,94 @@ To enable a color scheme, set the `color_scheme` parameter in your site's `_conf
 {: .no_toc }
 
 ```yaml
-# Color scheme currently only supports "dark" or nil (default)
-color_scheme: "dark"
+# Color scheme supports "light" (default) and "dark"
+color_scheme: dark
 ```
+
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
-<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
 
-## Specific visual customization
+jtd.addEvent(toggleDarkMode, 'click', function(){
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
+  } else {
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
+  }
+});
+</script>
 
-To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value.
+## Custom schemes
 
-For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing.
+### Define a custom scheme
+
+You can add custom schemes.
+If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name)
+where you override theme variables to change colors, fonts, spacing, etc.
+
+{: .note }
+Since the default color scheme is `light`, your custom scheme is implicitly based on the variable settings used by the `light` scheme.
+
+If you want your custom scheme to be based on the `dark` scheme, you need to start your file with the following line:
+
+```scss
+@import "./color_schemes/dark";
+```
+
+You can define custom schemes based on other custom schemes in the same way.
+
+Available variables are listed in the [\_variables.scss](https://github.com/just-the-docs/just-the-docs/tree/main/_sass/support/_variables.scss) file.
+
+For example, to change the link color from the purple default to blue, include the following inside your scheme file:
 
 #### Example
 {: .no_toc }
 
 ```scss
-// ...
-//
-// $body-text-color: $grey-dk-100;
-// $body-heading-color: $grey-dk-300;
 $link-color: $blue-000;
-//
-// ...
 ```
 
+Keep in mind that changing a variable will not automatically change the value of other variables that depend on it.
+For example, the default link color (`$link-color`) is set to `$purple-000`. However, redefining `$purple-000` in a custom color scheme will not automatically change `$link-color` to match it.
+Instead, each variable that relies on previously-cascaded values must be manually reimplemented by copying the dependent rules from `_variables.scss` — in this case, rewriting `$link-color: $purple-000;`.
+
 _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
+Please use scheme files.
 
-## Override styles
+### Use a custom scheme
 
-For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.scss`. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
+To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file:
+
+```yaml
+color_scheme: foo
+```
+
+### Switchable custom scheme
+
+If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name)
+with the following content:
+
+{% raw %}
+    ---
+    ---
+    {% include css/just-the-docs.scss.liquid color_scheme="foo" %}
+{% endraw %}
+
+This allows you to switch the scheme via the following javascript.
+
+```js
+jtd.setTheme("foo")
+```
+
+## Override and completely custom styles
+
+For styles that aren't defined as variables, you may want to modify specific CSS classes.
+Additionally, you may want to add completely custom CSS specific to your content.
+To do this, put your styles in the file `_sass/custom/custom.scss`.
+This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
 
 For example, if you'd like to add your own styles for printing a page, you could add the following styles.
 
@@ -69,7 +127,95 @@ For example, if you'd like to add your own styles for printing a page, you could
 ```scss
 // Print-only styles.
 @media print {
-  .side-bar, .page-header { display: none; }
-  .main-content { max-width: auto; margin: 1em;}
+  .side-bar,
+  .page-header {
+    display: none;
+  }
+  .main-content {
+    max-width: auto;
+    margin: 1em;
+  }
 }
 ```
+
+## Override includes
+
+You can customize the theme by overriding any of the custom [Jekyll includes](https://jekyllrb.com/docs/includes/) files that it provides.
+
+To do this, create an `_includes` directory and make a copy of the specific file you wish to modify. The content in this file will override the theme defaults. You can learn more about this process in the Jekyll docs for [Overriding theme defaults](https://jekyllrb.com/docs/themes/#overriding-theme-defaults).
+
+Just the Docs provides the following custom includes files:
+
+### Custom TOC Heading
+
+`_includes/toc_heading_custom.html`
+
+If the page has any child pages, and `has_toc` is not set to `false`, this content appears as a heading above the [auto-generating list of child pages]({{ site.baseurl }}{% link docs/navigation-structure.md %}#auto-generating-table-of-contents) after the page's content.
+
+#### Example
+{: .no_toc }
+
+To change the default TOC heading to "Contents", create `_includes/toc_heading_custom.html` and add:
+```html
+<h2 class="text-delta">Contents</h2>
+```
+
+The (optional) `text-delta` class makes the heading appear as **Contents**{:.text-delta} .
+
+### Custom Footer
+
+`_includes/footer_custom.html`
+
+This content appears at the bottom of every page's main content. More info for this include can be found in the [Configuration - Footer content]({{ site.baseurl }}{% link docs/configuration.md %}#footer-content).
+
+### Custom Head
+
+`_includes/head_custom.html`
+
+Any HTML added to this file will be inserted before the closing `<head>` tag. This might include additional `<meta>`, `<link>`, or `<script>` tags.
+
+#### Example
+{: .no_toc }
+
+To add a custom favicon, create `_includes/head_custom.html` and add:
+```html
+<link rel="shortcut icon" type="image/png" href="{{site.baseurl}}/path/to/your/favicon.png">
+```
+
+### Custom Header
+
+`_includes/header_custom.html`
+
+Content added to this file appears at the top of every page's main content between the site search and auxiliary links if they are enabled. If `search_enabled` were set to false and `aux_links` were removed, the content of `header_custom.html` would occupy the space at the top of every page.
+
+### Custom Nav Footer
+
+`_includes/nav_footer_custom.html`
+
+Any content added to this file will appear at the bottom left of the page below the site's navigation. By default an attribution to Just the Docs is displayed which reads, `This site uses Just the Docs, a documentation theme for Jekyll.`.
+
+### Custom Search Placeholder
+
+`_includes/search_placeholder_custom.html`
+
+Content added to this file will replace the default placeholder text in the search bar (and its `aria-label`), after stripping HTML and leading/trailing whitespace. By default, the content of the include is:
+
+{% raw %}
+
+```liquid
+Search {{site.title}}
+```
+
+{% endraw %}
+
+Override this file to render a custom placeholder. One common use-case is internationalization; for example,
+
+{% raw %}
+
+```liquid
+Chercher notre site
+```
+
+{% endraw %}
+
+would make the placeholder text "Chercher notre site". [Liquid code](https://jekyllrb.com/docs/liquid/) (including [Jekyll variables](https://jekyllrb.com/docs/variables/)) is also supported.

docs/index-test.md

@@ -4,6 +4,22 @@ title: Markdown kitchen sink
 nav_order: 99
 ---
 
+<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
+
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+
+jtd.addEvent(toggleDarkMode, 'click', function(){
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
+  } else {
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
+  }
+});
+</script>
+
 Text can be **bold**, _italic_, or ~~strikethrough~~.
 
 [Link to another page](another-page).
@@ -39,7 +55,7 @@ GitHubPages::Dependencies.gems.each do |gem, version|
 end
 ```
 
-#### [](#header-4)Header 4
+#### [](#header-4)Header 4 `with code not transformed`
 
 *   This is an unordered list following a header.
 *   This is an unordered list following a header.
@@ -53,6 +69,12 @@ end
 
 ###### [](#header-6)Header 6
 
+[This is a very long link which wraps and therefore doesn't overflow
+even when it comes at the beginning](.) of the line.
+
+- [This is a very long link which wraps and therefore doesn't overflow the line
+  when used first in an item ](.) in a list.
+
 | head1        | head two          | three |
 |:-------------|:------------------|:------|
 | ok           | good swedish fish | nice  |
@@ -78,6 +100,24 @@ end
 1.  Item three
 1.  Item four
 
+### And an ordered list, continued:
+
+1.  Item one
+1.  Item two
+
+Some text
+
+{:style="counter-reset:none"}
+1.  Item three
+1.  Item four
+
+### And an ordered list starting from 42:
+
+{:style="counter-reset:step-counter 41"}
+1.  Item 42
+1.  Item 43
+1.  Item 44
+
 ### And a nested list:
 
 - level 1 item
@@ -118,14 +158,62 @@ end
 - [ ] Hello, this is another TODO item
 - [x] Goodbye, this item is done
 
+### Nesting task lists
+
+- [ ] level 1 item (task)
+   - [ ] level 2 item (task)
+   - [ ] level 2 item (task)
+- [ ] level 1 item (task)
+- [ ] level 1 item (task)
+
+### Nesting a ul in a task list
+
+- [ ] level 1 item (task)
+   - level 2 item (ul)
+   - level 2 item (ul)
+- [ ] level 1 item (task)
+- [ ] level 1 item (task)
+
+### Nesting a task list in a ul
+
+- level 1 item (ul)
+   - [ ] level 2 item (task)
+   - [ ] level 2 item (task)
+- level 1 item (ul)
+- level 1 item (ul)
+
 ### Small image
 
-![](https://assets-cdn.github.com/images/icons/emoji/octocat.png)
+![](../../assets/images/small-image.jpg)
 
 ### Large image
 
-![](https://guides.github.com/activities/hello-world/branching.png)
+![](../../assets/images/large-image.jpg)
 
+"[Wroclaw University Library digitizing rare archival texts](https://www.flickr.com/photos/97810305@N08/9401451269)" by [j_cadmus](https://www.flickr.com/photos/97810305@N08) is marked with [CC BY 2.0](https://creativecommons.org/licenses/by/2.0/?ref=openverse).
+
+### Labels
+
+I'm a label
+{: .label }
+
+blue
+{: .label .label-blue }
+green
+{: .label .label-green }
+purple
+{: .label .label-purple }
+yellow
+{: .label .label-yellow }
+red
+{: .label .label-red }
+
+**bold**
+{: .label }
+*italic*
+{: .label }
+***bold + italic***
+{: .label }
 
 ### Definition lists can be used with HTML syntax.
 
@@ -140,10 +228,89 @@ end
 <dd>Green</dd>
 </dl>
 
+#### Multiple description terms and values
+
+Term
+: Brief description of Term
+
+Longer Term
+: Longer description of Term,
+  possibly more than one line
+
+Term
+: First description of Term,
+  possibly more than one line
+
+: Second description of Term,
+  possibly more than one line
+
+Term1
+Term2
+: Single description of Term1 and Term2,
+  possibly more than one line
+
+Term1
+Term2
+: First description of Term1 and Term2,
+  possibly more than one line
+
+: Second description of Term1 and Term2,
+  possibly more than one line
+
+### More code
+
+```python{% raw %}
+def dump_args(func):
+    "This decorator dumps out the arguments passed to a function before calling it"
+    argnames = func.func_code.co_varnames[:func.func_code.co_argcount]
+    fname = func.func_name
+    def echo_func(*args,**kwargs):
+        print fname, ":", ', '.join(
+            '%s=%r' % entry
+            for entry in zip(argnames,args) + kwargs.items())
+        return func(*args, **kwargs)
+    return echo_func
+
+@dump_args
+def f1(a,b,c):
+    print a + b + c
+
+f1(1, 2, 3)
+
+def precondition(precondition, use_conditions=DEFAULT_ON):
+    return conditions(precondition, None, use_conditions)
+
+def postcondition(postcondition, use_conditions=DEFAULT_ON):
+    return conditions(None, postcondition, use_conditions)
+
+class conditions(object):
+    __slots__ = ('__precondition', '__postcondition')
+
+    def __init__(self, pre, post, use_conditions=DEFAULT_ON):
+        if not use_conditions:
+            pre, post = None, None
+
+        self.__precondition  = pre
+        self.__postcondition = post
+{% endraw %}```
+
 ```
 Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
 ```
 
+### Mermaid Diagrams
+
+The following code is displayed as a diagram only when a `mermaid` key supplied in `_config.yml`.
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+
 ```
 The final element.
 ```

docs/navigation-structure.md

@@ -7,11 +7,14 @@ nav_order: 5
 # Navigation Structure
 {: .no_toc }
 
-## Table of contents
-{: .no_toc .text-delta }
-
-1. TOC
+<details open markdown="block">
+  <summary>
+    Table of contents
+  </summary>
+  {: .text-delta }
+- TOC
 {:toc}
+</details>
 
 ---
 
@@ -25,7 +28,7 @@ By default, all pages will appear as top level pages in the main nav unless a pa
 
 ## Ordering pages
 
-To specify a page order, use the `nav_order` parameter in your pages' YAML front matter.
+To specify a page order, you can use the `nav_order` parameter in your pages' YAML front matter.
 
 #### Example
 {: .no_toc }
@@ -36,8 +39,16 @@ layout: default
 title: Customization
 nav_order: 4
 ---
+
 ```
 
+The parameter values determine the order of the top-level pages, and of child pages with the same parent. You can reuse the same parameter values (e.g., integers starting from 1) for the child pages of different parents.
+
+The parameter values can be numbers (integers, floats) and/or strings. Pages with numerical `nav_order` parameters always come before those with string `nav_order` parameters. When you omit `nav_order` parameters, they default to the titles of the pages. If you want to make the page order independent of the page titles, you can set explicit `nav_order` parameters on all pages. All pages with explicit `nav_order` parameters
+come before all pages ordered by their `title` values.
+
+By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case. Enclosing strings in (single or double) quotation marks is optional. Numeric values are not enclosed in quotation marks, e.g., `42`, `-1.0`; numbers in quotation marks are lexicographically ordered, so `"10"` comes before `"2"`, for example.
+
 ---
 
 ## Excluding pages
@@ -53,8 +64,13 @@ layout: default
 title: 404
 nav_exclude: true
 ---
+
 ```
 
+The `nav_exclude` parameter does not affect the [auto-generating list of child pages](#auto-generating-table-of-contents), which you can use to access pages excluded from the main navigation.
+
+Pages with no `title` are automatically excluded from the main navigation.
+
 ---
 
 ## Pages with children
@@ -89,7 +105,8 @@ Sometimes you will want to create a page with many children (a section). First,
 ```
 
 On the parent pages, add this YAML front matter parameter:
--  `has_children: true` (tells us that this is a parent page)
+
+- `has_children: true` (tells us that this is a parent page)
 
 #### Example
 {: .no_toc }
@@ -101,11 +118,13 @@ title: UI Components
 nav_order: 2
 has_children: true
 ---
+
 ```
 
 Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, which has children and is ordered second in the main nav.
 
 ### Child pages
+
 {: .text-gamma }
 
 On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section).
@@ -120,10 +139,27 @@ title: Buttons
 parent: UI Components
 nav_order: 2
 ---
+
 ```
 
 The Buttons page appears as a child of UI Components and appears second in the UI Components section.
 
+### Ordering child pages
+
+You can optionally add the following to the YAML front matter to change the default sort order of child pages from ascending to descending order:
+
+- `child_nav_order: desc`
+
+#### Example
+{: .no_toc }
+```yaml
+---
+layout: default
+title: Descending Child Pages
+child_nav_order: desc
+---
+```
+
 ### Auto-generating Table of Contents
 
 By default, all pages with children will automatically append a Table of Contents which lists the child pages after the parent page's content. To disable this auto Table of Contents, set `has_toc: false` in the parent page's YAML front matter.
@@ -139,9 +175,11 @@ nav_order: 2
 has_children: true
 has_toc: false
 ---
+
 ```
 
 ### Children with children
+
 {: .text-gamma }
 
 Child pages can also have children (grandchildren). This is achieved by using a similar pattern on the child and grandchild pages.
@@ -160,6 +198,7 @@ parent: UI Components
 nav_order: 2
 has_children: true
 ---
+
 ```
 
 ```yaml
@@ -170,6 +209,7 @@ parent: Buttons
 grand_parent: UI Components
 nav_order: 1
 ---
+
 ```
 
 This would create the following navigation structure:
@@ -188,11 +228,14 @@ This would create the following navigation structure:
 +-- ..
 ```
 
+{: .note }
+Currently, the navigation structure is limited to 3 levels: grandchild pages cannot themselves have child pages.
+
 ---
 
-## Auxiliary Navigation
+## Auxiliary Links
 
-To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-nav) in your site's `_config.yml` file.
+To add auxiliary links to your site (in the upper right on all pages), add it to the `aux_links` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-links) in your site's `_config.yml` file.
 
 #### Example
 {: .no_toc }
@@ -201,7 +244,26 @@ To add a auxiliary navigation item to your site (in the upper right on all pages
 # Aux links for the upper right navigation
 aux_links:
   "Just the Docs on GitHub":
-    - "//github.com/pmarsceill/just-the-docs"
+    - "//github.com/just-the-docs/just-the-docs"
+```
+
+---
+
+## External Navigation Links
+
+To add external links to the navigation, add them to the `nav_external_links` [configuration]({{ site.baseurl }}{% link docs/configuration.md %}) option in your site's `_config.yml` file.
+External links will appear under all other items in the listing order.
+
+#### Example
+
+{: .no_toc }
+
+```yaml
+# External navigation links
+nav_external_links:
+  - title: Just the Docs on GitHub
+    url: https://github.com/just-the-docs/just-the-docs
+    hide_icon: false # set to true to hide the external link icon - defaults to false
 ```
 
 ---
@@ -224,4 +286,21 @@ To generate a Table of Contents on your docs pages, you can use the `{:toc}` met
 {:toc}
 ```
 
-This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself.
+This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. To get an unordered list, replace `1. TOC` above by `- TOC`.
+
+### Collapsible Table of Contents
+
+The Table of Contents can be made collapsible using the `<details>` and `<summary>` elements , as in the following example. The attribute `open` (expands the Table of Contents by default) and the styling with `{: .text-delta }` are optional.
+
+```markdown
+<details open markdown="block">
+  <summary>
+    Table of contents
+  </summary>
+  {: .text-delta }
+1. TOC
+{:toc}
+</details>
+```
+
+The result is shown at [the top of this page](#navigation-structure) (`{:toc}` can be used only once on each page).

docs/search.md

@@ -15,64 +15,92 @@ nav_order: 7
 
 ---
 
-Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated HTML pages are indexed using the following data points:
+Just the Docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates.
+All search results are shown in an auto-complete style interface (there is no search results page).
+By default, all generated HTML pages are indexed using the following data points:
 
 - Page title
 - Page content
 - Page URL
 
-## Set up search
-
-### Generate search index
-
-Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
-
-```bash
-$ bundle exec just-the-docs rake search:init
-```
-
-This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content:
-
-```liquid
-{% raw %}---
----
-{
-  {% assign comma = false %}
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
-    "title": "{{ page.title | replace: '&', '&' }}",
-    "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
-    "url": "{{ page.url | absolute_url }}",
-    "relUrl": "{{ page.url }}"
-  }{% assign comma = true %}
-  {% endif %}{% endfor %}
-}{% endraw %}
-```
-
-_Note: If you don't run this rake command or create this file manually, search will not work (or it will use the search index data from this docs site, not your site's content)._
-
-### Enable search in configuration
+## Enable search in configuration
 
 In your site's `_config.yml`, enable search:
 
 ```yaml
 # Enable or disable the site search
+# Supports true (default) or false
 search_enabled: true
 ```
 
+### Search granularity
+
+Pages are split into sections that can be searched individually.
+The sections are defined by the headings on the page.
+Each section is displayed in a separate search result.
+
+```yaml
+# Split pages into sections that can be searched individually
+# Supports 1 - 6, default: 2
+search.heading_level: 2
+```
+
+### Search previews
+
+A search result can contain previews that show where the search words are found in the specific section.
+
+```yaml
+# Maximum amount of previews per search result
+# Default: 3
+search.previews: 3
+
+# Maximum amount of words to display before a matched word in the preview
+# Default: 5
+search.preview_words_before: 5
+
+# Maximum amount of words to display after a matched word in the preview
+# Default: 10
+search.preview_words_after: 10
+```
+
+### Search tokenizer
+
 The default is for hyphens to separate tokens in search terms:
 `gem-based` is equivalent to `gem based`, matching either word.
 To allow search for hyphenated words:
 
 ```yaml
 # Set the search token separator
-search_tokenizer_separator: /[\s/]+/
+# Default: /[\s\-/]+/
+# Example: enable support for hyphenated search words
+search.tokenizer_separator: /[\s/]+/
+```
+
+### Display URL in search results
+
+```yaml
+# Display the relative url in search results
+# Supports true (default) or false
+search.rel_url: false
+```
+
+### Display search button
+
+The search button displays in the bottom right corner of the screen and triggers the search input when clicked.
+
+```yaml
+# Enable or disable the search button that appears in the bottom right corner of every page
+# Supports true or false (default)
+search.button: true
 ```
 
 ## Hiding pages from search
 
-Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
+Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page.
+To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
 
 #### Example
+
 {: .no_toc }
 
 ```yaml
@@ -82,4 +110,18 @@ title: Page not found
 nav_exclude: true
 search_exclude: true
 ---
+
 ```
+
+## Generate search index when used as a gem
+
+If you use Just the Docs as a remote theme, you do not need the following steps.
+
+If you use the theme as a gem, you must initialize the search by running this `rake` command that comes with `just-the-docs`:
+
+```bash
+$ bundle exec just-the-docs rake search:init
+```
+
+This command creates the `assets/js/zzzz-search-data.json` file that Jekyll uses to create your search index.
+Alternatively, you can create the file manually with [this content]({{ site.github.repository_url }}/blob/main/assets/js/zzzz-search-data.json).

docs/ui-components/buttons.md

@@ -83,15 +83,15 @@ Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout
 
 <div class="code-example" markdown="1">
 [Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
-[Button ](http://example.com/){: .btn .btn-blue .mr-2 }
+[Button](http://example.com/){: .btn .btn-blue }
 
 [Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
-[Button ](http://example.com/){: .btn .btn-blue }
+[Button](http://example.com/){: .btn .btn-blue }
 </div>
 ```markdown
 [Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
-[Button ](http://example.com/){: .btn .btn-blue }
+[Button](http://example.com/){: .btn .btn-blue }
 
 [Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
-[Button ](http://example.com/){: .btn .btn-blue }
+[Button](http://example.com/){: .btn .btn-blue }
 ```

docs/ui-components/callouts.md

@@ -0,0 +1,157 @@
+---
+layout: default
+title: Callouts
+parent: UI Components
+nav_order: 7
+---
+
+# Callouts
+
+Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: [*block IALs*](https://kramdown.gettalong.org/quickref.html#block-attributes). 
+
+Common kinds of callouts include `highlight`, `important`, `new`, `note`, and `warning`.
+
+{: .warning }
+These callout names are *not* pre-defined by the theme: you need to define your own names.
+
+When you have [configured]({{ site.baseurl }}{% link docs/configuration.md %}#callouts) the  `color` and (optional) `title` for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.[^postfix]
+
+[^postfix]:
+    You can put the callout markup either before or after its content.
+
+#### An untitled callout
+{: .no_toc }
+
+```markdown
+{: .highlight }
+A paragraph
+```
+
+{: .highlight }
+A paragraph
+
+
+#### A single paragraph callout
+{: .no_toc }
+
+```markdown
+{: .note }
+A paragraph
+```
+
+{: .note }
+A paragraph
+
+```markdown
+{: .note-title }
+> My note title
+>
+> A paragraph with a custom title callout
+```
+
+{: .note-title }
+> My note title
+>
+> A paragraph with a custom title callout
+
+#### A multi-paragraph callout
+{: .no_toc }
+
+```markdown
+{: .important }
+> A paragraph
+>
+> Another paragraph
+>
+> The last paragraph
+```
+
+{: .important }
+> A paragraph
+>
+> Another paragraph
+>
+> The last paragraph
+
+```markdown
+{: .important-title }
+> My important title
+>
+> A paragraph
+>
+> Another paragraph
+>
+> The last paragraph
+```
+
+{: .important-title }
+> My important title
+>
+> A paragraph
+>
+> Another paragraph
+>
+> The last paragraph
+
+#### An indented callout
+{: .no_toc }
+
+```markdown
+> {: .highlight }
+  A paragraph
+```
+
+> {: .highlight }
+  A paragraph
+
+#### Indented multi-paragraph callouts
+{: .no_toc }
+
+```markdown
+> {: .new }
+> > A paragraph
+> >
+> > Another paragraph
+> >
+> > The last paragraph
+```
+
+> {: .new }
+> > A paragraph
+> >
+> > Another paragraph
+> >
+> > The last paragraph
+
+
+#### Nested callouts
+{: .no_toc }
+
+```markdown
+{: .important }
+> {: .warning }
+> A paragraph
+```
+
+{: .important }
+> {: .warning }
+> A paragraph
+
+#### Opaque background
+{: .no_toc }
+
+```markdown
+{: .important }
+> {: .opaque }
+> <div markdown="block">
+> {: .warning }
+> A paragraph
+> </div>
+```
+
+{: .important }
+> {: .opaque }
+> <div markdown="block">
+> {: .warning }
+> A paragraph
+> </div>

docs/ui-components/code.md

@@ -2,6 +2,7 @@
 layout: default
 title: Code
 parent: UI Components
+has_children: true
 nav_order: 6
 ---
 
@@ -22,9 +23,14 @@ Code can be rendered inline by wrapping it in single back ticks.
 
 <div class="code-example" markdown="1">
 Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Heading with `<inline code snippet>` in it.
+{: .no_toc }
 </div>
 ```markdown
 Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Heading with `<inline code snippet>` in it.
 ```
 
 ---
@@ -80,3 +86,60 @@ To demonstrate front end code, sometimes it's useful to show a rendered example
 [Link button](http://example.com/){: .btn }
 ```
 {% endhighlight %}
+
+---
+
+## Mermaid diagram code blocks
+
+[Mermaid](https://mermaid-js.github.io/mermaid/) allows you to add diagrams and visualizations using Markdown code blocks. **It is disabled by default**. However, you can turn on support for mermaid by adding a `mermaid` key to your `_config.yml`.
+
+The minimum configuration requires a `version` key (matching a version in [jsDelivr](https://cdn.jsdelivr.net/npm/mermaid/)):
+
+```yaml
+mermaid:
+  # Version of mermaid library
+  # Pick an available version from https://cdn.jsdelivr.net/npm/mermaid/
+  version: "9.1.3"
+```
+
+Additional configuration options are loaded through `_includes/mermaid_config.js`. By default, the contents of the file are the empty object:
+
+```js
+// _includes/mermaid_config.js
+{}
+```
+
+This loads the default settings.
+
+The contents of this object should follow [mermaid's configuration API](https://mermaid-js.github.io/mermaid/#/./Setup?id=configuration). For example, to override the theme, change `_includes/mermaid_config.js` to:
+
+```js
+// _includes/mermaid_config.js
+{
+  theme: "forest"
+}
+```
+
+Once mermaid is installed, it can be used in markdown files. The markdown for a simple flowchart example might look like the following:
+
+{% highlight markdown %}
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+{% endhighlight %}
+
+which renders:
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+*Note: for demonstration purposes, we've enabled mermaid on this site. It is still disabled by default, and users need to opt-in to use it.*

docs/ui-components/line-nos.md

@@ -0,0 +1,126 @@
+---
+layout: default
+title: Code with line numbers
+parent: Code
+grand_parent: UI Components
+permalink: /docs/ui-components/code/line-numbers/
+---
+
+# Code snippets with line numbers
+
+The default settings for HTML compression are incompatible with the HTML
+produced by Jekyll (4.1.1 or earlier) for line numbers from highlighted code
+-- both when using Kramdown code fences and when using Liquid highlight tags.
+
+To avoid non-conforming HTML and unsatisfactory layout, HTML compression
+can be turned off by using the following configuration option:
+
+{% highlight yaml %}
+compress_html:
+  ignore:
+    envs: all
+{% endhighlight %}
+
+When using Kramdown code fences, line numbers are turned on globally by the
+following configuration option:
+
+{% highlight yaml %}
+kramdown:
+  syntax_highlighter_opts:
+    block:
+      line_numbers: true
+{% endhighlight %}
+
+Line numbers can then be suppressed locally using Liquid tags (_without_ the
+`linenos` option) instead of fences:
+
+{% highlight yaml %}
+{% raw %}{% highlight some_language %}
+Some code
+{% endhighlight %}{% endraw %}
+{% endhighlight %}
+
+## Workarounds
+
+To use HTML compression together with line numbers, all highlighted code
+needs to be wrapped using one of the following workarounds.
+(The variable name `some_var` can be changed to avoid clashes; it can also
+be replaced by `code` -- but note that `code=code` cannot be removed).
+
+### Code fences (three backticks)
+
+{% highlight default %}
+{% raw %}{% capture some_var %}
+```some_language
+Some code
+```
+{% endcapture %}
+{% assign some_var = some_var | markdownify %}
+{% include fix_linenos.html code=some_var %}{% endraw %}
+{% endhighlight %}
+
+### Liquid highlighting
+
+{% highlight default %}
+{% raw %}{% capture some_var %}
+{% highlight some_language linenos %}
+Some code
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=some_var %}{% endraw %}
+{% endhighlight %}
+
+_Credit:_ The original version of the above workaround was suggested by
+Dmitry Hrabrov at
+<https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901>.
+
+## Examples
+
+✅ Using code fences + workaround (will only show line numbers if enabled globally in `_config.yml`):
+
+{% capture code_fence %}
+```js
+// Javascript code with syntax highlighting in fences
+var fun = function lang(l) {
+  dateformat.i18n = require('./lang/' + l)
+  return true;
+}
+```
+{% endcapture %}
+{% assign code_fence = code_fence | markdownify %}
+{% include fix_linenos.html code=code_fence %}
+
+✅ Using liquid highlighting + workaround:
+
+{% capture code %}
+{% highlight ruby linenos %}
+# Ruby code with syntax highlighting and fixed line numbers using Liquid
+GitHubPages::Dependencies.gems.each do |gem, version|
+  s.add_dependency(gem, "= #{version}")
+end
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=code %}
+{% assign code = nil %}
+
+Narrow code stays close to the line numbers:
+
+{% capture code %}
+{% highlight ruby linenos %}
+def foo
+  puts 'foo'
+end
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=code %}
+{% assign code = nil %}
+
+❌ With the compression options used for the theme docs, the following example illustrates
+the **incorrect** formatting arising from the incompatibility of HTML compression
+and the non-conforming HTML produced by Jekyll for line numbers:
+
+{% highlight ruby linenos %}
+def foo
+  puts 'foo'
+end
+{% endhighlight %}

docs/ui-components/typography.md

@@ -21,7 +21,7 @@ nav_order: 1
 By default, Just the Docs uses a native system font stack for sans-serif fonts:
 
 ```scss
--apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
+system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
 ```
 
 ABCDEFGHIJKLMNOPQRSTUVWXYZ

docs/utilities/color.md

@@ -2,7 +2,6 @@
 layout: default
 title: Color
 parent: Utilities
-nav_order: 3
 ---
 
 # Color Utilities

docs/utilities/layout.md

@@ -2,7 +2,6 @@
 layout: default
 title: Layout
 parent: Utilities
-nav_order: 2
 ---
 
 # Layout Utilities
@@ -52,6 +51,9 @@ Spacing values are based on a `1rem = 16px` spacing scale, broken down into thes
 | `6`            | 2rem          | 32px                |
 | `7`            | 2.5rem        | 40px                |
 | `8`            | 3rem          | 48px                |
+| `auto`         | auto          | auto                |
+
+Use `mx-auto` to horizontally center elements.
 
 #### Examples
 {: .no_toc }
@@ -66,6 +68,19 @@ This paragraph will have 2rem/32px of padding on the right and left at all scree
 {: .px-6 }
 ```
 
+## Horizontal Alignment
+
+| Classname               | What it does                     |
+|:------------------------|:---------------------------------|
+| `.float-left`           | `float: left`                    |
+| `.float-right`          | `float: right`                   |
+| `.flex-justify-start`   | `justify-content: flex-start`    |
+| `.flex-justify-end`     | `justify-content: flex-end`      |
+| `.flex-justify-between` | `justify-content: space-between` |
+| `.flex-justify-around`  | `justify-content: space-around`  |
+
+_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
+
 ## Vertical Alignment
 
 | Classname              | What it does                    |

docs/utilities/responsive-modifiers.md

@@ -2,7 +2,6 @@
 layout: default
 title: Responsive Modifiers
 parent: Utilities
-nav_order: 1
 ---
 
 # Responsive modifiers