Merge branch 'v0.2.9' of github.com:pmarsceill/just-the-docs into v0.2.9

Permissioning

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/ci-master.yml

@@ -0,0 +1,45 @@
+on: 
+  push:
+    branches:
+    - master
+
+name: Master branch CI
+
+jobs:
+
+  jekyll-latest:
+    name: Build Jekyll site (latest)
+    runs-on: ubuntu-latest
+    steps:
+
+    - uses: actions/checkout@master
+
+    - name: Build the site in the jekyll/builder container
+      run: |
+        docker run --rm \
+        --volume="${{ github.workspace }}:/srv/jekyll" \
+        jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
+  jekyll-3-8-5:
+    name: Build Jekyll site (v3.8.5)
+    runs-on: ubuntu-latest
+    steps:
+
+    - uses: actions/checkout@master
+
+    - name: Build the site in the jekyll/builder container
+      run: |
+        docker run --rm \
+        --volume="${{ github.workspace }}:/srv/jekyll" \
+        jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
+  assets:
+    name: Format and test CSS and JS
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js 12.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - run: npm install
+    - run: npm test

.github/workflows/ci.yml

@@ -0,0 +1,72 @@
+on: [pull_request]
+
+name: CI
+
+jobs:
+
+  jekyll-latest:
+    name: Build Jekyll site (latest)
+    runs-on: ubuntu-latest
+    steps:
+
+    - uses: actions/checkout@v2
+
+    - name: Build the site in the jekyll/builder container
+      run: |
+        docker run --rm \
+        --volume="${{ github.workspace }}:/srv/jekyll" \
+        jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && jekyll build && bundle exec rake search:init"
+
+  jekyll-3-8-5:
+    name: Build Jekyll site (v3.8.5)
+    runs-on: ubuntu-latest
+    steps:
+
+    - uses: actions/checkout@v2
+
+    - name: Build the site in the jekyll/builder container
+      run: |
+        docker run --rm \
+        --volume="${{ github.workspace }}:/srv/jekyll" \
+        jekyll/builder:3.8.5 /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && jekyll build && bundle exec rake search:init"
+
+  assets:
+    name: Format and test CSS and JS
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+      # Using this so the this instead of GITHUB_TOKEN so that this workflow can trigger another
+      with:
+        token: ${{ secrets.PAT }} 
+    - name: Use Node.js 12.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - name: Extract branch name
+      shell: bash
+      run: echo "##[set-output name=branch;]$(echo ${GITHUB_HEAD_REF#refs/heads/})"
+      id: extract_branch
+
+    - run: npm install
+    - run: npm run format
+    - name: Add changed files
+      run: |
+        echo "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git"
+        git config --global user.email $GITHUB_ACTOR@users.noreply.github.com
+        git config --global user.name $GITHUB_ACTOR
+        echo "extracted branch is ${{ steps.extract_branch.outputs.branch }}"
+        git checkout -b ${{ steps.extract_branch.outputs.branch }}
+        git status
+        git add .
+    - name: Are there any updates?
+      shell: bash
+      run: echo "##[set-output name=status]$(git status -s)"
+      id: is_dirty
+    - name: Commit files
+      if: steps.is_dirty.outputs.status
+      run: |
+        echo ${{ steps.is_dirty.outputs.status }}
+        git commit -m "🎨 Prettier"
+        git push --force --set-upstream "https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git" ${{ steps.extract_branch.outputs.branch }}
+    - run: npm test

.github/workflows/publish.yml

@@ -0,0 +1,39 @@
+name: Publish Gem
+
+on: [release]
+
+jobs:
+  build:
+    name: Build + Publish
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@master
+    - name: Set up Ruby 2.6
+      uses: actions/setup-ruby@v1
+      with:
+        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
+        gem push --KEY github --host https://rubygems.pkg.github.com/${OWNER} *.gem
+      env:
+        GEM_HOST_API_KEY: ${{secrets.GPR_AUTH_TOKEN}}
+        OWNER: pmarsceill
+
+    - name: Publish to RubyGems
+      run: |
+        mkdir -p $HOME/.gem
+        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 push *.gem
+      env:
+        GEM_HOST_API_KEY: ${{secrets.RUBYGEMS_AUTH_TOKEN}}
+

.gitignore

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

.prettierignore

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

.prettierrc

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

.stylelintrc.json

@@ -1,5 +1,13 @@
 {
-  "extends": [
-    "stylelint-config-primer"
-  ]
+  "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-prettier"],
+  "plugins": ["stylelint-prettier"],
+  "rules": {
+    "prettier/prettier": true
+  }
 }

404.html

@@ -0,0 +1,11 @@
+---
+layout: default
+title: Page not found
+permalink: /404
+nav_exclude: true
+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>

README.md

@@ -1,10 +1,16 @@
-# Just the Docs
-
-A nice looking, high customizable, responsive Jekyll theme for documention with built-in search. Easily hosted on GitHub pages.
+<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?query=workflow%3A%22Master+branch+CI%22"><img src="https://github.com/pmarsceill/just-the-docs/workflows/Master%20branch%20CI/badge.svg" alt="Build 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>
+    <br><br><br>
+</p>
 
 ![jtd](https://user-images.githubusercontent.com/896475/47384541-89053c80-d6d5-11e8-98dc-dba16e192de9.gif)
 
-
 ## Installation
 
 Add this line to your Jekyll site's Gemfile:
@@ -35,24 +41,28 @@ Or install it yourself as:
 
 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.
 
+### Submitting code changes:
+
+- Open a [Pull Request](https://github.com/pmarsceill/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:
+
+1. As few dependencies as possible
+2. No build script needed
+3. First class mobile experience
+4. Make the content shine
+
 ## Development
 
 To set up your environment to develop this theme, run `bundle install`.
 
-Your theme is setup 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.
+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.
 
-
-### When your changes are ready:
-
-- Open a [Pull Request](https://github.com/pmarsceill/just-the-docs/pulls)
-- Await code review
-- Bump the version number in `just-the-docs.gemspec`
-- Run `script/build` to package the gem
-- Run `gem push just-the-docs-<version>.gem` to publish the gem to Rubygems.org
-
 ## License
 
 The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
-

_config.yml

@@ -15,18 +15,73 @@
 # in the templates via {{ site.myvariable }}.
 title: Just the Docs
 description: A Jekyll theme for documentation
-baseurl: "/just-the-docs/" # the subpath of your site, e.g. /blog
-# url: "" # the base hostname & protocol for your site, e.g. http://example.com
-
-sass:
-  # Load dependancies
-  load_paths:
-    - node_modules/
+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
 
 permalink: pretty
-exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
+exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
+
+# 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
+search_enabled: true
+
+# Set the search token separator for hyphenated-word search:
+search_tokenizer_separator: /[\s/]+/
+
+# Enable or disable heading anchors
+heading_anchors: true
 
 # Aux links for the upper right navigation
 aux_links:
   "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"
+
+# Makes Aux links open in a new tab. Default is false
+aux_links_new_tab: false
+
+# Sort order for navigation links
+nav_sort: case_insensitive # default, equivalent to nil
+# nav_sort: case_sensitive # Capital letters sorted before lowercase
+
+# 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/pmarsceill/just-the-docs/tree/master/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/pmarsceill/just-the-docs" # the github URL for your repo
+gh_edit_branch: "master" # the branch that your docs is served 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
+
+# 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
+
+compress_html:
+  clippings: all
+  comments: all
+  endings: all
+  startings: []
+  blanklines: false
+  profile: false

_includes/css/custom.scss.liquid

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

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

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

_includes/head.html

@@ -2,10 +2,39 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
-  <title>{{ page.title }} - {{ site.title }}</title>
-  <link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}">
-  <script type="text/javascript" src="{{ "/assets/js/vendor/lunr.min.js" | absolute_url }}"></script>
-  <script type="text/javascript" src="{{ "/assets/js/just-the-docs.js" | absolute_url }}"></script>
+  {% unless site.plugins contains "jekyll-seo-tag" %}
+    <title>{{ page.title }} - {{ site.title }}</title>
+
+    {% if page.description %}
+      <meta name="Description" content="{{ page.description }}">
+    {% endif %}
+  {% endunless %}
+
+  <link rel="shortcut icon" href="{{ 'favicon.ico' | absolute_url }}" type="image/x-icon">
+
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | absolute_url }}">
+
+  {% if site.ga_tracking != nil %}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      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>
+  {% endif %}
+  <script type="text/javascript" src="{{ '/assets/js/just-the-docs.js' | absolute_url }}"></script>
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  {% seo %}
+
+  {% include head_custom.html %}
+
 </head>

_includes/nav.html

