Merge branch 'master' into v0.2.7-release

Update base.scss
Update _lists.scss
2025-09-16 14:23:31 -06:00 · 2019-09-10 12:37:07 -04:00 · 2019-09-10 12:36:54 -04:00 · 2019-09-10 12:32:43 -04:00 · 2019-09-10 12:30:00 -04:00 · 2019-09-10 12:26:46 -04:00
48 changed files with 1463 additions and 804 deletions
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -1,16 +0,0 @@
-workflow "Publish to RubyGems" {
-  on = "release"
-  resolves = ["scarhand/actions-ruby@master"]
-}
-
-action "Build from Gemspec" {
-  uses = "scarhand/actions-ruby@master"
-  runs = "build *.gemspec"
-}
-
-action "scarhand/actions-ruby@master" {
-  uses = "scarhand/actions-ruby@master"
-  needs = ["Build from Gemspec"]
-  runs = "push *.gem"
-  secrets = ["RUBYGEMS_AUTH_TOKEN"]
-}
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,35 @@
+on: [push]
+
+name: CI
+
+jobs:
+
+  jekyll:
+    name: Build Jekyll site
+    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 "chmod 777 /srv/jekyll && jekyll build"
+        
+  css:
+    name: Stylelint
+    runs-on: ubuntu-latest
+    steps:
+    
+    - uses: actions/checkout@master
+
+    - name: Use Node.js 10.x
+      uses: actions/setup-node@v1
+      with:
+        version: 10.x
+
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm test
--- a/.github/workflows/publish.yml
+++ b/.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}}
+
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,14 +0,0 @@
-language: ruby
-rvm:
-  - 2.3.0
-env:
-  - TRAVIS_NODE_VERSION="9.3.0"
-
-install:
-  - npm install
-  - gem install bundler --version '>=1.17.1'
-  - bundle install
-
-script:
-  - npm run test
-  - bundle exec jekyll build
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 <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://travis-ci.com/pmarsceill/just-the-docs"><img src="https://travis-ci.com/pmarsceill/just-the-docs.svg?branch=master" alt="Build status"></a>
+    <a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://github.com/pmarsceill/just-the-docs/actions"><img src="https://github.com/pmarsceill/just-the-docs/workflows/CI/badge.svg" alt="Build status"></a>
 </p>
 <br><br>
 <p align="center">
    <h1 align="center">Just the Docs</h1>
-    <p align="center">A modern, high customizable, responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub Pages with few dependencies.</p>
+    <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>
--- a/_config.yml
+++ b/_config.yml
@@ -15,20 +15,32 @@
 # in the templates via {{ site.myvariable }}.
 title: Just the Docs
 description: A Jekyll theme for documentation
-baseurl: "/just-the-docs/" # the subpath of your site, e.g. /blog
+baseurl: "/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", "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"

+# 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>"
+
 # Color scheme currently only supports "dark" or nil (default)
 color_scheme: nil

@@ -37,4 +49,12 @@ color_scheme: nil
 ga_tracking: UA-2709176-10

 plugins:
-  - jekyll-seo-tag
+  - jekyll-seo-tag
+
+compress_html:
+  clippings: all
+  comments: all
+  endings: all
+  startings: []
+  blanklines: false
+  profile: false
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,28 +1,40 @@
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-  {% if page.description %}
-  <meta name="Description" content="{{ page.description }}">
+
+  {% if site.plugins.jekyll-seo == nil %}
+    <title>{{ page.title }} - {{ site.title }}</title>
+
+    {% if page.description %}
+      <meta name="Description" content="{{ page.description }}">
+    {% endif %}
  {% endif %}

-  <title>{{ page.title }} - {{ site.title }}</title>
-  <link rel="stylesheet" href="{{ "/assets/css/just-the-docs.css" | absolute_url }}">
+  <link rel="shortcut icon" href="{{ 'favicon.ico' | absolute_url }}" type="image/x-icon">
+
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs.css' | absolute_url }}">

  {% if site.ga_tracking != nil %}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
    <script>
