Update _config.yml

v0.3.3

.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/release-drafter.yml

@@ -0,0 +1,35 @@
+references:
+  - v+
+  - master
+name-template: 'v$RESOLVED_VERSION 🌈'
+tag-template: 'v$RESOLVED_VERSION'
+categories:
+  - title: '🚀 Features'
+    labels:
+      - 'feature'
+      - 'enhancement'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'fix'
+      - 'bugfix'
+      - 'bug'
+  - title: '🧰 Maintenance'
+    label: 
+      - 'chore'
+      - 'dependencies'
+change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
+version-resolver:
+  major:
+    labels:
+      - 'next-major-release'
+  minor:
+    labels:
+      - 'next-minor-release'
+  patch:
+    labels:
+      - 'patch'
+  default: minor
+template: |
+  ## Changes
+
+  $CHANGES

.github/workflows/ci-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 && bundle install && bundle exec 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@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 && bundle install && bundle exec jekyll build && bundle exec 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

@@ -1,35 +1,44 @@
-on: [push]
+on: [pull_request]
 
 name: CI
 
 jobs:
 
-  jekyll:
+  jekyll-latest:
-    name: Build Jekyll site
+    name: Build Jekyll site (latest)
     runs-on: ubuntu-latest
     steps:
 
-    - uses: actions/checkout@master
+    - 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 "chmod 777 /srv/jekyll && jekyll build"
+        jekyll/builder:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && bundle install && bundle exec jekyll build && bundle exec rake search:init"
-        
+
-  css:
+  jekyll-3-8-5:
-    name: Stylelint
+    name: Build Jekyll site (v3.8.5)
     runs-on: ubuntu-latest
     steps:
-    
-    - uses: actions/checkout@master
 
-    - name: Use Node.js 10.x
+    - 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 && bundle exec jekyll build && bundle exec rake search:init"
+
+  assets:
+    name: 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:
-        version: 10.x
+        node-version: '12.x'
-
+    - run: npm install
-    - name: npm install, build, and test
+    - run: npm test
-      run: |
-        npm install
-        npm test

.gitignore

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

.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,10 +1,13 @@
 {
-  "ignoreFiles" : [
+  "ignoreFiles": [
-    "assets/css/just-the-docs.scss",
+    "assets/css/just-the-docs-default.scss",
-    "assets/css/dark-mode-preview.scss",
+    "assets/css/just-the-docs-light.scss",
+    "assets/css/just-the-docs-dark.scss",
     "_sass/vendor/**/*.scss"
   ],
-  "extends": [
+  "extends": ["stylelint-config-primer", "stylelint-config-prettier"],
-    "stylelint-config-primer"
+  "plugins": ["stylelint-prettier"],
-  ]
+  "rules": {
+    "prettier/prettier": true
+  }
 }

404.html

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

Dockerfile

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

README.md

@@ -1,5 +1,5 @@
 <p align="right">
-    <a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://github.com/pmarsceill/just-the-docs/actions"><img src="https://github.com/pmarsceill/just-the-docs/workflows/CI/badge.svg" alt="Build status"></a>
+    <a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://github.com/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">
@@ -33,6 +33,10 @@ Or install it yourself as:
 
     $ gem install just-the-docs
 
+Alternatively, you can run it inside Docker while developing your site
+
+    $ docker-compose up
+
 ## Usage
 
 [View the documentation](https://pmarsceill.github.io/just-the-docs/) for usage information.

_config.yml

@@ -13,22 +13,51 @@
 # you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: Just the Docs
+title: Just the Docs (v0.3.3)
 description: A Jekyll theme for documentation
-baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
+baseurl: "" # the subpath of your site, e.g. /blog
-url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com
+url: "https://v0-3-3-docs.just-the-docs.com" # the base hostname & protocol for your site, e.g. http://example.com
 
 permalink: pretty
-exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
+exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"
+, "docs/tests/"
+]
+
+# Regression tests
+# By default, the pages in /docs/tests are excluded when the ste is built.
+# To include them, comment-out the relevant line above.
+# Uncommenting the following line doesn't work - see https://github.com/jekyll/jekyll/issues/4791
+# include: ["docs/tests/"]
 
 # Set a path/url to a logo that will be displayed instead of the title
 #logo: "/assets/images/just-the-docs.png"
 
 # Enable or disable the site search
+# Supports true (default) or false
 search_enabled: true
-
+search:
-# Set the search token separator for hyphenated-word search:
+  # Split pages into sections that can be searched individually
-search_tokenizer_separator: /[\s/]+/
+  # Supports 1 - 6, default: 2
+  heading_level: 2
+  # Maximum amount of previews per search result
+  # Default: 3
+  previews: 2
+  # Maximum amount of words to display before a matched word in the preview
+  # Default: 5
+  preview_words_before: 3
+  # Maximum amount of words to display after a matched word in the preview
+  # Default: 10
+  preview_words_after: 3
+  # Set the search token separator
+  # Default: /[\s\-/]+/
+  # Example: enable support for hyphenated search words
+  tokenizer_separator: /[\s/]+/
+  # Display the relative url in search results
+  # Supports true (default) or false
+  rel_url: true
+  # Enable or disable the search button that appears in the bottom right corner of every page
+  # Supports true or false (default)
+  button: false
 
 # Enable or disable heading anchors
 heading_anchors: true
@@ -38,19 +67,52 @@ 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
+# Makes Aux links open in a new tab. Default is false
-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>"
+aux_links_new_tab: false
 
-# Color scheme currently only supports "dark" or nil (default)
+# Sort order for navigation links
+# nav_sort: case_insensitive # default, equivalent to nil
+nav_sort: case_sensitive # Capital letters sorted before lowercase
+
+# 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_source: docs # the source that your files originate from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
+
+# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
 color_scheme: nil
 
 # Google Analytics Tracking (optional)
 # e.g, UA-1234567-89
 ga_tracking: UA-2709176-10
+ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default)
 
 plugins:
   - jekyll-seo-tag
 
+kramdown:
+  syntax_highlighter_opts:
+    block:
+      line_numbers: false
+
 compress_html:
   clippings: all
   comments: all
@@ -58,3 +120,5 @@ compress_html:
   startings: []
   blanklines: false
   profile: false
+  # ignore:
+  #   envs: all

_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/fix_linenos.html

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

_includes/footer_custom.html

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

_includes/head.html

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

_includes/nav.html