@@ -1,24 +1,51 @@
-<nav>
+<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 %}
-      <li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
-        {% if node.parent == nil or node.has_children == true %}
-        <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
-          {% if (node.has_children == true and node.parent == page.parent) %}
-            {% assign children_list = site.html_pages | sort:"nav_order" %}
-            <ul class="navigation-list-child-list">
-              {% for child in children_list %}
-                {% if child.parent == node.parent and child.title != node.title %}
-                <li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
-                  <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
-                </li>
-                {% endif %}
-              {% endfor %}
-            </ul>
-          {% endif %}
-        {% endif %}
-      </li>
-  {% endfor %}
+    {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
+    {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
+    {%- if site.nav_sort == 'case_insensitive' -%}
+      {%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
+      {%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
+    {%- else -%}
+      {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
+      {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
+    {%- endif -%}
+    {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
+    {%- for node in pages_list -%}
+      {%- unless node.nav_exclude -%}
+        {%- if node.parent == nil and node.title -%}
+          <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 = pages_list | where: "parent", node.title -%}
+              <ul class="navigation-list-child-list ">
+                {%- for child in children_list -%}
+                {%- unless child.nav_exclude -%}
+                  <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 = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
+                        <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>
+                {%- endunless -%}
+                {%- endfor -%}
+              </ul>
+            {%- endif -%}
+          </li>
+        {%- endif -%}
+      {%- endunless -%}
+    {%- endfor -%}
   </ul>
 </nav>

_includes/title.html

@@ -0,0 +1,5 @@
+{% if site.logo %}
+  <div class="site-logo"></div>
+{% else %}
+  {{ site.title }}
+{% endif %}

_includes/vendor/anchor_headings.html

@@ -0,0 +1,100 @@
+{% capture headingsWorkspace %}
+  {% comment %}
+    Version 1.0.3
+      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 %}
+
+    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
+      * 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
+      * h_min         (int)    :  1     - The minimum header level to build an anchor for; any header lower than this value will be ignored
+      * h_max         (int)    :  6     - The maximum header level to build an anchor for; any header greater than this value will be ignored
+      * bodyPrefix    (string) :  ''    - Anything that should be inserted inside of the heading tag _before_ its anchor and content
+      * bodySuffix    (string) :  ''    - Anything that should be inserted inside of the heading tag _after_ its anchor and content
+
+    Output:
+      The original HTML with the addition of anchors inside of all of the h1-h6 headings.
+  {% endcomment %}
+
+  {% assign minHeader = include.h_min | default: 1 %}
+  {% assign maxHeader = include.h_max | default: 6 %}
+  {% assign beforeHeading = include.beforeHeading %}
+  {% assign nodes = include.html | split: '<h' %}
+
+  {% capture edited_headings %}{% endcapture %}
+
+  {% for _node in nodes %}
+    {% capture node %}{{ _node | strip }}{% endcapture %}
+
+    {% if node == "" %}
+      {% continue %}
+    {% endif %}
+
+    {% 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 headerLevel == 0 %}
+      {% if nextChar != '<' and nextChar != '' %}
+        {% capture node %}<h{{ node }}{% endcapture %}
+      {% endif %}
+
+      {% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _workspace = node | split: '</h' %}
+    {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+    {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+    {% assign html_id = _idWorkspace[0] %}
+
+    {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+    {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+    <!-- Build the anchor to inject for our heading -->
+    {% capture anchor %}{% endcapture %}
+
+    {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
+      {% capture anchor %}href="#{{ html_id}}"{% endcapture %}
+
+      {% if include.anchorClass %}
+        {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
+      {% endif %}
+
+      {% if include.anchorTitle %}
+        {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% 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 -->
+      {% if beforeHeading %}
+        {% capture anchor %}{{ anchor }} {% endcapture %}
+      {% else %}
+        {% capture anchor %} {{ anchor }}{% endcapture %}
+      {% endif %}
+    {% endif %}
+
+    {% capture new_heading %}
+      <h{{ _hAttrToStrip }}
+        {{ include.bodyPrefix }}
+        {% if beforeHeading %}
+          {{ anchor }}{{ header }}
+        {% else %}
+          {{ header }}{{ anchor }}
+        {% endif %}
+        {{ include.bodySuffix }}
+      </h{{ _workspace | last }}
+    {% endcapture %}
+    {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
+  {% endfor %}
+{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

_layouts/default.html

@@ -1,68 +1,139 @@
+---
+layout: table_wrappers
+---
+
 <!DOCTYPE html>
 
-<html lang="en-us">
+<html lang="{{ site.lang | default: "en-US" }}">
 {% include head.html %}
+<body>
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="link" viewBox="0 0 16 16">
+      <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>
+    </symbol>
+  </svg>
 
   <div class="page-wrap">
     <div class="side-bar">
-      <a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
-      <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
+      <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 role="contentinfo" class="site-footer">
-        <p class="text-small text-grey-dk-000 mb-0">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
+      <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>
-    <div class="main-content-wrap">
-      <div class="page-header">
-        <div class="main-content pb-0">
-          <div class="search js-search">
+    <div class="main-content-wrap js-main-content" tabindex="0">
+      <div class="main-content" id="top">
+        <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" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+              <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 mt-md-2 pb-4 pb-md-0 js-aux-nav aux-nav">
+            <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>
+                <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
+                  <a href="{{ link.last }}"
+                    {% if site.aux_links_new_tab %}
+                    target="_blank" rel="noopener noreferrer"
+                    {% endif %}
+                  >
+                    {{ link.first }}
+                  </a>
+                </li>
               {% endfor %}
             </ul>
           {% endif %}
         </div>
-      </div>
-      <div class="main-content">
-        {% unless page.url == "/" %}
-          {% if page.parent != nil and page.parent != page.title %}
-            <nav class="breadcrumb-nav">
-              <ol class="breadcrumb-nav-list">
-                <li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
-                <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
-              </ol>
-            </nav>
-          {% endif %}
-        {% endunless %}
-        <div class="page-content">
-          {{ content }}
+        <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" %}
+            {% else %}
+              {{ content }}
+            {% endif %}
 
-          {% if page.has_children == true %}
-          <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>
-              </li>
-              {% endif %}
-            {% endfor %}
-          </ul>
+          {% if page.has_children == true and page.has_toc != false %}
+            <hr>
+            <h2 class="text-delta">Table of contents</h2>
+            <ul>
+              {%- assign children_list = pages_list | where: "parent", node.title -%}
+              {% for child in children_list %}
+                {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
+                <li>
+                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+                </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
           {% endif %}
+
+          {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
+            <hr>
+            <footer>
+              {% if site.back_to_top %}
+              <p><a href="#top">{{ site.back_to_top_text }}</a></p>
+              {% endif %}
+              {% if site.footer_content != nil %}
+              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
+              {% endif %}
+
+              {% 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 %}
+                  {%
+                  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 }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
+                  </p>
+                  {% endif %}
+                </div>
+              {% endif %}
+
+            </footer>
+          {% endif %}
+
         </div>
       </div>
     </div>
   </div>
+
+</body>
 </html>

_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

_layouts/table_wrappers.html

@@ -0,0 +1,7 @@
+---
+layout: vendor/compress
+---
+
+{% assign content_ = content | replace: '<table', '<div class="table-wrapper"><table' %}
+{% assign content_ = content_ | replace: '</table>', '</table></div>' %}
+{{ content_ }}

_layouts/vendor/compress.html

@@ -0,0 +1,10 @@
+---
+# Jekyll layout that compresses HTML
+# v3.1.0
+# http://jch.penibelst.de/
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

_sass/base.scss

@@ -1,14 +1,20 @@
 //
 // Base element style overrides
 //
-// stylelint-disable selector-no-type
+// stylelint-disable selector-no-type, selector-max-type
 
 * {
   box-sizing: border-box;
 }
 
+::selection {
+  color: $white;
+  background: $link-color;
+}
+
 html {
   @include fs-4;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -16,27 +22,21 @@ body {
   font-size: inherit;
   line-height: $body-line-height;
   color: $body-text-color;
+  background-color: $body-background-color;
 }
 
-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;
 }
 
@@ -46,14 +46,15 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.8em;
+  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;
 }
 
@@ -64,25 +65,28 @@ a {
 
 a:not([class]) {
   text-decoration: none;
-  background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
+  background-image: linear-gradient($border-color 0%, $border-color 100%);
   background-repeat: repeat-x;
   background-position: 0 100%;
   background-size: 1px 1px;
 
   &:hover {
-    background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
+    background-image: linear-gradient(
+      rgba($link-color, 0.45) 0%,
+      rgba($link-color, 0.45) 100%
+    );
     background-size: 1px 1px;
-
   }
 }
 
 code {
   font-family: $mono-font-family;
-  font-size: 12px;
+  font-size: 0.75em;
   line-height: $body-line-height;
 }
 
-figure {
+figure,
+pre {
   margin: 0;
 }
 
@@ -99,6 +103,6 @@ hr {
   height: 1px;
   padding: 0;
   margin: $sp-6 0;
-  background-color: $grey-lt-100;
+  background-color: $border-color;
   border: 0;
 }

_sass/buttons.scss

@@ -15,13 +15,13 @@
   font-size: inherit;
   font-weight: 500;
   line-height: 1.5;
-  color: $purple-200;
+  color: $link-color;
   text-decoration: none;
   vertical-align: baseline;
   cursor: pointer;
-  background-color: #f7f7f7;
+  background-color: $base-button-color;
   border-width: 0;
-  border-radius: 3px;
+  border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
   appearance: none;
 
@@ -38,7 +38,7 @@
 
   &:hover,
   &.zeroclipboard-is-hover {
-    color: $purple-300;
+    color: darken($link-color, 2%);
   }
 
   &:hover,
@@ -46,13 +46,13 @@
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
     text-decoration: none;
-    background-color: #f4f4f4;
+    background-color: darken($base-button-color, 1%);
   }
 
   &:active,
   &.selected,
   &.zeroclipboard-is-active {
-    background-color: #ededed;
+    background-color: darken($base-button-color, 3%);
     background-image: none;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
   }
@@ -75,7 +75,7 @@
 }
 
 .btn-outline {
-  color: $blue-100;
+  color: $link-color;
   background: transparent;
   box-shadow: inset 0 0 0 2px $grey-lt-300;
 
@@ -83,7 +83,7 @@
   &:active,
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
-    color: $grey-dk-100;
+    color: darken($link-color, 4%);
     text-decoration: none;
     background-color: transparent;
     box-shadow: inset 0 0 0 3px $grey-lt-300;
@@ -101,6 +101,10 @@
   }
 }
 
+.btn-primary {
+  @include btn-color($white, $btn-primary-color);
+}
+
 .btn-purple {
   @include btn-color($white, $purple-100);
 }

_sass/code.scss

@@ -1,20 +1,23 @@
 //
 // Code and syntax highlighting
 //
-// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type
+// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type
 
 code {
   padding: 0.2em 0.15em;
   font-weight: 400;
-  background-color: $grey-lt-000;
+  background-color: $code-background-color;
   border: $border $border-color;
   border-radius: $border-radius;
 }
 
-.highlight {
+pre.highlight,
+figure.highlight {
   padding: $sp-3;
+  margin-top: 0;
   margin-bottom: 0;
-  background-color: $grey-lt-000;
+  -webkit-overflow-scrolling: touch;
+  background-color: $code-background-color;
 
   code {
     padding: 0;
@@ -28,74 +31,212 @@ code {
   border-radius: $border-radius;
 }
 
-.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: #93a1a1; } // 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: #93a1a1; } // 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 //
+.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 //
 
 //
 // Code examples (rendered)
@@ -104,7 +245,7 @@ code {
 .code-example {
   padding: $sp-3;
   margin-bottom: $sp-3;
-  overflow: scroll;
+  overflow: auto;
   border: 1px solid $border-color;
   border-radius: $border-radius;
 

_sass/color_schemes/dark.scss

@@ -0,0 +1,16 @@
+$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;

_sass/content.scss

@@ -1,25 +1,51 @@
+@charset "UTF-8";
+
 //
 // Styles for rendered markdown in the .main-content container
 //
-// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
 
 .page-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,
   ol {
     padding-left: 1.5em;
   }
 
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
   ol {
     list-style-type: none;
     counter-reset: step-counter;
 
-    li {
+    > li {
       position: relative;
 
       &::before {
         position: absolute;
         top: 0.2em;
-        left: -1.5em;
+        left: -1.6em;
         color: $grey-dk-000;
         content: counter(step-counter);
         counter-increment: step-counter;
@@ -46,16 +72,33 @@
   ul {
     list-style: none;
 
-    li {
+    > li {
       &::before {
         position: absolute;
-        margin-left: -1.5em;
+        margin-left: -1.4em;
         color: $grey-dk-000;
         content: "•";
       }
     }
   }
 
+  .task-list {
+    padding-left: 0;
+  }
+
+  .task-list-item {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: "";
+    }
+  }
+
+  .task-list-item-checkbox {
+    margin-right: 0.6em;
+  }
+
   hr + * {
     margin-top: 0;
   }
@@ -86,4 +129,65 @@
     margin-left: 1em;
     font-weight: 500;
   }
+
+  .anchor-heading {
+    position: absolute;
+    right: -$sp-4;
+    width: $sp-5;
+    height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
+    overflow: visible;
+
+    @include mq(md) {
+      right: auto;
+      left: -$sp-5;
+    }
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      fill: $link-color;
+      visibility: hidden;
+    }
+  }
+
+  .anchor-heading:hover,
+  h1:hover > .anchor-heading,
+  h2:hover > .anchor-heading,
+  h3:hover > .anchor-heading,
+  h4:hover > .anchor-heading,
+  h5:hover > .anchor-heading,
+  h6:hover > .anchor-heading {
+    svg {
+      visibility: visible;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    margin-top: 1.5em;
+    margin-bottom: 0.25em;
+
+    &:first-child {
+      margin-top: $sp-2;
+    }
+
+    + table,
+    + .table-wrapper,
+    + .code-example,
+    + .highlighter-rouge {
+      margin-top: 1em;
+    }
+
+    + p {
+      margin-top: 0;
+    }
+  }
 }

_sass/custom/custom.scss

@@ -1,112 +0,0 @@
-// //
-// // 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;
-// $body-heading-line-height: 1.15;
-//
-// //
-// // Colors
-// //
-//
-// $white: #fff;
-//
-// $grey-dk-000: #959396;
-// $grey-dk-100: #5c5962;
-// $grey-dk-200: #44434d;
-// $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;
-//
-// $body-text-color: $grey-dk-100;
-// $body-heading-color: $grey-dk-300;
-// $link-color: $purple-000;
-//
-// //
-// // Media queries in pixels
-// //
-//
-// $media-queries: (
-//   xs: 320px,
-//   sm: 500px,
-//   md: 740px,
-//   lg: 1120px,
-//   xl: 1400px
-// );
-//
-// //
-// // 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: 232px;
-// $content-width: 800px;
-//
-// $media-queries: (
-//   xs: 320px,
-//   sm: 500px,
-//   md: 740px,
-//   lg: 800px,
-//   xl: 1316px
-// );

_sass/labels.scss

@@ -6,16 +6,17 @@
 .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;
-  text-transform: uppercase;
   @include fs-2;
+  border-radius: 12px;
 }
 
 .label-green {

_sass/layout.scss

@@ -19,17 +19,13 @@
   z-index: 100;
   display: flex;
   flex-wrap: wrap;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
-  background-color: $grey-lt-000;
+  background-color: $sidebar-color;
 
   @include mq(md) {
     flex-wrap: nowrap;
     position: absolute;
-    width: $nav-width + 16px;
+    width: $nav-width-md;
     height: 100%;
-    padding-top: $gutter-spacing * 2;
-    padding-bottom: 0;
     flex-direction: column;
     border-right: $border $border-color;
     align-items: flex-end;
@@ -48,7 +44,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    min-height: 600px;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -56,65 +51,138 @@
 }
 
 .main-content {
-  padding-top: $gutter-spacing-sm;
-  @include container;
-
   @include mq(md) {
     position: relative;
     max-width: $content-width;
-    padding-top: $gutter-spacing;
-    padding-bottom: $gutter-spacing;
-    padding-left: $gutter-spacing * 1.5;
-    margin-left: $nav-width;
+    margin-left: $nav-width-md;
   }
 
   @include mq(lg) {
-    padding-left: $gutter-spacing;
-    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 {
+  @include container;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+
+  @include mq(md) {
+    padding-top: $gutter-spacing;
+    padding-bottom: $gutter-spacing;
   }
 }
 
 .page-header {
-  background-color: $grey-lt-000;
+  @include container;
+  display: none;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
+  background-color: $sidebar-color;
 
   @include mq(md) {
-    background-color: $white;
+    display: flex;
+    justify-content: flex-end;
+    height: $header-height;
+    background-color: $body-background-color;
     border-bottom: $border $border-color;
-
   }
 
-  .main-content {
-    padding-top: 0;
+  &.nav-open {
+    display: block;
 
     @include mq(md) {
       display: flex;
-      justify-content: space-between;
-      padding-top: $sp-4;
     }
   }
 }
 
 .navigation,
-.site-title,
+.site-header,
 .site-footer {
-
-  @include container;
-
   width: 100%;
 
   @include mq(lg) {
-    width: $nav-width + 32px;
+    width: $nav-width;
   }
 }
 
 .navigation {
+  @include container;
+
   @include mq(md) {
     padding-top: $sp-8;
+    padding-bottom: $gutter-spacing-sm;
     overflow-y: auto;
     flex: 1 1 auto;
   }
 }
 
+.site-header {
+  display: flex;
+  min-height: $header-height;
+  align-items: center;
+
+  @include mq(md) {
+    z-index: 101;
+    height: $header-height;
+    max-height: $header-height;
+    border-bottom: $border $border-color;
+  }
+}
+
+.site-title {
+  @include container;
+  flex-grow: 1;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-top: $sp-3;
+  padding-bottom: $sp-3;
+  color: $body-heading-color;
+  @include fs-6;
+
+  @include mq(md) {
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+  }
+}
+
+@if variable-exists(logo) {
+  .site-logo {
+    width: 100%;
+    height: 100%;
+    background-image: url($logo);
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: contain;
+  }
+}
+
+.menu-button {
+  appearance: none;
+  display: flex;
+  height: 100%;
+  padding: $gutter-spacing-sm;
+  align-items: center;
+  color: $link-color;
+  text-transform: uppercase;
+  background: transparent;
+  border: 0;
+
+  @include mq(md) {
+    display: none;
+  }
+}
+
+// stylelint-disable selector-max-type
+
 body {
   position: relative;
   padding-bottom: $sp-10;
@@ -125,16 +193,18 @@ body {
   }
 }
 
+// stylelint-enable selector-max-type
+
 .site-footer {
+  @include container;
   position: absolute;
   bottom: 0;
+  left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
 
   @include mq(md) {
     position: static;
-    align-self: flex-end;
     justify-self: end;
-    background-color: $grey-lt-000;
   }
 }

_sass/modules.scss

@@ -0,0 +1,19 @@
+//
+// Import external dependencies
+//
+@import "./vendor/normalize.scss/normalize.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";

_sass/navigation.scss

@@ -1,32 +1,11 @@
 //
 // Main nav, breadcrumb, etc...
 //
-
-.site-title {
-  display: block;
-  flex: 1 1 auto;
-  background-color: $grey-lt-000;
-
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 60px;
-    padding-top: $sp-4;
-    z-index: 101;
-    box-shadow: inset 0 -1px 0 $border-color;
-  }
-}
-
 .navigation-list {
   padding: 0;
-  margin-top: $sp-4;
+  margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-
-  @include mq(md) {
-    margin-top: 0;
-  }
 }
 
 .navigation-list-child-list {
@@ -34,21 +13,23 @@
   list-style: none;
 
   .navigation-list-link {
-    color: $grey-dk-100;
+    color: $nav-child-link-color;
   }
 
   .navigation-list-item {
+    position: relative;
+
     &::before {
       position: absolute;
       margin-top: 0.3em;
       margin-left: -0.8em;
-      color: $grey-dk-000;
+      color: rgba($body-text-color, 0.3);
       content: "- ";
     }
 
     &.active {
       &::before {
-        color: $grey-dk-100;
+        color: $body-text-color;
       }
     }
   }
@@ -61,6 +42,16 @@
   @include mq(md) {
     @include fs-3;
   }
+
+  .navigation-list-child-list {
+    display: none;
+  }
+
+  &.active {
+    .navigation-list-child-list {
+      display: block;
+    }
+  }
 }
 
 .navigation-list-link {
@@ -70,15 +61,14 @@
 
   &.active {
     font-weight: 600;
-    color: $grey-dk-200;
+    color: $body-heading-color;
     text-decoration: none;
   }
 }
 
 // Small screen nav
 
-.main-nav,
-.aux-nav {
+.main-nav {
   display: none;
 
   &.nav-open {
@@ -89,17 +79,16 @@
   }
 }
 
-
-.navigation-list-toggle {
-  position: absolute;
-  right: $sp-4;
-
-  @include mq(md) {
-    display: none !important;
-  }
+.aux-nav {
+  align-self: center;
 }
 
 // Breadcrumb nav
+.breadcrumb-nav {
+  @include mq(md) {
+    margin-top: -$sp-4;
+  }
+}
 
 .breadcrumb-nav-list {
   padding-left: 0;

_sass/search.scss

@@ -5,77 +5,59 @@
 .search {
   position: relative;
   z-index: 99;
-  display: none;
   flex-grow: 1;
-  padding: $sp-2;
+  height: 100%;
   margin-bottom: $sp-3;
-  background-color: $white;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
 
   @include mq(md) {
-    display: block;
-    padding-top: $sp-1;
-    padding-right: 0;
-    padding-bottom: $sp-4;
-    padding-left: 0;
     margin-bottom: 0;
-    background-color: transparent;
-    box-shadow: none;
-  }
-
-  &.nav-open {
-    display: block;
-  }
-}
-
-.search-results-wrap {
-  display: none;
-
-  &.active {
-    position: absolute;
-    top: $sp-1;
-    z-index: 100;
-    display: block;
-    width: 300px;
-    margin-top: $gutter-spacing;
-    background: $white;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
   }
 }
 
 .search-input-wrap {
   display: flex;
-  background-color: $white;
+  height: 100%;
+  padding: $sp-2;
+  background-color: $search-background-color;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+  @include mq(md) {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    background-color: $body-background-color;
+    border-radius: 0;
+    box-shadow: none;
+  }
 }
 
 .search-input {
+  align-self: center;
   width: 100%;
   padding-top: $sp-1;
   padding-bottom: $sp-1;
+  background-color: $search-background-color;
   border-top: 0;
   border-right: 0;
   border-bottom: 0;
   border-left: 0;
   order: 2;
+  @include fs-4;
 
   &:focus {
     outline: 0;
     box-shadow: none;
 
     + .search-icon {
-      fill: $purple-000;
+      fill: $link-color;
     }
   }
 
-  @include fs-5;
-
-  @include mq(sm) {
-    @include fs-3;
-  }
-
   @include mq(md) {
-    @include fs-2;
+    background-color: $body-background-color;
+    @include fs-3;
   }
 }
 
@@ -86,12 +68,34 @@
   order: 1;
 }
 
+.search-results-wrap {
+  position: absolute;
+  z-index: 100;
+  display: none;
+  width: 100%;
+  background: $search-background-color;
+  border-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) {
+    width: $search-results-width;
+  }
+}
+
 .search-results-list {
   padding-left: 0;
   margin-top: $sp-1;
   margin-bottom: $sp-1;
   list-style: none;
-  @include fs-3;
+  @include fs-4;
+
+  @include mq(md) {
+    @include fs-3;
+  }
 }
 
 .search-results-list-item {
@@ -99,14 +103,65 @@
   margin: 0;
 }
 
-.search-results-link {
+.search-result {
   display: block;
   padding-top: $sp-1;
   padding-right: $sp-3;
   padding-bottom: $sp-1;
   padding-left: $sp-3;
 
-  &:hover {
-    background-color: $grey-lt-000;
+  &:hover,
+  &.active {
+    background-color: $sidebar-color;
+  }
+
+  @include mq(md) {
+    padding-right: $sp-4;
+    padding-left: $sp-4;
   }
 }
+
+.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;
+    vertical-align: top;
+  }
+}
+
+.search-result-rel-url {
+  display: block;
+  overflow: hidden;
+  color: $search-result-preview-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include fs-1;
+}
+
+.search-result-preview {
+  display: block;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+  padding-left: $sp-4;
+  color: $search-result-preview-color;
+  border-left: $border;
+  border-left-color: $border-color;
+  @include fs-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
+  }
+}
+
+.search-result-highlight {
+  font-weight: bold;
+  color: $link-color;
+}

_sass/support/_functions.scss

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

_sass/support/_variables.scss

@@ -2,11 +2,13 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$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
+$root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
-$body-heading-line-height: 1.15 !default !default;
+$content-line-height: 1.6 !default;
+$body-heading-line-height: 1.25 !default;
 
 //
 // Colors
@@ -17,6 +19,7 @@ $white: #fff !default;
 $grey-dk-000: #959396 !default;
 $grey-dk-100: #5c5962 !default;
 $grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
 $grey-dk-300: #27262b !default;
 
 $grey-lt-000: #f5f6fa !default;
@@ -49,21 +52,19 @@ $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;
+
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
+$search-result-preview-color: $grey-dk-000 !default;
+$nav-child-link-color: $grey-dk-100 !default;
 $link-color: $purple-000 !default;
-
-//
-// Media queries in pixels
-//
-
-$media-queries: (
-  xs: 320px,
-  sm: 500px,
-  md: 740px,
-  lg: 1120px,
-  xl: 1400px
-) !default;
+$btn-primary-color: $purple-100 !default;
+$base-button-color: #f7f7f7 !default;
 
 //
 // Spacing
@@ -82,7 +83,7 @@ $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
@@ -110,13 +111,20 @@ $border-color: $grey-lt-100 !default;
 
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
-$nav-width: 232px !default;
+$nav-width: 264px !default;
+$nav-width-md: 248px !default;
 $content-width: 800px !default;
+$header-height: 60px !default;
+$search-results-width: 500px !default;
+
+//
+// Media queries in pixels
+//
 
 $media-queries: (
   xs: 320px,
   sm: 500px,
-  md: 740px,
-  lg: 800px,
-  xl: 1316px
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px,
 ) !default;

_sass/support/mixins/_layout.scss

@@ -17,18 +17,18 @@
     }
   } @else {
     @warn "No value could be retrieved from `#{$media-query}`. "
-        + "Please make sure it is defined in `$media-queries` map.";
+      + "Please make sure it is defined in `$media-queries` map.";
   }
 }
 
 // Responsive container
 
 @mixin container {
-  padding-left: $gutter-spacing-sm;
   padding-right: $gutter-spacing-sm;
+  padding-left: $gutter-spacing-sm;
 
   @include mq(md) {
-    padding-left: $gutter-spacing;
     padding-right: $gutter-spacing;
+    padding-left: $gutter-spacing;
   }
 }

_sass/support/mixins/_typography.scss

@@ -25,7 +25,7 @@
 }
 
 @mixin fs-4 {
-  font-size: 14px !important;
+  font-size: 15px !important;
 
   @include mq(sm) {
     font-size: 16px !important;
@@ -45,11 +45,13 @@
 
   @include mq(sm) {
     font-size: 24px !important;
+    line-height: $body-heading-line-height;
   }
 }
 
 @mixin fs-7 {
   font-size: 24px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 32px !important;
@@ -58,6 +60,7 @@
 
 @mixin fs-8 {
   font-size: 32px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 36px !important;
@@ -66,6 +69,7 @@
 
 @mixin fs-9 {
   font-size: 36px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 42px !important;
@@ -74,6 +78,7 @@
 
 @mixin fs-10 {
   font-size: 42px !important;
+  line-height: $body-heading-line-height;
 
   @include mq(sm) {
     font-size: 48px !important;

_sass/tables.scss

@@ -1,20 +1,22 @@
 //
 // Tables
 //
-// stylelint-disable max-nesting-depth, selector-no-type
+// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type
 
-table {
+.table-wrapper {
   display: block;
   width: 100%;
   max-width: 100%;
   margin-bottom: $sp-5;
   overflow-x: auto;
-  border-collapse: separate;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+}
 
-  @include mq(sm) {
-    display: table;
-  }
+table {
+  display: table;
+  min-width: 100%;
+  border-collapse: separate;
 }
 
 th,
@@ -25,7 +27,8 @@ td {
   padding-right: $sp-3;
   padding-bottom: $sp-2;
   padding-left: $sp-3;
-  border-bottom: $border $grey-lt-000;
+  background-color: $table-background-color;
+  border-bottom: $border rgba($border-color, 0.5);
   border-left: $border $border-color;
 
   &:first-of-type {
@@ -33,38 +36,16 @@ td {
   }
 }
 
-thead,
-tbody:first-child {
-  tr {
-    &:first-of-type {
-      th,
-      td {
-        &:first-of-type {
-          border-top-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-top-right-radius: $border-radius;
-        }
-      }
-    }
-  }
-}
-
 tbody {
   tr {
     &:last-of-type {
       th,
       td {
         border-bottom: 0;
+      }
 
-        &:first-of-type {
-          border-bottom-left-radius: $border-radius;
-        }
-
-        &:last-of-type {
-          border-bottom-right-radius: $border-radius;
-        }
+      td {
+        padding-bottom: $sp-3;
       }
     }
   }
@@ -72,6 +53,6 @@ tbody {
 
 thead {
   th {
-    border-bottom: 1px solid $border-color;
+    border-bottom: $border $border-color;
   }
 }

_sass/typography.scss

@@ -1,7 +1,7 @@
 //
 // Typography
 //
-// stylelint-disable primer/selector-no-utility, selector-no-type
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type
 
 h1,
 .text-alpha {
@@ -22,7 +22,7 @@ h3,
 h4,
 .text-delta {
   @include fs-2;
-  font-weight: 300;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
@@ -39,12 +39,6 @@ h6,
   color: $grey-dk-200;
 }
 
-li {
-  .highlight {
-    margin-top: $sp-2;
-  }
-}
-
 .text-small {
   @include fs-2;
 }
@@ -53,6 +47,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

@@ -16,6 +16,10 @@
   color: $grey-dk-200 !important;
 }
 
+.text-grey-dk-250 {
+  color: $grey-dk-250 !important;
+}
+
 .text-grey-dk-300 {
   color: $grey-dk-300 !important;
 }
@@ -130,6 +134,10 @@
   background-color: $grey-dk-200 !important;
 }
 
+.bg-grey-dk-250 {
+  background-color: $grey-dk-250 !important;
+}
+
 .bg-grey-dk-300 {
   background-color: $grey-dk-300 !important;
 }

_sass/utilities/_layout.scss

@@ -1,15 +1,25 @@
-// stylelint-disable primer/selector-no-utility
+// 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 +28,68 @@
       $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

@@ -2,10 +2,16 @@
 // Utility classes for lists
 //
 
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type
 
 .list-style-none {
   padding: 0 !important;
   margin: 0 !important;
   list-style: none !important;
+
+  li {
+    &::before {
+      display: none !important;
+    }
+  }
 }

_sass/utilities/_spacing.scss

@@ -3,20 +3,35 @@
 //
 
 // scss-lint:disable SpaceAfterPropertyName
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility, primer/no-override
 
 // 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 +47,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 +60,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 +101,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 +135,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

@@ -2,7 +2,7 @@
 // Utility classes for typography
 //
 
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override
 
 .fs-1 {
   @include fs-1;

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,33 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-//
-// Import dependancies
-//
-
-@import "./normalize.scss/normalize.scss";
-
-//
-// Import Just the docs scss
-//
-
-// Support
-@import "./support/support";
-
-// Custom overrides
-@import "./custom/custom";
-
-// Modules
-@import "./base";
-@import "./layout";
-@import "./content";
-@import "./navigation";
-@import "./typography";
-@import "./labels";
-@import "./buttons";
-@import "./search";
-@import "./tables";
-@import "./code";
-@import "./utilities/utilities";

assets/js/just-the-docs.js

@@ -1,28 +1,41 @@
+---
+---
+(function (jtd, undefined) {
+
 // Event handling
 
-function addEvent(el, type, handler) {
-    if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
+jtd.addEvent = function(el, type, handler) {
+  if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
 }
-function removeEvent(el, type, handler) {
-    if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
+jtd.removeEvent = function(el, type, handler) {
+  if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
+}
+jtd.onReady = function(ready) {
+  // in case the document is already rendered
+  if (document.readyState!='loading') ready();
+  // modern browsers
+  else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
+  // IE <= 8
+  else document.attachEvent('onreadystatechange', function(){
+      if (document.readyState=='complete') ready();
+  });
 }
 
 // Show/hide mobile menu
 
-function toggleNav(){
-  const nav = document.querySelector('.js-main-nav');
-  const auxNav = document.querySelector('.js-aux-nav');
+function initNav() {
+  const mainNav = document.querySelector('.js-main-nav');
+  const pageHeader = document.querySelector('.js-page-header');
   const navTrigger = document.querySelector('.js-main-nav-trigger');
-  const search = document.querySelector('.js-search');
 
-  addEvent(navTrigger, 'click', function(){
+  jtd.addEvent(navTrigger, 'click', function(e){
+    e.preventDefault();
     var text = navTrigger.innerText;
     var textToggle = navTrigger.getAttribute('data-text-toggle');
 
-    nav.classList.toggle('nav-open');
-    auxNav.classList.toggle('nav-open');
+    mainNav.classList.toggle('nav-open');
+    pageHeader.classList.toggle('nav-open');
     navTrigger.classList.toggle('nav-open');
-    search.classList.toggle('nav-open');
     navTrigger.innerText = textToggle;
     navTrigger.setAttribute('data-text-toggle', text);
     textToggle = text;
@@ -32,137 +45,269 @@ function toggleNav(){
 // Site search
 
 function initSearch() {
-  var index = lunr(function () {
-    this.ref('id');
-    this.field('title', { boost: 20 });
-    this.field('content', { boost: 10 });
-    this.field('url');
-  });
-
-  // Get the generated search_data.json file so lunr.js can search it locally.
-
-  sc = document.getElementsByTagName("script");
-  source = '';
-
-  for(idx = 0; idx < sc.length; idx++)
-  {
-    s = sc.item(idx);
-
-    if(s.src && s.src.match(/just-the-docs\.js$/))
-    { source = s.src; }
-  }
-
-  jsPath = source.replace('just-the-docs.js', '');
-
-  jsonPath = jsPath + '/search-data.json';
-
   var request = new XMLHttpRequest();
-  request.open('GET', jsonPath, true);
+  request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
 
-  request.onload = function() {
+  request.onload = function(){
     if (request.status >= 200 && request.status < 400) {
       // Success!
       var data = JSON.parse(request.responseText);
-      var keys = Object.keys(data);
       
-      for(var i in data) {
-        index.add({
-          id: data[i].id,
-          title: data[i].title,
-          content: data[i].content,
-          url: data[i].url
-        });
-      }
-      searchResults(data);
+      {% if site.search_tokenizer_separator != nil %}
+      lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
+      {% else %}
+      lunr.tokenizer.separator = /[\s\-/]+/
+      {% endif %}
+      
+      var index = lunr(function () {
+        this.ref('id');
+        this.field('title', { boost: 200 });
+        this.field('content', { boost: 2 });
+        this.field('url');
+        this.metadataWhitelist = ['position']
+
+        for (var i in data) {
+          this.add({
+            id: i,
+            title: data[i].title,
+            content: data[i].content,
+            url: data[i].url
+          });
+        }
+      });
+
+      searchResults(index, data);
     } else {
       // We reached our target server, but it returned an error
       console.log('Error loading ajax request. Request status:' + request.status);
     }
   };
 
-  request.onerror = function() {
+  request.onerror = function(){
     // There was a connection error of some sort
     console.log('There was a connection error');
   };
 
   request.send();
 
-  function searchResults(dataStore) {
+  function searchResults(index, data) {
+    var index = index;
+    var docs = data;
     var searchInput = document.querySelector('.js-search-input');
     var searchResults = document.querySelector('.js-search-results');
-    var store = dataStore;
 
     function hideResults() {
       searchResults.innerHTML = '';
       searchResults.classList.remove('active');
     }
 
-    addEvent(searchInput, 'keyup', function(e){
-      var query = this.value;
-
-      searchResults.innerHTML = '';
-      searchResults.classList.remove('active');
-
-      if (query === '') {
-        hideResults();
-      } else {
-        var results = index.search(query);
-
-        if (results.length > 1) {
-          searchResults.classList.add('active');
-          var resultsList = document.createElement('ul');
-          searchResults.appendChild(resultsList);
-
-          for (var i in results) {
-            var resultsListItem = document.createElement('li');
-            var resultsLink = document.createElement('a');
-            var resultsUrlDesc = document.createElement('span');
-            var resultsUrl = store[results[i].ref].url;
-            var resultsRelUrl = store[results[i].ref].relUrl;
-            var resultsTitle = store[results[i].ref].title;
-
-            resultsLink.setAttribute('href', resultsUrl);
-            resultsLink.innerText = resultsTitle;
-            resultsUrlDesc.innerText = resultsRelUrl;
-
-            resultsList.classList.add('search-results-list');
-            resultsListItem.classList.add('search-results-list-item');
-            resultsLink.classList.add('search-results-link');
-            resultsUrlDesc.classList.add('fs-2','text-grey-dk-000','d-block');
-
-            resultsList.appendChild(resultsListItem);
-            resultsListItem.appendChild(resultsLink);
-            resultsLink.appendChild(resultsUrlDesc);
+    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;
+      }
+    });
 
-        // When esc key is pressed, hide the results and clear the field
-        if (e.keyCode == 27) {
+    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;
+      }
+
+      hideResults();
+
+      var input = this.value;
+      if (input === '') {
+        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
+        });
+      });
+
+      if (results.length > 0) {
+        searchResults.classList.add('active');
+        var resultsList = document.createElement('ul');
+        resultsList.classList.add('search-results-list');
+        searchResults.appendChild(resultsList);
+
+        for (var i in results) {
+          var result = results[i];
+          var doc = docs[result.ref];
+
+          var resultsListItem = document.createElement('li');
+          resultsListItem.classList.add('search-results-list-item');
+          resultsList.appendChild(resultsListItem);
+
+          var resultLink = document.createElement('a');
+          resultLink.classList.add('search-result');
+          resultLink.setAttribute('href', doc.url);
+          resultsListItem.appendChild(resultLink);
+
+          var resultTitle = document.createElement('div');
+          resultTitle.classList.add('search-result-title');
+          resultTitle.innerText = doc.title;
+          resultLink.appendChild(resultTitle);
+
+          var resultRelUrl = document.createElement('span');
+          resultRelUrl.classList.add('search-result-rel-url');
+          resultRelUrl.innerText = doc.relUrl;
+          resultTitle.appendChild(resultRelUrl);
+
+          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;
+              }
+              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;
+              }
+              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);
+            }
+          }
         }
       }
     });
 
-    addEvent(searchInput, 'blur', function(){
+    jtd.addEvent(searchInput, 'blur', function(){
       setTimeout(function(){ hideResults() }, 300);
     });
   }
 }
 
+// Focus
+
+function pageFocus() {
+  var mainContent = document.querySelector('.js-main-content');
+  mainContent.focus();
+}
+
+// Switch theme
+
+jtd.getTheme = function() {
+  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
+}
+
+jtd.setTheme = function(theme) {
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css');
+}
 
 // Document ready
 
-function ready(){
-  toggleNav();
-  initSearch();
-}
-
-// in case the document is already rendered
-if (document.readyState!='loading') ready();
-// modern browsers
-else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
-// IE <= 8
-else document.attachEvent('onreadystatechange', function(){
-    if (document.readyState=='complete') ready();
+jtd.onReady(function(){
+  initNav();
+  pageFocus();
+  if (typeof lunr !== 'undefined') {
+    initSearch();
+  }
 });
+
+})(window.jtd = window.jtd || {});
+
+{% include js/custom.js %}

assets/js/search-data.json

@@ -1,12 +1,12 @@
 ---
 ---
 {
-  {% for page in site.html_pages %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
-    "title": "{{ page.title | xml_escape }}",
-    "content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\', ' ' }}",
-    "url": "{{ page.url | absolute_url | xml_escape }}",
-    "relUrl": "{{ page.url | xml_escape }}"
-  }{% if forloop.last %}{% else %},
+  {% 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 %}
 }

bin/just-the-docs

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 gem_dir = File.expand_path("..",File.dirname(__FILE__))
-$LOAD_PATH.unshift gem_dir# Look in gem directory for resources first.
+$LOAD_PATH.unshift gem_dir # Look in gem directory for resources first.
 exec_type = ARGV[0]
 
 if exec_type == 'rake' then

docs/configuration.md

@@ -0,0 +1,121 @@
+---
+layout: default
+title: Configuration
+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.
+{: .fs-6 .fw-300 }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+
+View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
+
+## Site logo
+
+```yaml
+# Set a path/url to a logo that will be displayed instead of the title
+logo: "/assets/images/just-the-docs.png"
+```
+
+## Search
+
+```yaml
+# Enable or disable the site search
+# Supports true (default) or false
+search_enabled: true
+
+# Enable support for hyphenated search words:
+search_tokenizer_separator: /[\s/]+/
+```
+
+## Aux links
+
+```yaml
+# Aux links for the upper right navigation
+aux_links:
+  "Just the Docs on GitHub":
+    - "//github.com/pmarsceill/just-the-docs"
+
+# Makes Aux links open in a new tab. Default is false
+aux_links_new_tab: false
+```
+
+## Heading anchor links
+
+```yaml
+# 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
+heading_anchors: true
+```
+
+## 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 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/pmarsceill/just-the-docs" # the github URL for your repo
+gh_edit_branch: "master" # the branch that your docs is served from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
+```
+
+- 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 `master`
+- `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 supports "light" (default) and "dark"
+color_scheme: dark
+```
+<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>
+
+See [Customization]({{ site.baseurl }}{% link docs/customization.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)
+```

docs/customization.md

@@ -1,11 +1,11 @@
 ---
 layout: default
 title: Customization
-nav_order: 5
+nav_order: 6
 ---
 
 # Customization
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -15,30 +15,101 @@ nav_order: 5
 
 ---
 
-## Visual customization
+## Color schemes
+{: .d-inline-block }
 
-To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value.
+New
+{: .label .label-green }
 
-For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the link color variable on line `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
+Just the Docs supports two color schemes: light (default), and dark.
+
+To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
+
+#### Example
+{: .no_toc }
+
+```yaml
+# Color scheme supports "light" (default) and "dark"
+color_scheme: dark
+```
+<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>
+
+## Custom schemes
+
+### 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.
+
+Available variables are listed in the [_variables.scss](https://github.com/pmarsceill/just-the-docs/tree/master/_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;
-//
-// ...
 ```
 
-_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail.
+_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.
+Please use scheme files.
 
----
+### Use a custom scheme
 
-## Themes
-{: .d-inline-block :}
+To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file:
+```yaml
+color_scheme: foo
+```
 
-Coming soon
-{: .label .label-yellow :}
+### Switchable custom scheme
 
-Hard at work on a dark theme, and more.
+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.
+
+#### Example
+{: .no_toc }
+
+```scss
+// Print-only styles.
+@media print {
+  .side-bar, .page-header { display: none; }
+  .main-content { max-width: auto; margin: 1em;}
+}
+```

docs/index-test.md

@@ -94,6 +94,30 @@ end
   - level 2 item
 - level 1 item
 
+### Nesting an ol in ul in an ol
+
+- level 1 item (ul)
+  1. level 2 item (ol)
+  1. level 2 item (ol)
+    - level 3 item (ul)
+    - level 3 item (ul)
+- level 1 item (ul)
+  1. level 2 item (ol)
+  1. level 2 item (ol)
+    - level 3 item (ul)
+    - level 3 item (ul)
+  1. level 4 item (ol)
+  1. level 4 item (ol)
+    - level 3 item (ul)
+    - level 3 item (ul)
+- level 1 item (ul)
+
+### And a task list
+
+- [ ] Hello, this is a TODO item
+- [ ] Hello, this is another TODO item
+- [x] Goodbye, this item is done
+
 ### Small image
 
 ![](https://assets-cdn.github.com/images/icons/emoji/octocat.png)

docs/navigation-structure.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Navigation Structure
-nav_order: 4
+nav_order: 5
 ---
 
 # Navigation Structure
@@ -17,15 +17,18 @@ nav_order: 4
 
 ## Main navigation
 
-The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (parent pages with children).
+The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (pages with children and grandchildren).
 
-### Top level pages
+By default, all pages will appear as top level pages in the main nav unless a parent page is defined (see [Pages with Children](#pages-with-children)).
 
-By default, all pages will appear as top level pages in the main nav.
+---
 
-### Ordering pages
+## Ordering pages
 
-To specify a page order, use the `nav_order` variable in your pages' YAML front matter.
+To specify a page order, use the `nav_order` parameter in your pages' YAML front matter.
+
+#### Example
+{: .no_toc }
 
 ```yaml
 ---
@@ -35,9 +38,35 @@ nav_order: 4
 ---
 ```
 
-### Pages with children
+The specified `nav_order` parameters on a site should be all integers or all strings.
+Pages without a `nav_order` parameter are ordered alphabetically by their `title`,
+and appear after the explicitly-ordered pages at each level.
+By default, all Capital letters are sorted before all lowercase letters;
+adding `nav_sort: case_insensitive` in the configuration file ignores case
+when sorting strings (but also sorts numbers lexicographically: `10` comes before `1`).
 
-Sometimes you will want to create a page with many children (a section). To accomplish this you need to a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like:
+---
+
+## Excluding pages
+
+For specific pages that you do not wish to include in the main navigation, e.g. a 404 page or a landing page, use the `nav_exclude: true` parameter in the YAML front matter for that page.
+
+#### Example
+{: .no_toc }
+
+```yaml
+---
+layout: default
+title: 404
+nav_exclude: true
+---
+```
+
+---
+
+## Pages with children
+
+Sometimes you will want to create a page with many children (a section). First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives us an organization like:
 
 ```
 +-- ..
@@ -45,7 +74,7 @@ Sometimes you will want to create a page with many children (a section). To acco
 |
 |-- docs
 |   |-- ui-components
-|   |   |-- ui-components.md  (parent page)
+|   |   |-- index.md  (parent page)
 |   |   |-- buttons.md
 |   |   |-- code.md
 |   |   |-- labels.md
@@ -53,7 +82,7 @@ Sometimes you will want to create a page with many children (a section). To acco
 |   |   +-- typography.md
 |   |
 |   |-- utilities
-|   |   |-- utilities.md (parent page)
+|   |   |-- index.md      (parent page)
 |   |   |-- color.md
 |   |   |-- layout.md
 |   |   |-- responsive-modifiers.md
@@ -66,51 +95,127 @@ Sometimes you will want to create a page with many children (a section). To acco
 +-- ..
 ```
 
-On the parent pages, add 3 YAML front matter variables:
--  `has_children: true` (tells us that this a parent page)
--  `parent: ` set this to the title of the parent page (in this case, it's this page's title)
--  `permalink: ` set this to the directory that the contains the pages
+On the parent pages, add this YAML front matter parameter:
+-  `has_children: true` (tells us that this is a parent page)
 
 #### Example
 {: .no_toc }
 
 ```yaml
+---
 layout: default
 title: UI Components
 nav_order: 2
 has_children: true
-parent: UI Components
-permalink: /ui-components
+---
 ```
 
-Here we're setting up the UI Components landing page that is available at `/ui-components`, has children and is ordered second in the main nav.
+Here we're setting up the UI Components landing page that is available at `/docs/ui-components`, 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).
 
 #### Example
 {: .no_toc }
+
 ```yaml
+---
 layout: default
 title: Buttons
 parent: UI Components
 nav_order: 2
+---
 ```
 
-The Buttons page appears a child of UI Components and appears second in the UI Components section.
+The Buttons page appears as a child of UI Components and appears second in the UI Components section.
+
+### 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.
+
+#### Example
+{: .no_toc }
+
+```yaml
+---
+layout: default
+title: UI Components
+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.
+
+1. Add the `has_children` attribute to the child
+1. Add the `parent` and `grand_parent` attribute to the grandchild
+
+#### Example
+{: .no_toc }
+
+```yaml
+---
+layout: default
+title: Buttons
+parent: UI Components
+nav_order: 2
+has_children: true
+---
+```
+
+```yaml
+---
+layout: default
+title: Buttons Child Page
+parent: Buttons
+grand_parent: UI Components
+nav_order: 1
+---
+```
+
+This would create the following navigation structure:
+
+```
++-- ..
+|
+|-- UI Components
+|   |-- ..
+|   |
+|   |-- Buttons
+|   |   |-- Button Child Page
+|   |
+|   |-- ..
+|
++-- ..
+```
 
 ---
 
-## Breadcrumbs
+## Auxiliary Links
 
-Breadcrumbs are auto generated based on the parent/child structure and the directory structure for the site. In order for breadcrumbs to work correctly for pages children, the URL structure must be the slugified version of the parent page's title. For example, the page UI Components, must use the `/ui-components` directory to house its descendant pages.
+To add 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 }
+
+```yaml
+# Aux links for the upper right navigation
+aux_links:
+  "Just the Docs on GitHub":
+    - "//github.com/pmarsceill/just-the-docs"
+```
 
 ---
 
 ## In-page navigation with Table of Contents
 
-To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in markdown. This will automatically generate an ordered list of anchor links to various sections of page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, to skip a particular heading use the `{: .no_toc }` CSS class.
+To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in Markdown. This will automatically generate an ordered list of anchor links to various sections of the page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, so to skip a particular heading use the `{: .no_toc }` CSS class.
 
 #### Example
 {: .no_toc }

docs/search.md

@@ -1,42 +1,85 @@
 ---
 layout: default
 title: Search
-nav_order: 6
+nav_order: 7
 ---
 
 # Search
+{: .no_toc }
 
-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:
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+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
 
-## Setup search
+## Set up search
 
-Before you can use search, you must initialize the feature by running this
-rake command that comes with the `just-the-docs`
+### 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/` of your Jekyll site with this content:
+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:
 
-```{% raw %}
----
+```liquid
+{% raw %}---
 ---
 {
-  {% for page in site.html_pages %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
-    "title": "{{ page.title | xml_escape }}",
-    "content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | remove: page.title | strip_newlines | replace: '\', ' '}}",
-    "url": "{{ page.url | xml_escape }}"
-  }{% if forloop.last %}{% else %},
+  {% 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
+
+In your site's `_config.yml`, enable search:
+
+```yaml
+# Enable or disable the site search
+search_enabled: true
+```
+
+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/]+/
+```
+
+## 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:
+
+#### Example
+{: .no_toc }
+
+```yaml
+---
+layout: default
+title: Page not found
+nav_exclude: true
+search_exclude: true
+---
+```

docs/ui-components/buttons.md

@@ -6,7 +6,7 @@ nav_order: 2
 ---
 
 # Buttons
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -21,7 +21,6 @@ nav_order: 2
 ### Links that look like buttons
 
 <div class="code-example" markdown="1">
-
 [Link button](http://example.com/){: .btn }
 
 [Link button](http://example.com/){: .btn .btn-purple }
@@ -29,10 +28,8 @@ nav_order: 2
 [Link button](http://example.com/){: .btn .btn-green }
 
 [Link button](http://example.com/){: .btn .btn-outline }
-
 </div>
 ```markdown
-
 [Link button](http://example.com/){: .btn }
 
 [Link button](http://example.com/){: .btn .btn-purple }
@@ -44,13 +41,10 @@ nav_order: 2
 
 ### Button element
 
-GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this:
-
+GitHub Flavored Markdown does not support the `button` element, so you'll have to use inline HTML for this:
 
 <div class="code-example">
-
 <button type="button" name="button" class="btn">Button element</button>
-
 </div>
 ```html
 <button type="button" name="button" class="btn">Button element</button>
@@ -62,11 +56,9 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
 
 ### Button size
 
-Wrap the button in container that uses the [font-size utility classes]({{
-site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
+Wrap the button in a container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
 
 <div class="code-example" markdown="1">
-
 <span class="fs-6">
 [Big ass button](http://example.com/){: .btn }
 </span>
@@ -74,7 +66,6 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
 <span class="fs-3">
 [Tiny ass button](http://example.com/){: .btn }
 </span>
-
 </div>
 ```markdown
 <span class="fs-8">
@@ -88,20 +79,19 @@ site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
 
 ### Spacing between buttons
 
-Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
+Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/layout.md %}#spacing) to add spacing between two buttons in the same block.
 
 <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 with space](http://example.com/){: .btn .btn-purple .mr-2}
-[Button ](http://example.com/){: .btn .btn-blue .mr-2}
-
-[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
+[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
 [Button ](http://example.com/){: .btn .btn-blue }
 </div>
 ```markdown
-[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
+[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
 [Button ](http://example.com/){: .btn .btn-blue }
 
-[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
+[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
 [Button ](http://example.com/){: .btn .btn-blue }
 ```

docs/ui-components/code.md

@@ -2,11 +2,11 @@
 layout: default
 title: Code
 parent: UI Components
-nav_order: 5
+nav_order: 6
 ---
 
 # Code
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -18,22 +18,25 @@ nav_order: 5
 
 ## Inline code
 
-Code can be rendered inline using single ticks by wrapping your code in single back ticks.
+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.
 ```
 
 ---
 
 ## Syntax highlighted code blocks
 
-Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
+Use Jekyll's built-in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
 
 <div class="code-example" markdown="1">
 ```js
@@ -58,7 +61,7 @@ var fun = function lang(l) {
 
 ## Code blocks with rendered examples
 
-To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
+To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `<div>` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
 
 <div class="code-example" markdown="1">
 

docs/ui-components/labels.md

@@ -10,44 +10,40 @@ nav_order: 3
 Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
 
 <div class="code-example" markdown="1">
-
 Default label
 {: .label }
 
 Blue label
-{: .label .label-blue}
+{: .label .label-blue }
 
 Stable
-{: .label .label-green}
+{: .label .label-green }
 
 New release
-{: .label .label-purple}
+{: .label .label-purple }
 
 Coming soon
-{: .label .label-yellow}
+{: .label .label-yellow }
 
 Deprecated
-{: .label .label-red}
-
+{: .label .label-red }
 </div>
 ```markdown
-
 Default label
 {: .label }
 
 Blue label
-{: .label .label-blue}
+{: .label .label-blue }
 
 Stable
-{: .label .label-green}
+{: .label .label-green }
 
 New release
-{: .label .label-purple}
+{: .label .label-purple }
 
 Coming soon
-{: .label .label-yellow}
+{: .label .label-yellow }
 
 Deprecated
-{: .label .label-red}
-
+{: .label .label-red }
 ```

docs/ui-components/lists.md

@@ -0,0 +1,99 @@
+---
+layout: default
+title: Lists
+parent: UI Components
+nav_order: 5
+---
+
+# Lists
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+Most lists can be rendered with pure Markdown.
+
+## Unordered list
+
+<div class="code-example" markdown="1">
+- Item 1
+- Item 2
+- Item 3
+
+_or_
+
+* Item 1
+* Item 2
+* Item 3
+</div>
+```markdown
+- Item 1
+- Item 2
+- Item 3
+
+_or_
+
+* Item 1
+* Item 2
+* Item 3
+```
+
+## Ordered list
+
+<div class="code-example" markdown="1">
+1. Item 1
+1. Item 2
+1. Item 3
+</div>
+```markdown
+1. Item 1
+1. Item 2
+1. Item 3
+```
+
+## Task list
+
+<div class="code-example" markdown="1">
+- [ ] hello, this is a todo item
+- [ ] hello, this is another todo item
+- [x] goodbye, this item is done
+</div>
+```markdown
+- [ ] hello, this is a todo item
+- [ ] hello, this is another todo item
+- [x] goodbye, this item is done
+```
+
+## Definition list
+
+Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
+
+<div class="code-example" markdown="1">
+<dl>
+<dt>Name</dt>
+<dd>Godzilla</dd>
+<dt>Born</dt>
+<dd>1952</dd>
+<dt>Birthplace</dt>
+<dd>Japan</dd>
+<dt>Color</dt>
+<dd>Green</dd>
+</dl>
+</div>
+```html
+<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+```

docs/ui-components/typography.md

@@ -6,7 +6,7 @@ nav_order: 1
 ---
 
 # Typography
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -28,7 +28,7 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ
 abcdefghijklmnopqrstuvwxyz
 {: .fs-5 .ls-10 .code-example }
 
-For monospace type, like code snippets or the pre `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
+For monospace type, like code snippets or the `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
 
 ```scss
 "SFMono-Regular", Menlo, Consolas, Monospace
@@ -42,7 +42,7 @@ abcdefghijklmnopqrstuvwxyz
 
 ## Responsive type scale
 
-Just the docs uses a responsive type scale that shifts depending on the viewport size. Common elements text elements rendered from markdown use a
+Just the Docs uses a responsive type scale that shifts depending on the viewport size.
 
 | Selector              | Small screen size `font-size`    | Large screen size `font-size` |
 |:----------------------|:---------------------------------|:------------------------------|
@@ -51,7 +51,7 @@ Just the docs uses a responsive type scale that shifts depending on the viewport
 | `h3`, `.text-gamma`   | 16px                             | 18px                          |
 | `h4`, `.text-delta`   | 14px                             | 16px                          |
 | `h5`, `.text-epsilon` | 16px                             | 18px                          |
-| `h6`, `.text-zeta  `   | 18px                             | 24px                          |
+| `h6`, `.text-zeta`    | 18px                             | 24px                          |
 | `body`                | 14px                             | 16px                          |
 
 ---
@@ -109,6 +109,6 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
 
 ## Typographic Utilities
 
-There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization.
+There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
 
 [View typography utilities]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }

docs/ui-components/ui-components.md

@@ -1,10 +1,9 @@
 ---
 layout: default
 title: UI Components
-nav_order: 2
+nav_order: 3
 has_children: true
-parent: UI Components
-permalink: /ui-components
+permalink: /docs/ui-components
 ---
 
 # UI Components

docs/utilities/color.md

@@ -1,12 +1,11 @@
 ---
 layout: default
 title: Color
-nav_order: 3
 parent: Utilities
 ---
 
 # Color Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -16,7 +15,7 @@ parent: Utilities
 
 ---
 
-All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes.
+All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
 
 ## Light Greys
 
@@ -34,6 +33,7 @@ All the colors used in Just the Docs have been systemsized into a series of vari
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
+| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
 | <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
 
 ## Purples

docs/utilities/layout.md

@@ -1,12 +1,11 @@
 ---
 layout: default
 title: Layout
-nav_order: 2
 parent: Utilities
 ---
 
 # Layout Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -52,21 +51,36 @@ 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 }
 
-```markdown
 In Markdown, use the `{: }` wrapper to apply custom classes:
 
+```markdown
 This paragraph will have a margin bottom of 1rem/16px at large screens.
 {: .mb-lg-4 }
 
 This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
 {: .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                    |
@@ -95,9 +109,9 @@ Use these classes in conjunction with the responsive modifiers.
 #### Examples
 {: .no_toc }
 
-```markdown
 In Markdown, use the `{: }` wrapper to apply custom classes:
 
+```markdown
 This button will be hidden until medium screen sizes:
 
 [ A button ](#url)
@@ -106,9 +120,8 @@ This button will be hidden until medium screen sizes:
 These headings will be `inline-block`:
 
 ### heading 3
-{ .d-inline-block }
+{: .d-inline-block }
 
 ### heading 3
-{ .d-inline-block }
-
+{: .d-inline-block }
 ```

docs/utilities/responsive-modifiers.md

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

docs/utilities/typography.md

@@ -1,12 +1,11 @@
 ---
 layout: default
 title: Typography
-nav_order: 3
 parent: Utilities
 ---
 
 # Typography Utilities
-{:.no_toc}
+{: .no_toc }
 
 ## Table of contents
 {: .no_toc .text-delta }
@@ -117,8 +116,6 @@ Use the `lh-` classes to explicitly apply line height to text.
 | `.lh-tight`   | 1.1                  | Default for headings          |
 | `.lh-default` | 1.4                  | Default for body (paragraphs) |
 
-
-
 <div class="code-example" markdown="1">
 No Line height
 No Line height
@@ -147,3 +144,13 @@ Default line height
 Default line height
 {: .fh-default }
 ```
+
+## Text justification
+
+By default text is justified left. Use these `text-` classes to override settings:
+
+| Class          | What it does         |
+|:---------------|:---------------------|
+| `.text-left`   | `text-align: left`   |
+| `.text-right`  | `text-align: right`  |
+| `.text-center` | `text-align: center` |

docs/utilities/utilities.md

@@ -1,14 +1,13 @@
 ---
 layout: default
 title: Utilities
-nav_order: 3
-parent: Utilities
+nav_order: 4
 has_children: true
-permalink: /utilities
+permalink: docs/utilities
 ---
 
 # Utilities
-{:.no_toc}
+{: .no_toc }
 
-CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
+CSS utility classes come in handy when you to want to override default styles to create additional whitespace (margins/padding), correct unexpected shifts in font size or weight, add color, or hide (or show) something at a specific screen size.
 {: .fs-6 .fw-300 }

index.md

@@ -2,25 +2,37 @@
 layout: default
 title: Home
 nav_order: 1
+description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub Pages."
 permalink: /
+last_modified_date: 2020-04-27T17:54:08+0000
 ---
 
-
 # Focus on writing good documentation
 {: .fs-9 }
 
-Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
+Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
 {: .fs-6 .fw-300 }
 
-[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
+[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 .mb-4 .mb-md-0 }
 
 ---
 
 ## Getting started
-### Dependencies
-Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/quickstart/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages standard Jekyll compiler.
 
-### Installation
+### Dependencies
+
+Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/) for more information. Just the Docs requires no special plugins and can run on GitHub Pages' standard Jekyll compiler. The [Jekyll SEO Tag plugin](https://github.com/jekyll/jekyll-seo-tag) is included by default (no need to run any special installation) to inject SEO and open graph metadata on docs pages. For information on how to configure SEO and open graph metadata visit the [Jekyll SEO Tag usage guide](https://jekyll.github.io/jekyll-seo-tag/usage/).
+
+### Quick start: Use as a GitHub Pages remote theme
+
+1. Add Just the Docs to your Jekyll site's `_config.yml` as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/)
+```yaml
+remote_theme: pmarsceill/just-the-docs
+```
+<small>You must have GitHub Pages enabled on your repo, one or more Markdown files, and a `_config.yml` file. [See an example repository](https://github.com/pmarsceill/jtd-remote)</small>
+
+### Local installation: Use the gem-based theme
+
 1. Install the Ruby Gem
 ```bash
 $ gem install just-the-docs
@@ -29,7 +41,7 @@ $ gem install just-the-docs
 # .. or add it to your your Jekyll site’s Gemfile
 gem "just-the-docs"
 ```
-2. Add Just the Docs to your Jekyll site’s `config.yml`
+2. Add Just the Docs to your Jekyll site’s `_config.yml`
 ```yaml
 theme: "just-the-docs"
 ```
@@ -47,11 +59,17 @@ $ bundle exec jekyll serve
 ```
 4. Point your web browser to [http://localhost:4000](http://localhost:4000)
 
+If you're hosting your site on GitHub Pages, [set up GitHub Pages and Jekyll locally](https://help.github.com/en/articles/setting-up-your-github-pages-site-locally-with-jekyll) so that you can more easily work in your development environment.
+
+### Configure Just the Docs
+
+- [See configuration options]({{ site.baseurl }}{% link docs/configuration.md %})
+
 ---
 
 ## About the project
 
-Just the Docs is &copy; 2017 by [Patrick Marsceill](http://patrickmarsceill.com).
+Just the Docs is &copy; 2017-{{ "now" | date: "%Y" }} by [Patrick Marsceill](http://patrickmarsceill.com).
 
 ### License
 
@@ -62,6 +80,15 @@ Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/j
 When contributing to this repository, please first discuss the change you wish to make via issue,
 email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in [our GitHub repo](https://github.com/pmarsceill/just-the-docs#contributing).
 
+#### Thank you to the contributors of Just the Docs!
+
+<ul class="list-style-none">
+{% for contributor in site.github.contributors %}
+  <li class="d-inline-block mr-1">
+     <a href="{{ contributor.html_url }}"><img src="{{ contributor.avatar_url }}" width="32" height="32" alt="{{ contributor.login }}"/></a>
+  </li>
+{% endfor %}
+</ul>
 
 ### Code of Conduct
 

just-the-docs.gemspec

@@ -2,19 +2,20 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "just-the-docs"
-  spec.version       = "0.1.4"
+  spec.version       = "0.2.9"
   spec.authors       = ["Patrick Marsceill"]
   spec.email         = ["patrick.marsceill@gmail.com"]
 
-  spec.summary       = %q{A nice looking, high customizable, responsive Jekyll theme for documention with built-in search.}
+  spec.summary       = %q{A modern, highly customizable, and responsive Jekyll theme for documention with built-in search.}
   spec.homepage      = "https://github.com/pmarsceill/just-the-docs"
   spec.license       = "MIT"
 
   spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|_layouts|_includes|lib|Rakefile|_sass|LICENSE|README)}i) }
   spec.executables   << 'just-the-docs'
   
-  spec.add_runtime_dependency "jekyll", "~> 3.3"
-  spec.add_runtime_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "bundler", "~> 2.1.4"
+  spec.add_runtime_dependency "jekyll", ">= 3.8.5", "< 4.1.0"
+  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"
+  spec.add_runtime_dependency "rake", ">= 12.3.1", "< 13.1.0"
 
-  spec.add_development_dependency "bundler", "~> 1.12"
 end

lib/tasks/search.rake

@@ -2,8 +2,9 @@ namespace :search do
   desc 'Generate the files needed for search functionality'
   task :init do
     puts 'Creating search data json file...'
+    mkdir_p 'assets/js'
     touch 'assets/js/search-data.json'
-    content = %Q[{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | strip_newlines | replace: '\\', ' ' }}]
+    content = %Q[{{ 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 }}]
     puts 'Done.'
     puts 'Generating content...'
 
@@ -11,12 +12,13 @@ namespace :search do
       f.puts '---
 ---
 {
-  {% for page in site.html_pages %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
-    "title": "{{ page.title | xml_escape }}",
+  {% assign comma = false %}
+  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
+    "title": "{{ page.title | replace: \'&amp;\', \'&\' }}",
     "content": "'+content+'",
-    "url": "{{ page.url | xml_escape }}"
-  }{% if forloop.last %}{% else %},
+    "url": "{{ page.url | absolute_url }}",
+    "relUrl": "{{ page.url }}"
+  }{% assign comma = true %}
   {% endif %}{% endfor %}
 }'
     end

node_modules/.bin/JSONStream

@@ -1 +0,0 @@
-../JSONStream/index.js

node_modules/.bin/browserslist

@@ -1 +0,0 @@
-../browserslist/cli.js

node_modules/.bin/colorguard

@@ -1 +0,0 @@
-../colorguard/bin/colorguard

node_modules/.bin/css-rule-stream

@@ -1 +0,0 @@
-../css-rule-stream/index.js

node_modules/.bin/doiuse

@@ -1 +0,0 @@
-../doiuse/cli.js

node_modules/.bin/esparse

@@ -1 +0,0 @@
-../esprima/bin/esparse.js

node_modules/.bin/esvalidate

@@ -1 +0,0 @@
-../esprima/bin/esvalidate.js

node_modules/.bin/js-yaml

@@ -1 +0,0 @@
-../js-yaml/bin/js-yaml.js

node_modules/.bin/jsonfilter

@@ -1 +0,0 @@
-../jsonfilter/cli.js

node_modules/.bin/semver

@@ -1 +0,0 @@
-../semver/bin/semver

node_modules/.bin/specificity

@@ -1 +0,0 @@
-../specificity/bin/specificity

node_modules/.bin/strip-indent

@@ -1 +0,0 @@
-../strip-indent/cli.js

node_modules/.bin/stylehacks

@@ -1 +0,0 @@
-../stylehacks/dist/cli.js

node_modules/.bin/stylelint

@@ -1 +0,0 @@
-../stylelint/bin/stylelint.js

node_modules/.bin/window-size

@@ -1 +0,0 @@
-../window-size/cli.js

node_modules/JSONStream/.npmignore

@@ -1,2 +0,0 @@
-node_modules/*
-node_modules

node_modules/JSONStream/.travis.yml

@@ -1,4 +0,0 @@
-language: node_js
-node_js:
-  - "0.8"
-  - "0.10"

node_modules/JSONStream/LICENSE.APACHE2

@@ -1,15 +0,0 @@
-Apache License, Version 2.0
-
-Copyright (c) 2011 Dominic Tarr
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

node_modules/JSONStream/LICENSE.MIT

@@ -1,24 +0,0 @@
-The MIT License
-
-Copyright (c) 2011 Dominic Tarr
-
-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.

node_modules/JSONStream/examples/all_docs.js

@@ -1,13 +0,0 @@
-var request = require('request')
-  , JSONStream = require('JSONStream')
-  , es = require('event-stream')
-
-var parser = JSONStream.parse(['rows', true]) //emit parts that match this path (any element of the rows array)
-  , req = request({url: 'http://isaacs.couchone.com/registry/_all_docs'})
-  , logger = es.mapSync(function (data) {  //create a stream that logs to stderr,
-    console.error(data)
-    return data  
-  })
-
-req.pipe(parser)
-parser.pipe(logger)

node_modules/JSONStream/index.js

@@ -1,192 +0,0 @@
-#! /usr/bin/env node
-
-var Parser = require('jsonparse')
-  , through = require('through')
-
-/*
-
-  the value of this.stack that creationix's jsonparse has is weird.
-
-  it makes this code ugly, but his problem is way harder that mine,
-  so i'll forgive him.
-
-*/
-
-exports.parse = function (path, map) {
-
-  var parser = new Parser()
-  var stream = through(function (chunk) {
-    if('string' === typeof chunk)
-      chunk = new Buffer(chunk)
-    parser.write(chunk)
-  },
-  function (data) {
-    if(data)
-      stream.write(data)
-    stream.queue(null)
-  })
-
-  if('string' === typeof path)
-    path = path.split('.').map(function (e) {
-      if (e === '*')
-        return true
-      else if (e === '') // '..'.split('.') returns an empty string
-        return {recurse: true}
-      else
-        return e
-    })
-
-
-  var count = 0, _key
-  if(!path || !path.length)
-    path = null
-
-  parser.onValue = function () {
-    if (!this.root && this.stack.length == 1)
-      stream.root = this.value
-
-    if(! path) return
-
-    var i = 0 // iterates on path
-    var j  = 0 // iterates on stack
-    while (i < path.length) {
-      var key = path[i]
-      var c
-      j++
-
-      if (key && !key.recurse) {
-        c = (j === this.stack.length) ? this : this.stack[j]
-        if (!c) return
-        if (! check(key, c.key)) return
-        i++
-      } else {
-        i++
-        var nextKey = path[i]
-        if (! nextKey) return
-        while (true) {
-          c = (j === this.stack.length) ? this : this.stack[j]
-          if (!c) return
-          if (check(nextKey, c.key)) { i++; break}
-          j++
-        }
-      }
-    }
-    if (j !== this.stack.length) return
-
-    count ++
-    var data = this.value[this.key]
-    if(null != data)
-      if(null != (data = map ? map(data) : data))
-        stream.queue(data)
-    delete this.value[this.key]
-  }
-  parser._onToken = parser.onToken;
-
-  parser.onToken = function (token, value) {
-    parser._onToken(token, value);
-    if (this.stack.length === 0) {
-      if (stream.root) {
-        if(!path)
-          stream.queue(stream.root)
-        stream.emit('root', stream.root, count)
-        count = 0;
-        stream.root = null;
-      }
-    }
-  }
-
-  parser.onError = function (err) {
-    stream.emit('error', err)
-  }
-
-
-  return stream
-}
-
-function check (x, y) {
-  if ('string' === typeof x)
-    return y == x
-  else if (x && 'function' === typeof x.exec)
-    return x.exec(y)
-  else if ('boolean' === typeof x)
-    return x
-  else if ('function' === typeof x)
-    return x(y)
-  return false
-}
-
-exports.stringify = function (op, sep, cl, indent) {
-  indent = indent || 0
-  if (op === false){
-    op = ''
-    sep = '\n'
-    cl = ''
-  } else if (op == null) {
-
-    op = '[\n'
-    sep = '\n,\n'
-    cl = '\n]\n'
-
-  }
-
-  //else, what ever you like
-
-  var stream
-    , first = true
-    , anyData = false
-  stream = through(function (data) {
-    anyData = true
-    var json = JSON.stringify(data, null, indent)
-    if(first) { first = false ; stream.queue(op + json)}
-    else stream.queue(sep + json)
-  },
-  function (data) {
-    if(!anyData)
-      stream.queue(op)
-    stream.queue(cl)
-    stream.queue(null)
-  })
-
-  return stream
-}
-
-exports.stringifyObject = function (op, sep, cl, indent) {
-  indent = indent || 0
-  if (op === false){
-    op = ''
-    sep = '\n'
-    cl = ''
-  } else if (op == null) {
-
-    op = '{\n'
-    sep = '\n,\n'
-    cl = '\n}\n'
-
-  }
-
-  //else, what ever you like
-
-  var first = true
-    , anyData = false
-  stream = through(function (data) {
-    anyData = true
-    var json = JSON.stringify(data[0]) + ':' + JSON.stringify(data[1], null, indent)
-    if(first) { first = false ; this.queue(op + json)}
-    else this.queue(sep + json)
-  },
-  function (data) {
-    if(!anyData) this.queue(op)
-    this.queue(cl)
-
-    this.queue(null)
-  })
-
-  return stream
-}
-
-if(!module.parent && process.title !== 'browser') {
-  process.stdin
-    .pipe(exports.parse(process.argv[2]))
-    .pipe(exports.stringify('[', ',\n', ']\n', 2))
-    .pipe(process.stdout)
-}