-      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-      ga('create', '{{ site.ga_tracking }}', '{{ site.url }}');
-      ga('send', 'pageview');
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', "{{ site.ga_tracking }}");
    </script>
-    <script async src="https://www.google-analytics.com/analytics.js"></script>
+
  {% endif %}

-  {% if site.search_enabled != nil %}
-    <script type="text/javascript" src="{{ "/assets/js/vendor/lunr.min.js" | absolute_url }}"></script>
+  {% 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>
+  <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 %}
+  {% seo %}
+
+  {% include head_custom.html %}
+
 </head>
--- a/_includes/head_custom.html
+++ b/_includes/head_custom.html
--- a/_includes/js/custom.js
+++ b/_includes/js/custom.js
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,44 +1,40 @@
 <nav role="navigation" aria-label="Main navigation">
  <ul class="navigation-list">
-    {% assign pages_list = site.html_pages | sort:"nav_order" %}
-    {% for node in pages_list %}
-      {% unless node.nav_exclude %}
-        {% if node.parent == nil %}
+    {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
+    {%- for node in pages_list -%}
+      {%- unless node.nav_exclude -%}
+        {%- if node.parent == nil -%}
          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
-            {% if page.parent == node.title or page.grand_parent == node.title %}
-              {% assign first_level_url = node.url | absolute_url %}
-            {% endif %}
+            {%- if page.parent == node.title or page.grand_parent == node.title -%}
+              {%- assign first_level_url = node.url | absolute_url -%}
+            {%- endif -%}
            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
-            {% if node.has_children %}
-              {% assign children_list = site.html_pages | sort:"nav_order" %}
+            {%- if node.has_children -%}
+              {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
              <ul class="navigation-list-child-list ">
-                {% for child in children_list %}
-                  {% if child.parent == node.title %}
-                    <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
-                      {% if page.url == child.url or page.parent == child.title %}
-                        {% assign second_level_url = child.url | absolute_url %}
-                      {% endif %}
-                      <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
-                      {% if child.has_children %}
-                        {% assign grand_children_list = site.html_pages | sort:"nav_order" %}
+                {%- for child in children_list -%}
+                  <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+                    {%- if page.url == child.url or page.parent == child.title -%}
+                      {%- assign second_level_url = child.url | absolute_url -%}
+                    {%- endif -%}
+                    <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
+                    {%- if child.has_children -%}
+                        {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
                        <ul class="navigation-list-child-list">
-                          {% for grand_child in grand_children_list %}
-                            {% if grand_child.parent == child.title %}
-                              <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>
-                            {% endif %}
-                          {% endfor %}
-                        </ul>
-                      {% endif %}
-                    </li>
-                  {% endif %}
-                {% endfor %}
+                        {%- for grand_child in grand_children_list -%}
+                          <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
+                            <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+                          </li>
+                        {%- endfor -%}
+                      </ul>
+                    {%- endif -%}
+                  </li>
+                {%- endfor -%}
              </ul>
-            {% endif %}
+            {%- endif -%}
          </li>
-        {% endif %}
-      {% endunless %}
-    {% endfor %}
+        {%- endif -%}
+      {%- endunless -%}
+    {%- endfor -%}
  </ul>
 </nav>
--- a/_includes/title.html
+++ b/_includes/title.html
@@ -0,0 +1,5 @@
+{% if site.logo %}
+  <div class="site-logo"></div>
+{% else %}
+  {{ site.title }}
+{% endif %}
--- a/_includes/vendor/anchor_headings.html
+++ b/_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 }}
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,25 +1,38 @@
+---
+layout: table_wrappers
+---
+
 <!DOCTYPE html>

 <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 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 js-main-content" tabindex="0">
-      <div class="page-header">
-        <div class="main-content">
-          {% if site.search_enabled != nil %}
-          <div class="search js-search">
+      <div class="main-content">
+        <div class="page-header js-page-header">
+          {% if site.search_enabled != false %}
+          <div class="search">
            <div class="search-input-wrap">
              <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
              <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
@@ -28,47 +41,58 @@
          </div>
          {% endif %}
          {% if site.aux_links != nil %}
-            <ul class="list-style-none text-small mt-md-1 mb-md-1 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>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
-      </div>
-      <div class="main-content">
-        {% 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">
-          {{ 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 and page.has_toc != false %}
-          <hr>
-          <h2 class="text-delta">Table of contents</h2>
-          {% assign children_list = site.pages | sort:"nav_order" %}
-          <ul>
-            {% for child in children_list %}
-              {% if child.parent == page.title and child.title != page.title %}
-              <li>
-                <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
-              </li>
-              {% endif %}
-            {% endfor %}
-          </ul>
+            <hr>
+            <h2 class="text-delta">Table of contents</h2>
+            {% assign children_list = site.pages | sort:"nav_order" %}
+            <ul>
+              {% for child in children_list %}
+                {% if child.parent == page.title and child.title != page.title %}
+                <li>
+                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+                </li>
+                {% endif %}
+              {% endfor %}
+            </ul>
          {% endif %}
+
+          {% if site.footer_content != nil %}
+            <hr>
+            <footer role="contentinfo">
+              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
+            </footer>
+          {% endif %}
+
        </div>
      </div>
    </div>
--- a/_layouts/table_wrappers.html
+++ b/_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_ }}
--- a/_layouts/vendor/compress.html
+++ b/_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 %}
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -88,7 +88,8 @@ code {
  line-height: $body-line-height;
 }