@@ -1,40 +1,99 @@
-<nav role="navigation" aria-label="Main navigation">
+<ul class="nav-list">
-  <ul class="navigation-list">
+  {%- assign titled_pages = include.pages
-    {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
+        | where_exp:"item", "item.title != nil" -%}
-    {%- for node in pages_list -%}
+
+  {%- comment -%}
+    The values of `title` and `nav_order` can be numbers or strings.
+    Jekyll gives build failures when sorting on mixtures of different types,
+    so numbers and strings need to be sorted separately.
+
+    Here, numbers are sorted by their values, and come before all strings.
+    An omitted `nav_order` value is equivalent to the page's `title` value
+    (except that a numerical `title` value is treated as a string).
+
+    The case-sensitivity of string sorting is determined by `site.nav_sort`.
+  {%- endcomment -%}
+  
+  {%- assign string_ordered_pages = titled_pages
+        | where_exp:"item", "item.nav_order == nil" -%}
+  {%- assign nav_ordered_pages = titled_pages
+        | where_exp:"item", "item.nav_order != nil"  -%}
+
+  {%- comment -%}
+    The nav_ordered_pages have to be added to number_ordered_pages and
+    string_ordered_pages, depending on the nav_order value.
+    The first character of the jsonify result is `"` only for strings.
+  {%- endcomment -%}
+  {%- assign nav_ordered_groups = nav_ordered_pages
+        | group_by_exp:"item", "item.nav_order | jsonify | slice: 0" -%}
+  {%- assign number_ordered_pages = "" | split:"X" -%}
+  {%- for group in nav_ordered_groups -%}
+    {%- if group.name == '"' -%}
+      {%- assign string_ordered_pages = string_ordered_pages | concat: group.items -%}
+    {%- else -%}
+      {%- assign number_ordered_pages = number_ordered_pages | concat: group.items -%}
+    {%- endif -%}
+  {%- endfor -%}
+  
+  {%- assign sorted_number_ordered_pages = number_ordered_pages | sort:"nav_order" -%}
+  
+  {%- comment -%}
+    The string_ordered_pages have to be sorted by nav_order, and otherwise title
+    (where appending the empty string to a numeric title converts it to a string).
+    After grouping them by those values, the groups are sorted, then the items
+    of each group are concatenated.
+  {%- endcomment -%}
+  {%- assign string_ordered_groups = string_ordered_pages
+        | group_by_exp:"item", "item.nav_order | default: item.title | append:''" -%}
+  {%- if site.nav_sort == 'case_insensitive' -%}
+    {%- assign sorted_string_ordered_groups = string_ordered_groups | sort_natural:"name" -%}
+  {%- else -%}
+    {%- assign sorted_string_ordered_groups = string_ordered_groups | sort:"name" -%}
+  {%- endif -%}
+  {%- assign sorted_string_ordered_pages = "" | split:"X" -%}
+  {%- for group in sorted_string_ordered_groups -%}
+    {%- assign sorted_string_ordered_pages = sorted_string_ordered_pages | concat: group.items -%}
+  {%- endfor -%}
+
+  {%- assign pages_list = sorted_number_ordered_pages | concat: sorted_string_ordered_pages -%}
+  
+  {%- for node in pages_list -%}
+    {%- if node.parent == nil -%}
       {%- unless node.nav_exclude -%}
-        {%- if node.parent == nil -%}
+      <li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
-          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
+        {%- if node.has_children -%}
-            {%- if page.parent == node.title or page.grand_parent == node.title -%}
+          <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
-              {%- assign first_level_url = node.url | absolute_url -%}
-            {%- endif -%}
-            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
-            {%- if node.has_children -%}
-              {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
-              <ul class="navigation-list-child-list ">
-                {%- for child in children_list -%}
-                  <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
-                    {%- if page.url == child.url or page.parent == child.title -%}
-                      {%- assign second_level_url = child.url | absolute_url -%}
-                    {%- endif -%}
-                    <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
-                    {%- if child.has_children -%}
-                        {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
-                        <ul class="navigation-list-child-list">
-                        {%- for grand_child in grand_children_list -%}
-                          <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
-                            <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
-                          </li>
-                        {%- endfor -%}
-                      </ul>
-                    {%- endif -%}
-                  </li>
-                {%- endfor -%}
-              </ul>
-            {%- endif -%}
-          </li>
         {%- endif -%}
+        <a href="{{ node.url | absolute_url }}" class="nav-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="nav-list ">
+          {%- for child in children_list -%}
+            {%- unless child.nav_exclude -%}
+            <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+              {%- if child.has_children -%}
+                <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
+              {%- endif -%}
+              <a href="{{ child.url | absolute_url }}" class="nav-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="nav-list">
+                {%- for grand_child in grand_children_list -%}
+                  {%- unless grand_child.nav_exclude -%}
+                  <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
+                    <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+                  </li>
+                  {%- endunless -%}
+                {%- endfor -%}
+                </ul>
+              {%- endif -%}
+            </li>
+            {%- endunless -%}
+          {%- endfor -%}
+          </ul>
+        {%- endif -%}
+      </li>
       {%- endunless -%}
-    {%- endfor -%}
+    {%- endif -%}
-  </ul>
+  {%- endfor -%}
-</nav>
+</ul>

_includes/vendor/anchor_headings.html

@@ -1,18 +1,44 @@
 {% capture headingsWorkspace %}
   {% comment %}
-    Version 1.0.3
+    Copyright (c) 2018 Vladimir "allejo" Jimenez
+
+    Permission is hereby granted, free of charge, to any person
+    obtaining a copy of this software and associated documentation
+    files (the "Software"), to deal in the Software without
+    restriction, including without limitation the rights to use,
+    copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following
+    conditions:
+
+    The above copyright notice and this permission notice shall be
+    included in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+    OTHER DEALINGS IN THE SOFTWARE.
+  {% endcomment %}
+  {% comment %}
+    Version 1.0.7
       https://github.com/allejo/jekyll-anchor-headings
 
     "Be the pull request you wish to see in the world." ~Ben Balter
 
     Usage:
-      {% include anchor_headings.html html=content %}
+      {% include anchor_headings.html html=content anchorBody="#" %}
 
     Parameters:
       * html          (string) - the HTML of compiled markdown generated by kramdown in Jekyll
 
     Optional Parameters:
       * beforeHeading (bool)   : false  - Set to true if the anchor should be placed _before_ the heading's content
+      * anchorAttrs   (string) :  ''    - Any custom HTML attributes that will be added to the `<a>` tag; you may NOT use `href`, `class` or `title`;
+                                          the `%heading%` and `%html_id%` placeholders are available
       * anchorBody    (string) :  ''    - The content that will be placed inside the anchor; the `%heading%` placeholder is available
       * anchorClass   (string) :  ''    - The class(es) that will be used for each anchor. Separate multiple classes with a space
       * anchorTitle   (string) :  ''    - The `title` attribute that will be used for anchors
@@ -42,17 +68,22 @@
     {% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %}
     {% assign headerLevel = nextChar | times: 1 %}
 
-    <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's try to fix it -->
+    <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's see if we need to fix it -->
     {% if headerLevel == 0 %}
-      {% if nextChar != '<' and nextChar != '' %}
+      <!-- Split up the node based on closing angle brackets and get the first one. -->
+      {% assign firstChunk = node | split: '>' | first %}
+
+      <!-- If the first chunk does NOT contain a '<', that means we've broken another HTML tag that starts with 'h' -->
+      {% unless firstChunk contains '<' %}
         {% capture node %}<h{{ node }}{% endcapture %}
-      {% endif %}
+      {% endunless %}
 
       {% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
       {% continue %}
     {% endif %}
 
-    {% assign _workspace = node | split: '</h' %}
+    {% capture _closingTag %}</h{{ headerLevel }}>{% endcapture %}
+    {% assign _workspace = node | split: _closingTag %}
     {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
     {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
     {% assign html_id = _idWorkspace[0] %}
@@ -64,7 +95,7 @@
     {% capture anchor %}{% endcapture %}
 
     {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
-      {% capture anchor %}href="#{{ html_id}}"{% endcapture %}
+      {% capture anchor %}href="#{{ html_id }}"{% endcapture %}
 
       {% if include.anchorClass %}
         {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
@@ -74,6 +105,10 @@
         {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %}
       {% endif %}
 
+      {% if include.anchorAttrs %}
+        {% capture anchor %}{{ anchor }} {{ include.anchorAttrs | replace: '%heading%', header | replace: '%html_id%', html_id }}{% endcapture %}
+      {% endif %}
+
       {% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', header | default: '' }}</a>{% endcapture %}
 
       <!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it -->
@@ -93,8 +128,17 @@
           {{ header }}{{ anchor }}
         {% endif %}
         {{ include.bodySuffix }}
-      </h{{ _workspace | last }}
+      </h{{ headerLevel }}>
     {% endcapture %}
+
+    <!--
+    If we have content after the `</hX>` tag, then we'll want to append that here so we don't lost any content.
+    -->
+    {% assign chunkCount = _workspace | size %}
+    {% if chunkCount > 1 %}
+      {% capture new_heading %}{{ new_heading }}{{ _workspace | last }}{% endcapture %}
+    {% endif %}
+
     {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
   {% endfor %}
-{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}
+{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

_layouts/default.html

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

_layouts/table_wrappers.html

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

_sass/base.scss

@@ -14,6 +14,7 @@
 
 html {
   @include fs-4;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -24,25 +25,18 @@ body {
   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,
+form,
-table {
+fieldset,
+noscript .table-wrapper {
   margin-top: 0;
 }
 
@@ -52,14 +46,15 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.2em;
+  margin-top: 0;
-  margin-bottom: 0.8em;
+  margin-bottom: 1em;
   font-weight: 500;
   line-height: $body-heading-line-height;
   color: $body-heading-color;
 }
 
 p {
+  margin-top: 1em;
   margin-bottom: 1em;
 }
 
@@ -76,15 +71,17 @@ a:not([class]) {
   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;
 }
 

_sass/code.scss

@@ -11,93 +11,310 @@ code {
   border-radius: $border-radius;
 }
 
-pre.highlight,
+// Avoid appearance of dark border around visited code links in Safari
-figure.highlight {
+a:visited code {
-  padding: $sp-3;
+  border-color: $border-color;
-  margin-bottom: 0;
+}
-  -webkit-overflow-scrolling: touch;
-  background-color: $code-background-color;
 
+// Content structure for highlighted code blocks using fences or Liquid
+//
+// ```[LANG]...```, no kramdown line_numbers:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//
+// ```[LANG]...```, kramdown line_numbers = true:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.rouge-gutter.gl > pre.lineno
+//   | td.rouge-code > pre
+//
+// {% highlight LANG %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//
+// {% highlight LANG linenos %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.gutter.gl > pre.lineno
+//   | td.code > pre
+//
+// fix_linenos removes the outermost pre when it encloses table.rouge-table
+//
+// See docs/index-test.md for some tests.
+//
+// No kramdown line_numbers: fences and Liquid highlighting look the same.
+// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
+
+// ```[LANG]...```
+div.highlighter-rouge {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  overflow-x: auto;
+  background-color: $code-background-color;
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  div.highlight,
+  pre.highlight,
   code {
     padding: 0;
+    margin: 0;
     border: 0;
   }
 }
 
-.highlighter-rouge {
+// {% highlight LANG %}...{% endhighlight %},
+// {% highlight LANG linenos %}...{% endhighlight %}:
+figure.highlight {
+  padding: $sp-3;
+  margin-top: 0;
   margin-bottom: $sp-3;
-  overflow: hidden;
+  background-color: $code-background-color;
   border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
+
+  pre,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
 }
 
-.highlight .c { color: #586e75; } // comment //
+// ```[LANG]...```, kramdown line_numbers = true,
-.highlight .err { color: #93a1a1; } // error //
+// {% highlight LANG linenos %}...{% endhighlight %}:
-.highlight .g { color: #93a1a1; } // generic //
+.highlight .table-wrapper {
-.highlight .k { color: #859900; } // keyword //
+  padding: 0;
-.highlight .l { color: #93a1a1; } // literal //
+  margin: 0;
-.highlight .n { color: #93a1a1; } // name //
+  border: 0;
-.highlight .o { color: #859900; } // operator //
+  box-shadow: none;
-.highlight .x { color: #cb4b16; } // other //
+
-.highlight .p { color: #93a1a1; } // punctuation //
+  td,
-.highlight .cm { color: #586e75; } // comment.multiline //
+  pre {
-.highlight .cp { color: #859900; } // comment.preproc //
+    @include fs-2;
-.highlight .c1 { color: #586e75; } // comment.single //
+    min-width: 0;
-.highlight .cs { color: #859900; } // comment.special //
+    padding: 0;
-.highlight .gd { color: #2aa198; } // generic.deleted //
+    background-color: $code-background-color;
-.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph //
+    border: 0;
-.highlight .gr { color: #dc322f; } // generic.error //
+  }
-.highlight .gh { color: #cb4b16; } // generic.heading //
+
-.highlight .gi { color: #859900; } // generic.inserted //
+  td.gl {
-.highlight .go { color: #93a1a1; } // generic.output //
+    padding-right: $sp-3;
-.highlight .gp { color: #93a1a1; } // generic.prompt //
+  }
-.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong //
+
-.highlight .gu { color: #cb4b16; } // generic.subheading //
+  pre {
-.highlight .gt { color: #93a1a1; } // generic.traceback //
+    margin: 0;
-.highlight .kc { color: #cb4b16; } // keyword.constant //
+    line-height: 2;
-.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 .c {
-.highlight .kt { color: #dc322f; } // keyword.type //
+  color: #586e75;
-.highlight .ld { color: #93a1a1; } // literal.date //
+} // comment //
-.highlight .m { color: #2aa198; } // literal.number //
+.highlight .err {
-.highlight .s { color: #2aa198; } // literal.string //
+  color: #93a1a1;
-.highlight .na { color: #555; } // name.attribute //
+} // error //
-.highlight .nb { color: #b58900; } // name.builtin //
+.highlight .g {
-.highlight .nc { color: #268bd2; } // name.class //
+  color: #93a1a1;
-.highlight .no { color: #cb4b16; } // name.constant //
+} // generic //
-.highlight .nd { color: #268bd2; } // name.decorator //
+.highlight .k {
-.highlight .ni { color: #cb4b16; } // name.entity //
+  color: #859900;
-.highlight .ne { color: #cb4b16; } // name.exception //
+} // keyword //
-.highlight .nf { color: #268bd2; } // name.function //
+.highlight .l {
-.highlight .nl { color: #555; } // name.label //
+  color: #93a1a1;
-.highlight .nn { color: #93a1a1; } // name.namespace //
+} // literal //
-.highlight .nx { color: #555; } // name.other //
+.highlight .n {
-.highlight .py { color: #93a1a1; } // name.property //
+  color: #93a1a1;
-.highlight .nt { color: #268bd2; } // name.tag //
+} // name //
-.highlight .nv { color: #268bd2; } // name.variable //
+.highlight .o {
-.highlight .ow { color: #859900; } // operator.word //
+  color: #859900;
-.highlight .w { color: #93a1a1; } // text.whitespace //
+} // operator //
-.highlight .mf { color: #2aa198; } // literal.number.float //
+.highlight .x {
-.highlight .mh { color: #2aa198; } // literal.number.hex //
+  color: #cb4b16;
-.highlight .mi { color: #2aa198; } // literal.number.integer //
+} // other //
-.highlight .mo { color: #2aa198; } // literal.number.oct //
+.highlight .p {
-.highlight .sb { color: #586e75; } // literal.string.backtick //
+  color: #93a1a1;
-.highlight .sc { color: #2aa198; } // literal.string.char //
+} // punctuation //
-.highlight .sd { color: #93a1a1; } // literal.string.doc //
+.highlight .cm {
-.highlight .s2 { color: #2aa198; } // literal.string.double //
+  color: #586e75;
-.highlight .se { color: #cb4b16; } // literal.string.escape //
+} // comment.multiline //
-.highlight .sh { color: #93a1a1; } // literal.string.heredoc //
+.highlight .cp {
-.highlight .si { color: #2aa198; } // literal.string.interpol //
+  color: #859900;
-.highlight .sx { color: #2aa198; } // literal.string.other //
+} // comment.preproc //
-.highlight .sr { color: #dc322f; } // literal.string.regex //
+.highlight .c1 {
-.highlight .s1 { color: #2aa198; } // literal.string.single //
+  color: #586e75;
-.highlight .ss { color: #2aa198; } // literal.string.symbol //
+} // comment.single //
-.highlight .bp { color: #268bd2; } // name.builtin.pseudo //
+.highlight .cs {
-.highlight .vc { color: #268bd2; } // name.variable.class //
+  color: #859900;
-.highlight .vg { color: #268bd2; } // name.variable.global //
+} // comment.special //
-.highlight .vi { color: #268bd2; } // name.variable.instance //
+.highlight .gd {
-.highlight .il { color: #2aa198; } // literal.number.integer.long //
+  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)

_sass/color_schemes/dark.scss

@@ -1,4 +1,3 @@
-
 $body-background-color: $grey-dk-300;
 $sidebar-color: $grey-dk-300;
 $border-color: $grey-dk-200;
@@ -15,3 +14,4 @@ $base-button-color: $grey-dk-250;
 $code-background-color: $grey-dk-250;
 $search-background-color: $grey-dk-250;
 $table-background-color: $grey-dk-250;
+$feedback-color: darken($sidebar-color, 3%);

_sass/content.scss

@@ -5,9 +5,19 @@
 //
 // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
 
-.page-content {
+.main-content {
   line-height: $content-line-height;
 
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
   a {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -19,6 +29,12 @@
     padding-left: 1.5em;
   }
 
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
   ol {
     list-style-type: none;
     counter-reset: step-counter;
@@ -93,7 +109,7 @@
 
   dl {
     display: grid;
-    grid-template-columns: max-content 1fr;
+    grid-template: auto / 10em 1fr;
   }
 
   dt,
@@ -102,16 +118,50 @@
   }
 
   dt {
+    grid-column: 1;
+    font-weight: 500;
     text-align: right;
-
     &::after {
       content: ":";
     }
   }
 
   dd {
+    grid-column: 2;
+    margin-bottom: 0;
     margin-left: 1em;
-    font-weight: 500;
+    blockquote,
+    div,
+    dl,
+    dt,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    ol,
+    p,
+    pre,
+    table,
+    ul,
+    .table-wrapper {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  dd,
+  ol,
+  ul {
+    dl:first-child {
+      dt:first-child,
+      dd:nth-child(2) {
+        margin-top: 0;
+      }
+    }
   }
 
   .anchor-heading {
@@ -132,7 +182,7 @@
       display: inline-block;
       width: 100%;
       height: 100%;
-      fill: $link-color;
+      color: $link-color;
       visibility: hidden;
     }
   }
@@ -149,6 +199,10 @@
     }
   }
 
+  summary {
+    cursor: pointer;
+  }
+
   h1,
   h2,
   h3,
@@ -156,5 +210,22 @@
   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,129 +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;
-//$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
-//);

_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;
+  padding-left: 0.56em;
-  margin-right: $sp-1;
+  margin-right: $sp-2;
-  margin-left: $sp-1;
+  margin-left: $sp-2;
   color: $white;
   text-transform: uppercase;
   vertical-align: middle;
   background-color: $blue-100;
   @include fs-2;
+  border-radius: 12px;
 }
 
 .label-green {

_sass/layout.scss

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

_sass/modules.scss

@@ -0,0 +1,20 @@
+//
+// 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";
+@import "./print";

_sass/navigation.scss

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

_sass/overrides.scss

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

_sass/print.scss

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

_sass/search.scss

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

_sass/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,12 +2,31 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
-$root-font-size: 16px !default;         // Base font-size for rems
+$root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
-$content-line-height: 1.5 !default;
+$content-line-height: 1.6 !default;
-$body-heading-line-height: 1.15 !default !default;
+$body-heading-line-height: 1.25 !default;
+
+//
+// Font size
+// `-sm` suffix is the size at the small (and above) media query
+//
+
+$font-size-1: 9px !default;
+$font-size-1-sm: 10px !default;
+$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small
+$font-size-3: 12px !default; //h5
+$font-size-4: 14px !default;
+$font-size-5: 16px !default; //h3
+$font-size-6: 18px !default; //h2
+$font-size-7: 24px !default;
+$font-size-8: 32px !default; //h1
+$font-size-9: 36px !default;
+$font-size-10: 42px !default;
+$font-size-10-sm: 48px !default;
 
 //
 // Colors
@@ -56,6 +75,7 @@ $sidebar-color: $grey-lt-000 !default;
 $search-background-color: $white !default;
 $table-background-color: $white !default;
 $code-background-color: $grey-lt-000 !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
 
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
@@ -82,7 +102,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
@@ -93,8 +113,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5  rem == 24px
 $sp-6: map-get($spacers, sp-6) !default; // 2    rem == 32px
 $sp-7: map-get($spacers, sp-7) !default; // 2.5  rem == 40px
 $sp-8: map-get($spacers, sp-8) !default; // 3    rem == 48px
-$sp-9: map-get($spacers, sp-9) !default; // 4    rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5  rem == 56px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5  rem == 48px
+$sp-10: map-get($spacers, sp-10) !default; // 4  rem == 64px
 
 //
 // Borders
@@ -112,9 +132,13 @@ $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
 
 //
 // Media queries in pixels
@@ -125,5 +149,5 @@ $media-queries: (
   sm: 500px,
   md: $content-width,
   lg: $content-width + $nav-width,
-  xl: 1400px
+  xl: 1400px,
 ) !default;

_sass/support/mixins/_layout.scss

@@ -15,9 +15,7 @@
     @media (min-width: rem($value)) {
       @content;
     }
-  }
+  } @else {
-
-  @else {
     @warn "No value could be retrieved from `#{$media-query}`. "
       + "Please make sure it is defined in `$media-queries` map.";
   }

_sass/support/mixins/_typography.scss

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

_sass/typography.scss

@@ -22,11 +22,15 @@ h3,
 h4,
 .text-delta {
   @include fs-2;
-  font-weight: 300;
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
 
+h4 code {
+  text-transform: none;
+}
+
 h5,
 .text-epsilon {
   @include fs-3;
@@ -39,12 +43,6 @@ h6,
   color: $grey-dk-200;
 }
 
-li {
-  .highlight {
-    margin-top: $sp-2;
-  }
-}
-
 .text-small {
   @include fs-2;
 }
@@ -53,6 +51,14 @@ li {
   font-family: $mono-font-family !important;
 }
 
+.text-left {
+  text-align: left !important;
+}
+
 .text-center {
   text-align: center !important;
 }
+
+.text-right {
+  text-align: right !important;
+}

_sass/utilities/_layout.scss

@@ -5,11 +5,21 @@
 
 // Display
 
-.d-block { display: block !important; }
+.d-block {
-.d-flex { display: flex !important; }
+  display: block !important;
-.d-inline { display: inline !important; }
+}
-.d-inline-block { display: inline-block !important; }
+.d-flex {
-.d-none { display: none !important; }
+  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}-block {
-      .d-#{$media-query}-flex { display: flex !important; }
+        display: block !important;
-      .d-#{$media-query}-inline { display: inline !important; }
+      }
-      .d-#{$media-query}-inline-block { display: inline-block !important; }
+      .d-#{$media-query}-flex {
-      .d-#{$media-query}-none { display: none !important; }
+        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-baseline {
-.v-align-bottom { vertical-align: bottom !important; }
+  vertical-align: baseline !important;
-.v-align-middle { vertical-align: middle !important; }
+}
-.v-align-text-bottom { vertical-align: text-bottom !important; }
+.v-align-bottom {
-.v-align-text-top { vertical-align: text-top !important; }
+  vertical-align: bottom !important;
-.v-align-top { vertical-align: top !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/_spacing.scss

@@ -7,16 +7,31 @@
 
 // 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; }
+  .m-#{$scale} {
-  .mt-#{$scale} { margin-top: #{$size} !important; }
+    margin: #{$size} !important;
-  .mr-#{$scale} { margin-right: #{$size} !important; }
+  }
-  .mb-#{$scale} { margin-bottom: #{$size} !important; }
+  .mt-#{$scale} {
-  .ml-#{$scale} { margin-left: #{$size} !important; }
+    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-#{$scale}-auto {
-
+    margin-right: auto !important;
-.mx-auto {
+    margin-left: auto !important;
-  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; }
+      .m-#{$media-query}-#{$scale} {
-      .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
+        margin: #{$size} !important;
-      .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
+      }
-      .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
+      .mt-#{$media-query}-#{$scale} {
-      .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
+        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; }
+  .p-#{$scale} {
-  .pt-#{$scale} { padding-top: #{$size} !important; }
+    padding: #{$size} !important;
-  .pr-#{$scale} { padding-right: #{$size} !important; }
+  }
-  .pb-#{$scale} { padding-bottom: #{$size} !important; }
+  .pt-#{$scale} {
-  .pl-#{$scale} { padding-left: #{$size} !important; }
+    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; }
+      .p-#{$media-query}-#{$scale} {
-      .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
+        padding: #{$size} !important;
-      .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
+      }
-      .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
+      .pt-#{$media-query}-#{$scale} {
-      .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
+        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/vendor/normalize.scss/README.md

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

_sass/vendor/normalize.scss/normalize.scss

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

_sass/vendor/normalize.scss/package.json

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

assets/css/dark-mode-preview.scss

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

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

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

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

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

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

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

assets/css/just-the-docs.scss

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

assets/js/dark-mode-preview.js

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

assets/js/just-the-docs.js

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

assets/js/search-data.json

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

assets/js/zzzz-search-data.json

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

docker-compose.yml

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

docs/configuration.md

@@ -22,6 +22,7 @@ Just the Docs has some specific configuration parameters that can be defined in
 
 View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
 
+
 ## Site logo
 
 ```yaml
@@ -36,9 +37,29 @@ logo: "/assets/images/just-the-docs.png"
 # Supports true (default) or false
 search_enabled: true
 
-# Enable support for hyphenated search words:
+search:
-search_tokenizer_separator: /[\s/]+/
+  # Split pages into sections that can be searched individually
-
+  # Supports 1 - 6, default: 2
+  heading_level: 2
+  # Maximum amount of previews per search result
+  # Default: 3
+  previews: 3
+  # Maximum amount of words to display before a matched word in the preview
+  # Default: 5
+  preview_words_before: 5
+  # Maximum amount of words to display after a matched word in the preview
+  # Default: 10
+  preview_words_after: 10
+  # Set the search token separator
+  # Default: /[\s\-/]+/
+  # Example: enable support for hyphenated search words
+  tokenizer_separator: /[\s/]+/
+  # Display the relative url in search results
+  # Supports true (default) or false
+  rel_url: true
+  # Enable or disable the search button that appears in the bottom right corner of every page
+  # Supports true or false (default)
+  button: false
 ```
 
 ## Aux links
@@ -48,6 +69,9 @@ search_tokenizer_separator: /[\s/]+/
 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
@@ -56,26 +80,62 @@ aux_links:
 # Heading anchor links appear on hover over h1-h6 tags in page content
 # allowing users to deep link to a particular heading on a page.
 #
-# Supports true (default) or false/nil
+# Supports true (default) or false
 heading_anchors: true
 ```
 
 ## Footer content
 
 ```yaml
-# Footer content appears at the bottom of every page's main content
+# Footer 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>"
+# appears at the bottom of every page's main content
+# Note: The footer_content option is deprecated and will be removed in a future major release. Please use `_includes/footer_custom.html` for more robust
+markup / liquid-based content.
+footer_content: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/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_source: docs # the source that your files originate from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
 ```
 
+_note: `footer_content` is deprecated, but still supported. For a better experience we have moved this into an include called `_includes/footer_custom.html` which will allow for robust markup / liquid-based content._
+
+- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format
+- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime)
+- `gh_edit_repository` is the URL of the project's GitHub repository
+- `gh_edit_branch` is the branch that the docs site is served from; defaults to `master`
+- `gh_edit_source` is the source directory that your project files are stored in (should be the same as [site.source](https://jekyllrb.com/docs/configuration/options/))
+- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode
+
 ## Color scheme
 
 ```yaml
-# Color scheme currently only supports "dark" or nil (default)
+# Color scheme supports "light" (default) and "dark"
-color_scheme: "dark"
+color_scheme: dark
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
-<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+
+jtd.addEvent(toggleDarkMode, 'click', function(){
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
+  } else {
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
+  }
+});
+</script>
 
 See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
 
@@ -85,4 +145,54 @@ See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more
 # Google Analytics Tracking (optional)
 # e.g, UA-1234567-89
 ga_tracking: UA-5555555-55
+ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true by default)
 ```
+
+## Document collections
+
+By default, the navigation and search include normal [pages](https://jekyllrb.com/docs/pages/).
+Instead, you can also use [Jekyll collections](https://jekyllrb.com/docs/collections/) which group documents semantically together.
+
+For example, put all your documentation files in the `_docs` folder and create the `docs` collection:
+```yaml
+# Define Jekyll collections
+collections:
+  # Define a collection named "docs", its documents reside in the "_docs" directory
+  docs:
+    permalink: "/:collection/:path/"
+    output: true
+
+just_the_docs:
+  # Define which collections are used in just-the-docs
+  collections:
+    # Reference the "docs" collection
+    docs:
+      # Give the collection a name
+      name: Documentation
+      # Exclude the collection from the navigation
+      # Supports true or false (default)
+      nav_exclude: false
+      # Exclude the collection from the search
+      # Supports true or false (default)
+      search_exclude: false
+```
+
+You can reference multiple collections.
+This creates categories in the navigation with the configured names.
+```yaml
+collections:
+  docs:
+    permalink: "/:collection/:path/"
+    output: true
+  tutorials:
+    permalink: "/:collection/:path/"
+    output: true
+
+just_the_docs:
+  collections:
+    docs:
+      name: Documentation
+    tutorials:
+      name: Tutorials
+```
+

docs/customization.md

@@ -29,37 +29,77 @@ To enable a color scheme, set the `color_scheme` parameter in your site's `_conf
 {: .no_toc }
 
 ```yaml
-# Color scheme currently only supports "dark" or nil (default)
+# Color scheme supports "light" (default) and "dark"
-color_scheme: "dark"
+color_scheme: dark
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
-<script type="text/javascript" src="{{ "/assets/js/dark-mode-preview.js" | absolute_url }}"></script>
+<script>
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
 
-## Specific visual customization
+jtd.addEvent(toggleDarkMode, 'click', function(){
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
+  } else {
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
+  }
+});
+</script>
 
-To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc. are derived from these variables. To override a specific variable, uncomment its line and change its value.
+## Custom schemes
 
-For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it, and change its value to our `$blue-000` variable, or another shade of your choosing.
+### Define a custom scheme
+
+You can add custom schemes.
+If you want to add a scheme named `foo` (can be any name) just add a file `_sass/color_schemes/foo.scss` (replace `foo` by your scheme name) 
+where you override theme variables to change colors, fonts, spacing, etc.
+
+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 dependencies to fail.
+Please use scheme files.
 
-## Override styles
+### Use a custom scheme
 
-For styles that aren't defined as a variables, you may want to modify specific CSS classes. To add your own CSS overrides at the end of the cascade, edit `_sass/overrides.scss`. This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
+To use the custom color scheme, only set the `color_scheme` parameter in your site's `_config.yml` file:
+```yaml
+color_scheme: foo
+```
+
+### Switchable custom scheme
+
+If you want to be able to change the scheme dynamically, for example via javascript, just add a file `assets/css/just-the-docs-foo.scss` (replace `foo` by your scheme name)
+with the following content:`
+
+{% raw %}
+    ---
+    ---
+    {% include css/just-the-docs.scss.liquid color_scheme="foo" %}
+{% endraw %}
+
+This allows you to switch the scheme via the following javascript.
+
+```js
+jtd.setTheme('foo');
+```
+
+## Override and completely custom styles
+
+For styles that aren't defined as variables, you may want to modify specific CSS classes.
+Additionally, you may want to add completely custom CSS specific to your content.
+To do this, put your styles in the file `_sass/custom/custom.scss`.
+This will allow for all overrides to be kept in a single file, and for any upstream changes to still be applied.
 
 For example, if you'd like to add your own styles for printing a page, you could add the following styles.
 

docs/index-test.md

@@ -39,7 +39,7 @@ GitHubPages::Dependencies.gems.each do |gem, version|
 end
 ```
 
-#### [](#header-4)Header 4
+#### [](#header-4)Header 4 `with code not transformed`
 
 *   This is an unordered list following a header.
 *   This is an unordered list following a header.
@@ -140,6 +140,37 @@ end
 <dd>Green</dd>
 </dl>
 
+#### Multiple description terms and values
+
+Term
+: Brief description of Term
+
+Longer Term
+: Longer description of Term,
+  possibly more than one line
+
+Term
+: First description of Term,
+  possibly more than one line
+
+: Second description of Term,
+  possibly more than one line
+
+Term1
+Term2
+: Single description of Term1 and Term2,
+  possibly more than one line
+
+Term1
+Term2
+: First description of Term1 and Term2,
+  possibly more than one line
+
+: Second description of Term1 and Term2,
+  possibly more than one line
+  
+### More code
+
 ```
 Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
 ```

docs/navigation-structure.md

@@ -7,11 +7,14 @@ nav_order: 5
 # Navigation Structure
 {: .no_toc }
 
-## Table of contents
+<details open markdown="block">
-{: .no_toc .text-delta }
+  <summary>
-
+    Table of contents
+  </summary>
+  {: .text-delta }
 1. TOC
 {:toc}
+</details>
 
 ---
 
@@ -25,7 +28,7 @@ By default, all pages will appear as top level pages in the main nav unless a pa
 
 ## Ordering pages
 
-To specify a page order, use the `nav_order` parameter in your pages' YAML front matter.
+To specify a page order, you can use the `nav_order` parameter in your pages' YAML front matter.
 
 #### Example
 {: .no_toc }
@@ -38,6 +41,14 @@ nav_order: 4
 ---
 ```
 
+The parameter values determine the order of the top-level pages, and of child pages with the same parent. You can reuse the same parameter values (e.g., integers starting from 1) for the child pages of different parents.
+
+The parameter values can be numbers (integers, floats) and/or strings. When you omit `nav_order` parameters, they default to the titles of the pages, which are ordered alphabetically. Pages with numerical `nav_order` parameters always come before those with strings or default `nav_order` parameters. If you want to make the page order independent of the page titles, you can set explicit `nav_order` parameters on all pages.
+
+By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case. Enclosing strings in quotation marks is optional.
+
+> *Note for users of previous versions:* `nav_sort: case_insensitive` previously affected the ordering of numerical `nav_order` parameters: e.g., `10` came before `2`. Also, all pages with explicit `nav_order` parameters previously came before all pages with default parameters. Both were potentially confusing, and they have now been eliminated. 
+
 ---
 
 ## Excluding pages
@@ -55,6 +66,10 @@ nav_exclude: true
 ---
 ```
 
+The `nav_exclude` parameter does not affect the [auto-generating list of child pages](#auto-generating-table-of-contents), which you can use to access pages excluded from the main navigation.
+
+Pages with no `title` are automatically excluded from the navigation. 
+
 ---
 
 ## Pages with children
@@ -190,9 +205,9 @@ This would create the following navigation structure:
 
 ---
 
-## Auxiliary Navigation
+## Auxiliary Links
 
-To add a auxiliary navigation item to your site (in the upper right on all pages), add it to the `aux_nav` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-nav) in your site's `_config.yml` file.
+To add auxiliary links to your site (in the upper right on all pages), add it to the `aux_links` [configuration option]({{ site.baseurl }}{% link docs/configuration.md %}#aux-links) in your site's `_config.yml` file.
 
 #### Example
 {: .no_toc }
@@ -224,4 +239,21 @@ To generate a Table of Contents on your docs pages, you can use the `{:toc}` met
 {:toc}
 ```
 
-This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself.
+This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. To get an unordered list, replace  `1. TOC` above by `- TOC`.
+
+### Collapsible Table of Contents
+
+The Table of Contents can be made collapsible using the `<details>` and `<summary>` elements , as in the following example. The attribute `open` (expands the Table of Contents by default) and the styling with `{: .text-delta }` are optional.
+
+```markdown
+<details open markdown="block">
+  <summary>
+    Table of contents
+  </summary>
+  {: .text-delta }
+1. TOC
+{:toc}
+</details>
+```
+
+The result is shown at [the top of this page](#navigation-structure) (`{:toc}` can be used only once on each page).

docs/search.md

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

docs/tests/index.md

@@ -0,0 +1,22 @@
+---
+layout: default
+title: Tests
+has_children: true
+nav_order: 100
+---
+
+# Tests
+
+ The main documentation pages of this theme illustrate the use of many of its features, which to some extent tests their implementation. The pages linked below provide further test cases for particular features, and may be useful for regression testing when developing new features.
+ 
+The default configuration does not include the test pages. To include them, *commment-out* the following line in `_config.yml`:
+
+```yaml
+, "docs/tests/"
+```
+so that it is:
+```yaml
+# , "docs/tests/"
+```
+
+(Apparently Jekyll's `include` does *not* override `exclude`  for the same folder...)

docs/tests/navigation/disambiguation/a.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Tests for disambiguation A
+has_children: true
+---
+
+# A
+
+A top-level page
+
+```yaml
+title: Tests for disambiguation A
+has_children: true
+```

docs/tests/navigation/disambiguation/b.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Tests for disambiguation B
+has_children: true
+---
+
+# B
+
+A top-level page
+
+```yaml
+title: Tests for disambiguation B
+has_children: true
+```

docs/tests/navigation/disambiguation/ca.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Tests for disambiguation C
+parent: Tests for disambiguation A
+has_children: true
+---
+
+# C
+
+A child of page A, and parent of page D
+
+```yaml
+title: Tests for disambiguation C
+parent: Tests for disambiguation A
+has_children: true
+```

docs/tests/navigation/disambiguation/cb.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Tests for disambiguation C
+parent: Tests for disambiguation B
+has_children: true
+---
+
+# C
+
+A child of page B, and parent of page D
+
+```yaml
+title: Tests for disambiguation C
+parent: Tests for disambiguation B
+has_children: true
+```

docs/tests/navigation/disambiguation/dca.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Tests for disambiguation D
+parent: Tests for disambiguation C
+grand_parent: Tests for disambiguation A
+---
+
+# D
+
+A grandchild of page A
+
+```yaml
+title: Tests for disambiguation D
+parent: Tests for disambiguation C
+grand_parent: Tests for disambiguation A
+```

docs/tests/navigation/disambiguation/dcb.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Tests for disambiguation D
+parent: Tests for disambiguation C
+grand_parent: Tests for disambiguation B
+---
+
+# D
+
+A grandchild of page B
+
+```yaml
+title: Tests for disambiguation D
+parent: Tests for disambiguation C
+grand_parent: Tests for disambiguation B
+```

docs/tests/navigation/disambiguation/index.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Disambiguation 
+parent: Navigation
+grand_parent: Tests
+---
+
+# Disambiguation
+
+When different pages with children have the same title, referencing the relevant grandparent in the children disambiguates which page is intended.
+
+- [Page A](a/) has a child [page with title C](ca/), and a grandchild [page with title D](dca/).
+- [Page B](b/) has a child [page with title C](cb/), and a grandchild [page with title D](dcb/).
+- The grandchild pages specify their parent and grandparent pages, so there is no ambiguity.

docs/tests/navigation/exclusion/0.md

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Tests for exclusion 0
+has_children: true
+nav_exclude: true
+---
+# Tests for exclusion 0
+
+```yaml
+title: Tests for exclusion 0
+has_children: true
+nav_exclude: true
+```

docs/tests/navigation/exclusion/00.md

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Tests for exclusion 00
+parent: Tests for exclusion 0
+has_children: true
+nav_exclude: true
+---
+# Tests for exclusion 00
+
+```yaml
+title: Tests for exclusion 00
+parent: Tests for exclusion 0
+has_children: true
+nav_exclude: true
+```

docs/tests/navigation/exclusion/000.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 000
+parent: Tests for exclusion 00
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: true
+---
+# Tests for exclusion 000
+
+```yaml
+title: Tests for exclusion 000
+parent: Tests for exclusion 00
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: true
+```

docs/tests/navigation/exclusion/001.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 001
+parent: Tests for exclusion 00
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: false
+---
+# Tests for exclusion 001
+
+```yaml
+title: Tests for exclusion 001
+parent: Tests for exclusion 00
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: false
+```

docs/tests/navigation/exclusion/01.md

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Tests for exclusion 01
+parent: Tests for exclusion 0
+has_children: true
+nav_exclude: false
+---
+# Tests for exclusion 01
+
+```yaml
+title: Tests for exclusion 01
+parent: Tests for exclusion 0
+has_children: true
+nav_exclude: false
+```

docs/tests/navigation/exclusion/010.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 010
+parent: Tests for exclusion 01
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: true
+---
+# Tests for exclusion 010
+
+```yaml
+title: Tests for exclusion 010
+parent: Tests for exclusion 01
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: true
+```

docs/tests/navigation/exclusion/011.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 011
+parent: Tests for exclusion 01
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: false
+---
+# Tests for exclusion 011
+
+```yaml
+title: Tests for exclusion 011
+parent: Tests for exclusion 01
+grand_parent: Tests for exclusion 0
+has_children: false
+nav_exclude: false
+```

docs/tests/navigation/exclusion/1.md

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Tests for exclusion 1
+has_children: true
+nav_exclude: false
+---
+# Tests for exclusion 1
+
+```yaml
+title: Tests for exclusion 1
+has_children: true
+nav_exclude: false
+```

docs/tests/navigation/exclusion/10.md

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Tests for exclusion 10
+parent: Tests for exclusion 1
+has_children: true
+nav_exclude: true
+---
+# Tests for exclusion 10
+
+```yaml
+title: Tests for exclusion 10
+parent: Tests for exclusion 1
+has_children: true
+nav_exclude: true
+```

docs/tests/navigation/exclusion/100.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 100
+parent: Tests for exclusion 10
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: true
+---
+# Tests for exclusion 100
+
+```yaml
+title: Tests for exclusion 100
+parent: Tests for exclusion 10
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: true
+```

docs/tests/navigation/exclusion/101.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 101
+parent: Tests for exclusion 10
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: false
+---
+# Tests for exclusion 101
+
+```yaml
+title: Tests for exclusion 101
+parent: Tests for exclusion 10
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: false
+```

docs/tests/navigation/exclusion/11.md

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Tests for exclusion 11
+parent: Tests for exclusion 1
+has_children: true
+nav_exclude: false
+---
+# Tests for exclusion 11
+
+```yaml
+title: Tests for exclusion 11
+parent: Tests for exclusion 1
+has_children: true
+nav_exclude: false
+```

docs/tests/navigation/exclusion/110.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 110
+parent: Tests for exclusion 11
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: true
+---
+# Tests for exclusion 110
+
+```yaml
+title: Tests for exclusion 110
+parent: Tests for exclusion 11
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: true
+```

docs/tests/navigation/exclusion/111.md

@@ -0,0 +1,17 @@
+---
+layout: default
+title: Tests for exclusion 111
+parent: Tests for exclusion 11
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: false
+---
+# Tests for exclusion 111
+
+```yaml
+title: Tests for exclusion 111
+parent: Tests for exclusion 11
+grand_parent: Tests for exclusion 1
+has_children: false
+nav_exclude: false
+```

docs/tests/navigation/exclusion/excluded.md

@@ -0,0 +1,11 @@
+---
+layout: default
+nav_exclude: true
+---
+# Tests for exclusion untitled and excluded
+
+This page does not have a `title`, and it is explicitly excluded from the navigation
+
+```yaml
+nav_exclude: true
+```

docs/tests/navigation/exclusion/index.md

@@ -0,0 +1,36 @@
+---
+layout: default
+title: Exclusion
+parent: Navigation
+grand_parent: Tests
+---
+
+# Exclusion
+
+Pages excluded from the main navigation can have parents and children. Navigation to and between excluded pages can be supported by the auto-generating list of child pages inserted at the bottom of each page, and by links to parents in the breadcrumbs at the top of each page.
+
+The following tests cover all combinations of excluded and included pages for the top level, child pages, and grandchild pages. The last binary digit in a page title indicates whether the page is included (1) or excluded (0); preceding digits refer to its parent and grandparent.
+
+## Included in main navigation
+
+- [Tests for exclusion 1](1/)
+- [Tests for exclusion 11](11/)
+- [Tests for exclusion 111](111/)
+
+## Included only in child navigation
+
+- [Tests for exclusion 110](110/)
+- [Tests for exclusion 10](10/)
+- [Tests for exclusion 101](101/)
+- [Tests for exclusion 100](100/)
+- [Tests for exclusion 01](01/)
+- [Tests for exclusion 011](011/)
+- [Tests for exclusion 010](010/)
+- [Tests for exclusion 00](00/)
+- [Tests for exclusion 001](001/)
+- [Tests for exclusion 000](000/)
+
+## Not included in main or child navigation
+
+- [Tests for exclusion 0](0/)
+- ["Untitled"](untitled/)

docs/tests/navigation/exclusion/untitled.md

@@ -0,0 +1,6 @@
+---
+layout: default
+---
+# Tests for exclusion untitled
+
+This page does not have a `title`, and it is excluded from the navigation -- unless it is located in a Jekyll collection (which provides default titles). To exclude a title-less page from the navigation, regardless of whether it is located in a collection, set `nav_exclude: true`.

docs/tests/navigation/index.md

@@ -0,0 +1,8 @@
+---
+layout: default
+title: Navigation
+parent: Tests
+has_children: true
+---
+
+# Navigation

docs/tests/navigation/order/default/10.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: "10"
+parent: Default
+grand_parent: Tests for order
+---
+
+# 10
+
+```yaml
+title: "10"
+parent: Default
+grand_parent: Tests for order
+```

docs/tests/navigation/order/default/2.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: "2"
+parent: Default
+grand_parent: Tests for order
+---
+
+# 2
+
+```yaml
+title: "2"
+parent: Default
+grand_parent: Tests for order
+```

docs/tests/navigation/order/default/a.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: A
+parent: Default
+grand_parent: Tests for order
+---
+
+# A
+
+```yaml
+title: A
+parent: Default
+grand_parent: Tests for order
+```

docs/tests/navigation/order/default/aa-lower.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: aa
+parent: Default
+grand_parent: Tests for order
+---
+
+# aa
+
+```yaml
+title: aa
+parent: Default
+grand_parent: Tests for order
+```

docs/tests/navigation/order/default/aa.md

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Aa
+parent: Default
+grand_parent: Tests for order
+---
+
+# Aa
+
+```yaml
+title: Aa
+parent: Default
+grand_parent: Tests for order
+```

docs/tests/navigation/order/default/index.md

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Default
+parent: Tests for order
+nav_order: 1
+has_children: true
+---
+
+# Default Order
+
+When `nav_order` fields are omitted, the pages are ordered alphabetically by their titles.
+
+By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case).
+
+Digits precede letters, and numeric titles are ordered lexicographically: `10` precedes `2` (in contrast to explicit numeric `nav_order` values).

docs/tests/navigation/order/floats/-1.1.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: "-1.1"
+nav_order: -1.1
+parent: Floats
+grand_parent: Tests for order
+---
+
+# -1.1
+
+```yaml
+title: "-1.1"
+nav_order: -1.1
+parent: Floats
+grand_parent: Tests for order
+```

docs/tests/navigation/order/floats/0.0.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: "0.0"
+nav_order: 0.0
+parent: Floats
+grand_parent: Tests for order
+---
+
+# 0.0
+
+```yaml
+title: "0.0"
+nav_order: 0.0
+parent: Floats
+grand_parent: Tests for order
+```

docs/tests/navigation/order/floats/10.0.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: "10.0"
+nav_order: 10.0
+parent: Floats
+grand_parent: Tests for order
+---
+
+# 10.0
+
+```yaml
+title: "10.0"
+nav_order: 10.0
+parent: Floats
+grand_parent: Tests for order
+```

docs/tests/navigation/order/floats/2.2222.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: "2.2222"
+nav_order: 2.2222
+parent: Floats
+grand_parent: Tests for order
+---
+
+# 2.2222
+
+```yaml
+title: "2.2222"
+nav_order: 2.2222
+parent: Floats
+grand_parent: Tests for order
+```

docs/tests/navigation/order/floats/index.md

@@ -0,0 +1,13 @@
+---
+layout: default
+title: Floats
+parent: Tests for order
+nav_order: 4
+has_children: true
+---
+
+# Floating-Point Order
+
+When `nav_order` fields are floating-point numbers, the pages are ordered in increasing order of the numerical values.
+
+Floats include `0.0` and negative values. 

docs/tests/navigation/order/index.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Order
+parent: Navigation
+grand_parent: Tests
+---
+
+# Order
+
+The value of `nav_order` can be numbers (integers, floats) and/or strings. The following tests illustrate their effects.
+
+- [Default](default/), using `title` instead of `nav_order` fields.
+- [Strings](strings/), lexicographically ordered, possibly case-insensitively.
+- [Integers](integers/), numerically ordered.
+- [Floats](floats/), numerically ordered.
+- [Mixture](mixture/), with numbers before strings.

docs/tests/navigation/order/integers/-1.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: "-1"
+nav_order: -1
+parent: Integers
+grand_parent: Tests for order
+---
+
+# -1
+
+```yaml
+title: "-1"
+nav_order: -1
+parent: Integers
+grand_parent: Tests for order
+```

docs/tests/navigation/order/integers/0.md

@@ -0,0 +1,16 @@
+---
+layout: default
+title: "0"
+nav_order: 0
+parent: Integers
+grand_parent: Tests for order
+---
+
+# 0
+
+```yaml
+title: "0"
+nav_order: 0
+parent: Integers
+grand_parent: Tests for order
+```