-figure {
+figure,
+pre {
  margin: 0;
 }

--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -21,7 +21,7 @@
  cursor: pointer;
  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;

--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -11,7 +11,8 @@ code {
  border-radius: $border-radius;
 }

-pre.highlight {
+pre.highlight,
+figure.highlight {
  padding: $sp-3;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
@@ -61,7 +62,7 @@ pre.highlight {
 .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 .na { color: #555; } // name.attribute //
 .highlight .nb { color: #b58900; } // name.builtin //
 .highlight .nc { color: #268bd2; } // name.class //
 .highlight .no { color: #cb4b16; } // name.constant //
@@ -69,7 +70,7 @@ pre.highlight {
 .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 .nl { color: #555; } // name.label //
 .highlight .nn { color: #93a1a1; } // name.namespace //
 .highlight .nx { color: #555; } // name.other //
 .highlight .py { color: #93a1a1; } // name.property //
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -6,9 +6,12 @@ $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;
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -6,6 +6,8 @@
 // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type

 .page-content {
+  line-height: $content-line-height;
+
  a {
    overflow: hidden;
    text-overflow: ellipsis;
@@ -111,4 +113,48 @@
    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;
+  }
 }
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -1,120 +1,129 @@
-// //
-// // 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-250: #302d36 !default;
-// $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-background-color: $white !default;
-// $sidebar-color: $grey-lt-000 !default;
-// $code-background-color: $grey-lt-000 !default;
+////
+//// Typography
+////

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

 .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});
  }
 }
@@ -78,48 +66,120 @@
  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 {
+  @include container;
+  display: none;
+  padding-top: $gutter-spacing-sm;
+  padding-bottom: $gutter-spacing-sm;
  background-color: $sidebar-color;

  @include mq(md) {
+    display: flex;
+    justify-content: flex-end;
+    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: flex-end;
-      height: 60px;
-      padding-top: $sp-4;
-      padding-bottom: $sp-4;
-      border-bottom: $border $border-color;
    }
  }
 }

 .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 {
@@ -135,15 +195,15 @@ 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: $sidebar-color;
  }
 }
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -1,33 +1,11 @@
 //
 // Main nav, breadcrumb, etc...
 //
-
-.site-title {
-  display: block;
-  flex: 1 1 auto;
-  color: $body-heading-color;
-  background-color: $sidebar-color;
-
-  @include mq(md) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 101;
-    height: 60px;
-    padding-top: $sp-4;
-    border-bottom: $border $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 {
@@ -90,8 +68,7 @@

 // Small screen nav

-.main-nav,
-.aux-nav {
+.main-nav {
  display: none;

  &.nav-open {
@@ -102,13 +79,8 @@
  }
 }

-.navigation-list-toggle {
-  position: absolute;
-  right: $sp-4;
-
-  @include mq(md) {
-    display: none !important;
-  }
+.aux-nav {
+  align-self: center;
 }

 // Breadcrumb nav
--- a/_sass/overrides.scss
+++ b/_sass/overrides.scss
@@ -0,0 +1,3 @@
+//
+// Custom overrides from a user.
+//
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -5,60 +5,46 @@
 .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: 0;
-    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: lighten($body-background-color, 1%);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
  }
 }

 .search-input-wrap {
  display: flex;
-  background-color: $body-background-color;
+  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: $body-background-color;
+  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;
@@ -69,14 +55,9 @@
    }
  }

-  @include fs-5;
-
-  @include mq(sm) {
-    @include fs-3;
-  }
-
  @include mq(md) {
-    @include fs-2;
+    background-color: $body-background-color;
+    @include fs-3;
  }
 }

@@ -87,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 {
@@ -100,15 +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 {
-    color: $body-heading-color;
-    background-color: darken($body-background-color, 2%);
+  &: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;
+}
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -6,6 +6,7 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetic
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
 $root-font-size: 16px !default;         // Base font-size for rems
 $body-line-height: 1.4 !default;
+$content-line-height: 1.5 !default;
 $body-heading-line-height: 1.15 !default !default;

 //
@@ -52,27 +53,18 @@ $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;
 $btn-primary-color: $purple-100 !default;
 $base-button-color: #f7f7f7 !default;

-//
-// Media queries in pixels
-//
-
-$media-queries: (
-  xs: 320px,
-  sm: 500px,
-  md: 740px,
-  lg: 1120px,
-  xl: 1400px
-) !default;
-
 //
 // Spacing
 //
@@ -118,13 +110,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;
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -3,18 +3,20 @@
 //
 // 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,7 @@ td {
  padding-right: $sp-3;
  padding-bottom: $sp-2;
  padding-left: $sp-3;
-  background-color: lighten($body-background-color, 2%);
+  background-color: $table-background-color;
  border-bottom: $border rgba($border-color, 0.5);
  border-left: $border $border-color;

@@ -34,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;
      }
    }
  }
@@ -73,6 +53,6 @@ tbody {

 thead {
  th {
-    border-bottom: 1px solid $border-color;
+    border-bottom: $border $border-color;
  }
 }
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -1,7 +1,7 @@
 //
 // Typography
 //
-// stylelint-disable primer/selector-no-utility, selector-no-type, selector-max-type
+// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type

 h1,
 .text-alpha {
--- a/_sass/utilities/_layout.scss
+++ b/_sass/utilities/_layout.scss
@@ -1,4 +1,4 @@
-// stylelint-disable primer/selector-no-utility
+// stylelint-disable primer/selector-no-utility, primer/no-override
 //
 // Utility classes for layout
 //
--- a/_sass/utilities/_lists.scss
+++ b/_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;
+    }
+  }
 }
--- a/_sass/utilities/_spacing.scss
+++ b/_sass/utilities/_spacing.scss
@@ -3,7 +3,7 @@
 //

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

--- a/_sass/utilities/_typography.scss
+++ b/_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;
--- a/assets/css/dark-mode-preview.scss
+++ b/assets/css/dark-mode-preview.scss
@@ -3,6 +3,10 @@
 # only Main files contain this front matter, not partials.
 ---

+{% if site.logo %}
+$logo: "{{ site.logo | absolute_url }}";
+{% endif %}
+
 //
 // Import external dependencies
 //
--- a/assets/css/just-the-docs.scss
+++ b/assets/css/just-the-docs.scss
@@ -3,6 +3,10 @@
 # only Main files contain this front matter, not partials.
 ---

+{% if site.logo %}
+$logo: "{{ site.logo | absolute_url }}";
+{% endif %}
+
 //
 // Import external dependencies
 //
@@ -42,3 +46,4 @@
@import "./tables";
@import "./code";
@import "./utilities/utilities";
+@import "./overrides";
--- a/assets/js/dark-mode-preview.js
+++ b/assets/js/dark-mode-preview.js
@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", function(){
+
+  const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
+  const cssFile = document.querySelector('[rel="stylesheet"]')
+  const originalCssRef = cssFile.getAttribute('href')
+  const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
+  const buttonCopy = ['Return to the light side', 'Preview dark color scheme']
+  const updateButtonText = function(toggleDarkMode) {
+    toggleDarkMode.textContent === buttonCopy[0] ?
+      toggleDarkMode.textContent = buttonCopy[1] :
+      toggleDarkMode.textContent = buttonCopy[0]
+  }
+
+  jtd.addEvent(toggleDarkMode, 'click', function(){
+    if (cssFile.getAttribute('href') === originalCssRef) {
+      cssFile.setAttribute('href', darkModeCssRef)
+      updateButtonText(toggleDarkMode)
+    } else {
+      cssFile.setAttribute('href', originalCssRef)
+      updateButtonText(toggleDarkMode)
+    }
+  })
+})
--- a/assets/js/just-the-docs.js
+++ b/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,119 +45,235 @@ 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);
+      
+      {% 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) {
-        index.add({
-          id: data[i].id,
-          title: data[i].title,
-          content: data[i].content,
-          url: data[i].url
-        });
-      }
-      searchResults(data);
+        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 > 0) {
-          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);
    });
  }
@@ -155,22 +284,16 @@ function pageFocus() {
  mainContent.focus();
 }

-
 // Document ready

-function ready(){
-  toggleNav();
+jtd.onReady(function(){
+  initNav();
  pageFocus();
  if (typeof lunr !== 'undefined') {
    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();
 });
+
+})(window.jtd = window.jtd || {});
+
+{% include js/custom.js %}
--- a/assets/js/search-data.json
+++ b/assets/js/search-data.json
@@ -1,12 +1,12 @@
 ---
 ---
 {
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
+  {% assign comma = false %}
+  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
    "title": "{{ page.title | replace: '&amp;', '&' }}",
-    "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
+    "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 }}"
-  }{% unless forloop.last %},{% endunless %}
+  }{% assign comma = true %}
  {% endif %}{% endfor %}
-}
+}
--- a/assets/js/vendor/lunr.min.js
+++ b/assets/js/vendor/lunr.min.js
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -22,11 +22,23 @@ Just the Docs has some specific configuration parameters that can be defined in

 View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.

-## Search enabled
+## 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
@@ -34,8 +46,25 @@ search_enabled: true
 ```yaml
 # Aux links for the upper right navigation
 aux_links:
-    "Just the Docs on GitHub":
-      - "//github.com/pmarsceill/just-the-docs"
+  "Just the Docs on GitHub":
+    - "//github.com/pmarsceill/just-the-docs"
+```
+
+## 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/nil
+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>"
 ```

 ## Color scheme
@@ -46,20 +75,7 @@ color_scheme: "dark"
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>

-<script>
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
-const cssFile = document.querySelector('[rel="stylesheet"]')
-const originalCssRef = cssFile.getAttribute('href')
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
-
-addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef)
-  } else {
-    cssFile.setAttribute('href', originalCssRef)
-  }
-})
-</script>
+<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>

 See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.

--- a/docs/customization.md
+++ b/docs/customization.md
@@ -34,20 +34,7 @@ color_scheme: "dark"
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>

-<script>
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
-const cssFile = document.querySelector('[rel="stylesheet"]')
-const originalCssRef = cssFile.getAttribute('href')
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
-
-addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef)
-  } else {
-    cssFile.setAttribute('href', originalCssRef)
-  }
-})
-</script>
+<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>

 ## Specific visual customization

@@ -70,4 +57,19 @@ $link-color: $blue-000;

 _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependencies to fail.

---
+## Override styles
+
+For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.scss`. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
+
+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;}
+}
+```
--- a/docs/navigation-structure.md
+++ b/docs/navigation-structure.md
@@ -67,7 +67,7 @@ Sometimes you will want to create a page with many children (a section). First,
 |
 |-- docs
 |   |-- ui-components
-|   |   |-- ui-components.md  (parent page)
+|   |   |-- index.md  (parent page)
 |   |   |-- buttons.md
 |   |   |-- code.md
 |   |   |-- labels.md
@@ -75,7 +75,7 @@ Sometimes you will want to create a page with many children (a section). First,
 |   |   +-- typography.md
 |   |
 |   |-- utilities
-|   |   |-- utilities.md      (parent page)
+|   |   |-- index.md      (parent page)
 |   |   |-- color.md
 |   |   |-- layout.md
 |   |   |-- responsive-modifiers.md
@@ -88,9 +88,8 @@ Sometimes you will want to create a page with many children (a section). First,
 +-- ..
 ```

-On the parent pages, add 2 YAML front matter parameters:
+On the parent pages, add this YAML front matter parameter:
 -  `has_children: true` (tells us that this is a parent page)
-  `permalink:` set this to the site directory that contains the child pages

 #### Example
 {: .no_toc }
@@ -101,7 +100,6 @@ layout: default
 title: UI Components
 nav_order: 2
 has_children: true
-permalink: /docs/ui-components
 ---
 ```

@@ -140,7 +138,6 @@ title: UI Components
 nav_order: 2
 has_children: true
 has_toc: false
-permalink: /docs/ui-components
 ---
 ```

--- a/docs/search.md
+++ b/docs/search.md
@@ -37,13 +37,13 @@ This command creates the `search-data.json` file that Jekyll uses to create your
 {% raw %}---
 ---
 {
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
+  {% assign comma = false %}
+  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
    "title": "{{ page.title | replace: '&amp;', '&' }}",
-    "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
+    "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 }}"
-  }{% unless forloop.last %},{% endunless %}
+  }{% assign comma = true %}
  {% endif %}{% endfor %}
 }{% endraw %}
 ```
@@ -59,6 +59,15 @@ In your site's `_config.yml`, enable 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:
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.md
+++ b/index.md
@@ -20,7 +20,7 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them

 ### 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 Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler.
+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

@@ -79,6 +79,16 @@ 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 is committed to fostering a welcoming community.
--- a/just-the-docs.gemspec
+++ b/just-the-docs.gemspec
@@ -2,7 +2,7 @@

 Gem::Specification.new do |spec|
  spec.name          = "just-the-docs"
-  spec.version       = "0.2.4"
+  spec.version       = "0.2.6"
  spec.authors       = ["Patrick Marsceill"]
  spec.email         = ["patrick.marsceill@gmail.com"]

--- a/lib/tasks/search.rake
+++ b/lib/tasks/search.rake
@@ -4,7 +4,7 @@ namespace :search do
    puts 'Creating search data json file...'
    mkdir_p 'assets/js'
    touch 'assets/js/search-data.json'
-    content = %Q[{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\\', ' ' | normalize_whitespace }}]
+    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...'

@@ -12,13 +12,13 @@ namespace :search do
      f.puts '---
 ---
 {
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
-    "title": "{{ page.title | replace: \'&amp;\', \'&\' }}",
+  {% 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 | absolute_url }}",
    "relUrl": "{{ page.url }}"
-  }{% unless forloop.last %},{% endunless %}
+  }{% assign comma = true %}
  {% endif %}{% endfor %}
 }'
    end
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,17 +1,17 @@
 {
  "name": "just-the-docs",
-  "version": "0.2.4",
+  "version": "0.2.6",
  "description": "A modern Jekyll theme for documentation",
  "repository": "pmarsceill/just-the-docs",
  "license": "MIT",
  "bugs": "https://github.com/pmarsceill/just-the-docs/issues",
  "devDependencies": {
    "stylelint": "^10.0.1",
-    "stylelint-config-primer": "^6.0.0",
+    "stylelint-config-primer": "^8.0.0",
    "stylelint-selector-no-utility": "^4.0.0"
  },
  "dependencies": {
-    "@primer/css": "^12.2.3"
+    "@primer/css": "^12.7.0"
  },
  "scripts": {
    "test": "stylelint '**/*.scss'"