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

Permissioning

.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/workflows/ci-master.yml

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

.github/workflows/ci.yml

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

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

README.md

@@ -1,10 +1,10 @@
 <p align="right">
-    <a href="https://badge.fury.io/rb/just-the-docs"><img src="https://badge.fury.io/rb/just-the-docs.svg" alt="Gem version"></a> <a href="https://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">
     <h1 align="center">Just the Docs</h1>
-    <p align="center">A modern, high customizable, responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub Pages with few dependencies.</p>
+    <p align="center">A modern, highly customizable, and responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub Pages with few dependencies.</p>
     <p align="center"><strong><a href="https://pmarsceill.github.io/just-the-docs/">See it in action!</a></strong></p>
     <br><br><br>
 </p>

_config.yml

@@ -21,9 +21,15 @@ url: "https://pmarsceill.github.io" # the base hostname & protocol for your site
 permalink: pretty
 exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json",  "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
 
+# Set a path/url to a logo that will be displayed instead of the title
+#logo: "/assets/images/just-the-docs.png"
+
 # Enable or disable the site search
 search_enabled: true
 
+# Set the search token separator for hyphenated-word search:
+search_tokenizer_separator: /[\s/]+/
+
 # Enable or disable heading anchors
 heading_anchors: true
 
@@ -32,15 +38,42 @@ aux_links:
   "Just the Docs on GitHub":
     - "//github.com/pmarsceill/just-the-docs"
 
-# Footer content appears at the bottom of every page's main content
-footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
+# Makes Aux links open in a new tab. Default is false
+aux_links_new_tab: false
 
-# Color scheme currently only supports "dark" or nil (default)
+# Sort order for navigation links
+nav_sort: case_insensitive # default, equivalent to nil
+# nav_sort: case_sensitive # Capital letters sorted before lowercase
+
+# Footer content
+# appears at the bottom of every page's main content
+
+# Back to top link
+back_to_top: true
+back_to_top_text: "Back to top"
+
+footer_content: "Copyright &copy; 2017-2020 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
+
+# Footer last edited timestamp
+last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
+last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
+
+
+
+# Footer "Edit this page on GitHub" link text
+gh_edit_link: true # show or hide edit this page link
+gh_edit_link_text: "Edit this page on GitHub"
+gh_edit_repository: "https://github.com/pmarsceill/just-the-docs" # the github URL for your repo
+gh_edit_branch: "master" # the branch that your docs is served from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
+
+# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
 color_scheme: nil
 
 # Google Analytics Tracking (optional)
 # e.g, UA-1234567-89
 ga_tracking: UA-2709176-10
+ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true/nil by default)
 
 plugins:
   - jekyll-seo-tag
@@ -50,5 +83,5 @@ compress_html:
   comments: all
   endings: all
   startings: []
-  blank_lines: false
+  blanklines: false
   profile: false

_includes/css/custom.scss.liquid

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

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

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

_includes/head.html

@@ -2,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="stylesheet" href="{{ '/assets/css/just-the-docs.css' | absolute_url }}">
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | absolute_url }}">
 
   {% if site.ga_tracking != nil %}
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
@@ -21,7 +21,7 @@
       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 %}

_includes/nav.html

@@ -1,25 +1,35 @@
 <nav role="navigation" aria-label="Main navigation">
   <ul class="navigation-list">
-    {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
+    {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
+    {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
+    {%- if site.nav_sort == 'case_insensitive' -%}
+      {%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
+      {%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
+    {%- else -%}
+      {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
+      {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
+    {%- endif -%}
+    {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
     {%- for node in pages_list -%}
       {%- unless node.nav_exclude -%}
-        {%- if node.parent == nil -%}
+        {%- if node.parent == nil and node.title -%}
           <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
             {%- if page.parent == node.title or page.grand_parent == node.title -%}
               {%- assign first_level_url = node.url | absolute_url -%}
             {%- endif -%}
             <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
             {%- if node.has_children -%}
-              {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
+              {%- assign children_list = pages_list | where: "parent", node.title -%}
               <ul class="navigation-list-child-list ">
                 {%- for child in children_list -%}
+                {%- unless child.nav_exclude -%}
                   <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
                     {%- if page.url == child.url or page.parent == child.title -%}
                       {%- assign second_level_url = child.url | absolute_url -%}
                     {%- endif -%}
                     <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
                     {%- if child.has_children -%}
-                        {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
+                        {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
                         <ul class="navigation-list-child-list">
                         {%- for grand_child in grand_children_list -%}
                           <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
@@ -29,6 +39,7 @@
                       </ul>
                     {%- endif -%}
                   </li>
+                {%- endunless -%}
                 {%- endfor -%}
               </ul>
             {%- endif -%}

_includes/title.html

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

_layouts/default.html

@@ -7,6 +7,12 @@ layout: table_wrappers
 <html lang="{{ site.lang | default: "en-US" }}">
 {% include head.html %}
 <body>
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="link" viewBox="0 0 16 16">
+      <title>Link</title>
+      <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+    </symbol>
+  </svg>
 
   <div class="page-wrap">
     <div class="side-bar">
@@ -23,7 +29,7 @@ layout: table_wrappers
       </footer>
     </div>
     <div class="main-content-wrap js-main-content" tabindex="0">
-      <div class="main-content">
+      <div class="main-content" id="top">
         <div class="page-header js-page-header">
           {% if site.search_enabled != false %}
           <div class="search">
@@ -37,7 +43,15 @@ layout: table_wrappers
           {% 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>
+                <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
+                  <a href="{{ link.last }}"
+                    {% if site.aux_links_new_tab %}
+                    target="_blank" rel="noopener noreferrer"
+                    {% endif %}
+                  >
+                    {{ link.first }}
+                  </a>
+                </li>
               {% endfor %}
             </ul>
           {% endif %}
@@ -60,7 +74,7 @@ layout: table_wrappers
           {% endunless %}
           <div id="main-content" class="page-content" role="main">
             {% if site.heading_anchors != false %}
-              {% include vendor/anchor_headings.html html=content  beforeHeading = "true" anchorBody="<svg class=\"d-inline-block v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"18\" height=\"18\" aria-hidden=\"true\"><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>" anchorClass="anchor-heading" %}
+              {% 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 %}
@@ -68,22 +82,51 @@ layout: table_wrappers
           {% 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>
+              {%- assign children_list = pages_list | where: "parent", node.title -%}
               {% for child in children_list %}
-                {% if child.parent == page.title and child.title != page.title %}
+                {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
                 <li>
-                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
+                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
                 </li>
                 {% endif %}
               {% endfor %}
             </ul>
           {% endif %}
 
-          {% if site.footer_content != nil %}
+          {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
             <hr>
-            <footer role="contentinfo">
+            <footer>
+              {% if site.back_to_top %}
+              <p><a href="#top">{{ site.back_to_top_text }}</a></p>
+              {% endif %}
+              {% if site.footer_content != nil %}
               <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
+              {% endif %}
+
+              {% if site.last_edit_timestamp or site.gh_edit_link %}
+                <div class="d-flex mt-2">
+                  {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+                  <p class="text-small text-grey-dk-000 mb-0 mr-2">
+                  Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+                  </p>
+                  {% endif %}
+                  {%
+                  if
+                  site.gh_edit_link and
+                  site.gh_edit_link_text and
+                  site.gh_edit_repository and
+                  site.gh_edit_branch and
+                  site.gh_edit_view_mode
+
+                  %}
+                  <p class="text-small text-grey-dk-000 mb-0">
+                  <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
+                  </p>
+                  {% endif %}
+                </div>
+              {% endif %}
+
             </footer>
           {% endif %}
 

_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,
-table {
+form,
+fieldset,
+noscript .table-wrapper {
   margin-top: 0;
 }
 
@@ -52,14 +46,15 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.2em;
-  margin-bottom: 0.8em;
+  margin-top: 0;
+  margin-bottom: 1em;
   font-weight: 500;
   line-height: $body-heading-line-height;
   color: $body-heading-color;
 }
 
 p {
+  margin-top: 1em;
   margin-bottom: 1em;
 }
 
@@ -76,19 +71,22 @@ 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;
 }
 
-figure {
+figure,
+pre {
   margin: 0;
 }
 

_sass/code.scss

@@ -14,6 +14,7 @@ code {
 pre.highlight,
 figure.highlight {
   padding: $sp-3;
+  margin-top: 0;
   margin-bottom: 0;
   -webkit-overflow-scrolling: touch;
   background-color: $code-background-color;
@@ -30,74 +31,212 @@ figure.highlight {
   border-radius: $border-radius;
 }
 
-.highlight .c { color: #586e75; } // comment //
-.highlight .err { color: #93a1a1; } // error //
-.highlight .g { color: #93a1a1; } // generic //
-.highlight .k { color: #859900; } // keyword //
-.highlight .l { color: #93a1a1; } // literal //
-.highlight .n { color: #93a1a1; } // name //
-.highlight .o { color: #859900; } // operator //
-.highlight .x { color: #cb4b16; } // other //
-.highlight .p { color: #93a1a1; } // punctuation //
-.highlight .cm { color: #586e75; } // comment.multiline //
-.highlight .cp { color: #859900; } // comment.preproc //
-.highlight .c1 { color: #586e75; } // comment.single //
-.highlight .cs { color: #859900; } // comment.special //
-.highlight .gd { color: #2aa198; } // generic.deleted //
-.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph //
-.highlight .gr { color: #dc322f; } // generic.error //
-.highlight .gh { color: #cb4b16; } // generic.heading //
-.highlight .gi { color: #859900; } // generic.inserted //
-.highlight .go { color: #93a1a1; } // generic.output //
-.highlight .gp { color: #93a1a1; } // generic.prompt //
-.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong //
-.highlight .gu { color: #cb4b16; } // generic.subheading //
-.highlight .gt { color: #93a1a1; } // generic.traceback //
-.highlight .kc { color: #cb4b16; } // keyword.constant //
-.highlight .kd { color: #268bd2; } // keyword.declaration //
-.highlight .kn { color: #859900; } // keyword.namespace //
-.highlight .kp { color: #859900; } // keyword.pseudo //
-.highlight .kr { color: #268bd2; } // keyword.reserved //
-.highlight .kt { color: #dc322f; } // keyword.type //
-.highlight .ld { color: #93a1a1; } // literal.date //
-.highlight .m { color: #2aa198; } // literal.number //
-.highlight .s { color: #2aa198; } // literal.string //
-.highlight .na { color: #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 //
+.highlight .c {
+  color: #586e75;
+} // comment //
+.highlight .err {
+  color: #93a1a1;
+} // error //
+.highlight .g {
+  color: #93a1a1;
+} // generic //
+.highlight .k {
+  color: #859900;
+} // keyword //
+.highlight .l {
+  color: #93a1a1;
+} // literal //
+.highlight .n {
+  color: #93a1a1;
+} // name //
+.highlight .o {
+  color: #859900;
+} // operator //
+.highlight .x {
+  color: #cb4b16;
+} // other //
+.highlight .p {
+  color: #93a1a1;
+} // punctuation //
+.highlight .cm {
+  color: #586e75;
+} // comment.multiline //
+.highlight .cp {
+  color: #859900;
+} // comment.preproc //
+.highlight .c1 {
+  color: #586e75;
+} // comment.single //
+.highlight .cs {
+  color: #859900;
+} // comment.special //
+.highlight .gd {
+  color: #2aa198;
+} // generic.deleted //
+.highlight .ge {
+  font-style: italic;
+  color: #93a1a1;
+} // generic.emph //
+.highlight .gr {
+  color: #dc322f;
+} // generic.error //
+.highlight .gh {
+  color: #cb4b16;
+} // generic.heading //
+.highlight .gi {
+  color: #859900;
+} // generic.inserted //
+.highlight .go {
+  color: #93a1a1;
+} // generic.output //
+.highlight .gp {
+  color: #93a1a1;
+} // generic.prompt //
+.highlight .gs {
+  font-weight: bold;
+  color: #93a1a1;
+} // generic.strong //
+.highlight .gu {
+  color: #cb4b16;
+} // generic.subheading //
+.highlight .gt {
+  color: #93a1a1;
+} // generic.traceback //
+.highlight .kc {
+  color: #cb4b16;
+} // keyword.constant //
+.highlight .kd {
+  color: #268bd2;
+} // keyword.declaration //
+.highlight .kn {
+  color: #859900;
+} // keyword.namespace //
+.highlight .kp {
+  color: #859900;
+} // keyword.pseudo //
+.highlight .kr {
+  color: #268bd2;
+} // keyword.reserved //
+.highlight .kt {
+  color: #dc322f;
+} // keyword.type //
+.highlight .ld {
+  color: #93a1a1;
+} // literal.date //
+.highlight .m {
+  color: #2aa198;
+} // literal.number //
+.highlight .s {
+  color: #2aa198;
+} // literal.string //
+.highlight .na {
+  color: #555;
+} // name.attribute //
+.highlight .nb {
+  color: #b58900;
+} // name.builtin //
+.highlight .nc {
+  color: #268bd2;
+} // name.class //
+.highlight .no {
+  color: #cb4b16;
+} // name.constant //
+.highlight .nd {
+  color: #268bd2;
+} // name.decorator //
+.highlight .ni {
+  color: #cb4b16;
+} // name.entity //
+.highlight .ne {
+  color: #cb4b16;
+} // name.exception //
+.highlight .nf {
+  color: #268bd2;
+} // name.function //
+.highlight .nl {
+  color: #555;
+} // name.label //
+.highlight .nn {
+  color: #93a1a1;
+} // name.namespace //
+.highlight .nx {
+  color: #555;
+} // name.other //
+.highlight .py {
+  color: #93a1a1;
+} // name.property //
+.highlight .nt {
+  color: #268bd2;
+} // name.tag //
+.highlight .nv {
+  color: #268bd2;
+} // name.variable //
+.highlight .ow {
+  color: #859900;
+} // operator.word //
+.highlight .w {
+  color: #93a1a1;
+} // text.whitespace //
+.highlight .mf {
+  color: #2aa198;
+} // literal.number.float //
+.highlight .mh {
+  color: #2aa198;
+} // literal.number.hex //
+.highlight .mi {
+  color: #2aa198;
+} // literal.number.integer //
+.highlight .mo {
+  color: #2aa198;
+} // literal.number.oct //
+.highlight .sb {
+  color: #586e75;
+} // literal.string.backtick //
+.highlight .sc {
+  color: #2aa198;
+} // literal.string.char //
+.highlight .sd {
+  color: #93a1a1;
+} // literal.string.doc //
+.highlight .s2 {
+  color: #2aa198;
+} // literal.string.double //
+.highlight .se {
+  color: #cb4b16;
+} // literal.string.escape //
+.highlight .sh {
+  color: #93a1a1;
+} // literal.string.heredoc //
+.highlight .si {
+  color: #2aa198;
+} // literal.string.interpol //
+.highlight .sx {
+  color: #2aa198;
+} // literal.string.other //
+.highlight .sr {
+  color: #dc322f;
+} // literal.string.regex //
+.highlight .s1 {
+  color: #2aa198;
+} // literal.string.single //
+.highlight .ss {
+  color: #2aa198;
+} // literal.string.symbol //
+.highlight .bp {
+  color: #268bd2;
+} // name.builtin.pseudo //
+.highlight .vc {
+  color: #268bd2;
+} // name.variable.class //
+.highlight .vg {
+  color: #268bd2;
+} // name.variable.global //
+.highlight .vi {
+  color: #268bd2;
+} // name.variable.instance //
+.highlight .il {
+  color: #2aa198;
+} // literal.number.integer.long //
 
 //
 // Code examples (rendered)

_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;

_sass/content.scss

@@ -8,6 +8,16 @@
 .page-content {
   line-height: $content-line-height;
 
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
   a {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -19,6 +29,12 @@
     padding-left: 1.5em;
   }
 
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
   ol {
     list-style-type: none;
     counter-reset: step-counter;
@@ -116,26 +132,37 @@
 
   .anchor-heading {
     position: absolute;
-    right: -$sp-3;
+    right: -$sp-4;
     width: $sp-5;
     height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
     overflow: visible;
-    fill: $link-color;
-    visibility: hidden;
 
     @include mq(md) {
       right: auto;
       left: -$sp-5;
     }
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      fill: $link-color;
+      visibility: hidden;
+    }
   }
 
+  .anchor-heading:hover,
   h1:hover > .anchor-heading,
   h2:hover > .anchor-heading,
   h3:hover > .anchor-heading,
   h4:hover > .anchor-heading,
   h5:hover > .anchor-heading,
   h6:hover > .anchor-heading {
-    visibility: visible;
+    svg {
+      visibility: visible;
+    }
   }
 
   h1,
@@ -145,5 +172,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;
-  margin-right: $sp-1;
-  margin-left: $sp-1;
+  padding-left: 0.56em;
+  margin-right: $sp-2;
+  margin-left: $sp-2;
   color: $white;
   text-transform: uppercase;
   vertical-align: middle;
   background-color: $blue-100;
   @include fs-2;
+  border-radius: 12px;
 }
 
 .label-green {

_sass/layout.scss

@@ -58,7 +58,9 @@
   }
 
   @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}
+    );
   }
 }
 
@@ -104,7 +106,6 @@
 .navigation,
 .site-header,
 .site-footer {
-
   width: 100%;
 
   @include mq(lg) {
@@ -125,12 +126,12 @@
 
 .site-header {
   display: flex;
+  min-height: $header-height;
   align-items: center;
 
   @include mq(md) {
     z-index: 101;
     height: $header-height;
-    min-height: $header-height;
     max-height: $header-height;
     border-bottom: $border $border-color;
   }
@@ -142,10 +143,26 @@
   display: flex;
   height: 100%;
   align-items: center;
-  padding-top: $gutter-spacing-sm;
-  padding-bottom: $gutter-spacing-sm;
+  padding-top: $sp-3;
+  padding-bottom: $sp-3;
   color: $body-heading-color;
   @include fs-6;
+
+  @include mq(md) {
+    padding-top: $sp-2;
+    padding-bottom: $sp-2;
+  }
+}
+
+@if variable-exists(logo) {
+  .site-logo {
+    width: 100%;
+    height: 100%;
+    background-image: url($logo);
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: contain;
+  }
 }
 
 .menu-button {

_sass/modules.scss

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

_sass/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,13 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
+$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
+  helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
-$root-font-size: 16px !default;         // Base font-size for rems
+$root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
-$content-line-height: 1.5 !default;
-$body-heading-line-height: 1.15 !default !default;
+$content-line-height: 1.6 !default;
+$body-heading-line-height: 1.25 !default;
 
 //
 // Colors
@@ -82,7 +83,7 @@ $spacers: (
   sp-7: $spacing-unit * 2.5,
   sp-8: $spacing-unit * 3,
   sp-9: $spacing-unit * 3.5,
-  sp-10: $spacing-unit * 4
+  sp-10: $spacing-unit * 4,
 ) !default;
 
 $sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
@@ -125,5 +126,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

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

_sass/typography.scss

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

_sass/utilities/_layout.scss

@@ -5,11 +5,21 @@
 
 // Display
 
-.d-block { display: block !important; }
-.d-flex { display: flex !important; }
-.d-inline { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-none { display: none !important; }
+.d-block {
+  display: block !important;
+}
+.d-flex {
+  display: flex !important;
+}
+.d-inline {
+  display: inline !important;
+}
+.d-inline-block {
+  display: inline-block !important;
+}
+.d-none {
+  display: none !important;
+}
 
 @each $media-query in map-keys($media-queries) {
   @for $i from 1 through length($spacers) {
@@ -18,21 +28,68 @@
       $scale: #{$i - 1};
 
       // .d-sm-block, .d-md-none, .d-lg-inline
-      .d-#{$media-query}-block { display: block !important; }
-      .d-#{$media-query}-flex { display: flex !important; }
-      .d-#{$media-query}-inline { display: inline !important; }
-      .d-#{$media-query}-inline-block { display: inline-block !important; }
-      .d-#{$media-query}-none { display: none !important; }
-
+      .d-#{$media-query}-block {
+        display: block !important;
+      }
+      .d-#{$media-query}-flex {
+        display: flex !important;
+      }
+      .d-#{$media-query}-inline {
+        display: inline !important;
+      }
+      .d-#{$media-query}-inline-block {
+        display: inline-block !important;
+      }
+      .d-#{$media-query}-none {
+        display: none !important;
+      }
     }
   }
 }
 
+// Horizontal alignment
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.flex-justify-start {
+  justify-content: flex-start !important;
+}
+
+.flex-justify-end {
+  justify-content: flex-end !important;
+}
+
+.flex-justify-between {
+  justify-content: space-between !important;
+}
+
+.flex-justify-around {
+  justify-content: space-around !important;
+}
+
 // Vertical alignment
 
-.v-align-baseline { vertical-align: baseline !important; }
-.v-align-bottom { vertical-align: bottom !important; }
-.v-align-middle { vertical-align: middle !important; }
-.v-align-text-bottom { vertical-align: text-bottom !important; }
-.v-align-text-top { vertical-align: text-top !important; }
-.v-align-top { vertical-align: top !important; }
+.v-align-baseline {
+  vertical-align: baseline !important;
+}
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+.v-align-middle {
+  vertical-align: middle !important;
+}
+.v-align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+.v-align-text-top {
+  vertical-align: text-top !important;
+}
+.v-align-top {
+  vertical-align: top !important;
+}

_sass/utilities/_lists.scss

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

_sass/utilities/_spacing.scss

@@ -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; }
-  .mt-#{$scale} { margin-top: #{$size} !important; }
-  .mr-#{$scale} { margin-right: #{$size} !important; }
-  .mb-#{$scale} { margin-bottom: #{$size} !important; }
-  .ml-#{$scale} { margin-left: #{$size} !important; }
+  .m-#{$scale} {
+    margin: #{$size} !important;
+  }
+  .mt-#{$scale} {
+    margin-top: #{$size} !important;
+  }
+  .mr-#{$scale} {
+    margin-right: #{$size} !important;
+  }
+  .mb-#{$scale} {
+    margin-bottom: #{$size} !important;
+  }
+  .ml-#{$scale} {
+    margin-left: #{$size} !important;
+  }
 
   .mx-#{$scale} {
     margin-right: #{$size} !important;
@@ -32,11 +47,10 @@
     margin-right: -#{$size} !important;
     margin-left: -#{$size} !important;
   }
-}
-
-.mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
+  .mx-#{$scale}-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
 }
 
 @each $media-query in map-keys($media-queries) {
@@ -46,11 +60,21 @@
       $scale: #{$i - 1};
 
       // .m-sm-0, .m-md-1, .m-lg-2...
-      .m-#{$media-query}-#{$scale}  { margin: #{$size} !important; }
-      .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
-      .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
-      .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
-      .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
+      .m-#{$media-query}-#{$scale} {
+        margin: #{$size} !important;
+      }
+      .mt-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+      }
+      .mr-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+      }
+      .mb-#{$media-query}-#{$scale} {
+        margin-bottom: #{$size} !important;
+      }
+      .ml-#{$media-query}-#{$scale} {
+        margin-left: #{$size} !important;
+      }
 
       .mx-#{$media-query}-#{$scale} {
         margin-right: #{$size} !important;
@@ -77,11 +101,21 @@
   $scale: #{$i - 1};
 
   // .p-0, .p-1, .p-2...
-  .p-#{$scale}  { padding: #{$size} !important; }
-  .pt-#{$scale} { padding-top: #{$size} !important; }
-  .pr-#{$scale} { padding-right: #{$size} !important; }
-  .pb-#{$scale} { padding-bottom: #{$size} !important; }
-  .pl-#{$scale} { padding-left: #{$size} !important; }
+  .p-#{$scale} {
+    padding: #{$size} !important;
+  }
+  .pt-#{$scale} {
+    padding-top: #{$size} !important;
+  }
+  .pr-#{$scale} {
+    padding-right: #{$size} !important;
+  }
+  .pb-#{$scale} {
+    padding-bottom: #{$size} !important;
+  }
+  .pl-#{$scale} {
+    padding-left: #{$size} !important;
+  }
 
   .px-#{$scale} {
     padding-right: #{$size} !important;
@@ -101,11 +135,21 @@
       $scale: #{$i - 1};
 
       // .p-sm-0, .p-md-1, .p-lg-2...
-      .p-#{$media-query}-#{$scale}  { padding: #{$size} !important; }
-      .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
-      .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
-      .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
-      .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
+      .p-#{$media-query}-#{$scale} {
+        padding: #{$size} !important;
+      }
+      .pt-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+      }
+      .pr-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+      }
+      .pb-#{$media-query}-#{$scale} {
+        padding-bottom: #{$size} !important;
+      }
+      .pl-#{$media-query}-#{$scale} {
+        padding-left: #{$size} !important;
+      }
 
       .px-#{$media-query}-#{$scale} {
         padding-right: #{$size} !important;

assets/css/dark-mode-preview.scss

@@ -1,41 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-//
-// 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,44 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-//
-// 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";

assets/js/just-the-docs.js

@@ -52,8 +52,13 @@ function initSearch() {
     if (request.status >= 200 && request.status < 400) {
       // Success!
       var data = JSON.parse(request.responseText);
-
+      
+      {% if site.search_tokenizer_separator != nil %}
+      lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
+      {% else %}
       lunr.tokenizer.separator = /[\s\-/]+/
+      {% endif %}
+      
       var index = lunr(function () {
         this.ref('id');
         this.field('title', { boost: 200 });
@@ -274,11 +279,25 @@ function initSearch() {
   }
 }
 
+// Focus
+
 function pageFocus() {
   var mainContent = document.querySelector('.js-main-content');
   mainContent.focus();
 }
 
+// Switch theme
+
+jtd.getTheme = function() {
+  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
+}
+
+jtd.setTheme = function(theme) {
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css');
+}
+
 // Document ready
 
 jtd.onReady(function(){

assets/js/search-data.json

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

docs/configuration.md

@@ -22,12 +22,22 @@ Just the Docs has some specific configuration parameters that can be defined in
 
 View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/master/_config.yml) file as an example.
 
-## Search enabled
+## Site logo
+
+```yaml
+# Set a path/url to a logo that will be displayed instead of the title
+logo: "/assets/images/just-the-docs.png"
+```
+
+## Search
 
 ```yaml
 # Enable or disable the site search
-# Support true (default) or false
+# Supports true (default) or false
 search_enabled: true
+
+# Enable support for hyphenated search words:
+search_tokenizer_separator: /[\s/]+/
 ```
 
 ## Aux links
@@ -35,49 +45,68 @@ search_enabled: true
 ```yaml
 # Aux links for the upper right navigation
 aux_links:
-    "Just the Docs on GitHub":
-      - "//github.com/pmarsceill/just-the-docs"
+  "Just the Docs on GitHub":
+    - "//github.com/pmarsceill/just-the-docs"
+
+# Makes Aux links open in a new tab. Default is false
+aux_links_new_tab: false
 ```
 
 ## Heading anchor links
 
 ```yaml
-# Heading anchor links appear on hover over h1-h6 tags
-# in page content allowing users to deep link to a particular
-# heading on a page.
+# 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.
 #
-# Supprts 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 
+# appears at the bottom of every page's main content
 footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
+
+# Footer last edited timestamp
+last_edit_timestamp: true # show or hide edit time - page must have `last_modified_date` defined in the frontmatter
+last_edit_time_format: "%b %e %Y at %I:%M %p" # uses ruby's time format: https://ruby-doc.org/stdlib-2.7.0/libdoc/time/rdoc/Time.html
+
+# Footer "Edit this page on GitHub" link text
+gh_edit_link: true # show or hide edit this page link
+gh_edit_link_text: "Edit this page on GitHub."
+gh_edit_repository: "https://github.com/pmarsceill/just-the-docs" # the github URL for your repo
+gh_edit_branch: "master" # the branch that your docs is served from
+gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
 ```
 
+- the "page last modified" data will only display if a page has a key called `last_modified_date`, formatted in some readable date format
+- `last_edit_time_format` uses Ruby's DateTime formatter; see examples and more information [at this link.](https://apidock.com/ruby/DateTime/strftime)
+- `gh_edit_repository` is the URL of the project's GitHub repository
+- `gh_edit_branch` is the branch that the docs site is served from; defaults to `master`
+- `gh_edit_view_mode` is `"tree"` by default, which brings the user to the github page; switch to `"edit"` to bring the user directly into editing mode
+
 ## Color scheme
 
 ```yaml
-# Color scheme currently only supports "dark" or nil (default)
-color_scheme: "dark"
+# Color scheme supports "light" (default) and "dark"
+color_scheme: dark
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
 <script>
 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');
 
 jtd.addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef);
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
   } else {
-    cssFile.setAttribute('href', originalCssRef);
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
   }
-})
+});
 </script>
 
 See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
@@ -88,4 +117,5 @@ 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)
 ```

docs/customization.md

@@ -29,43 +29,87 @@ To enable a color scheme, set the `color_scheme` parameter in your site's `_conf
 {: .no_toc }
 
 ```yaml
-# Color scheme currently only supports "dark" or nil (default)
-color_scheme: "dark"
+# Color scheme supports "light" (default) and "dark"
+color_scheme: dark
 ```
 <button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
 
 <script>
 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');
 
 jtd.addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef);
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
+    toggleDarkMode.textContent = 'Preview dark color scheme';
   } else {
-    cssFile.setAttribute('href', originalCssRef);
+    jtd.setTheme('dark');
+    toggleDarkMode.textContent = 'Return to the light side';
   }
-})
+});
 </script>
 
-## Specific visual customization
+## Custom schemes
 
-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.
+### Define a custom scheme
 
-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.
+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.
+
+### Use a custom scheme
+
+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.
+
+#### Example
+{: .no_toc }
+
+```scss
+// Print-only styles.
+@media print {
+  .side-bar, .page-header { display: none; }
+  .main-content { max-width: auto; margin: 1em;}
+}
+```

docs/navigation-structure.md

@@ -38,6 +38,13 @@ nav_order: 4
 ---
 ```
 
+The specified `nav_order` parameters on a site should be all integers or all strings.
+Pages without a `nav_order` parameter are ordered alphabetically by their `title`,
+and appear after the explicitly-ordered pages at each level.
+By default, all Capital letters are sorted before all lowercase letters;
+adding `nav_sort: case_insensitive` in the configuration file ignores case
+when sorting strings (but also sorts numbers lexicographically: `10` comes before `1`).
+
 ---
 
 ## Excluding pages
@@ -67,7 +74,7 @@ Sometimes you will want to create a page with many children (a section). First,
 |
 |-- docs
 |   |-- ui-components
-|   |   |-- ui-components.md  (parent page)
+|   |   |-- index.md  (parent page)
 |   |   |-- buttons.md
 |   |   |-- code.md
 |   |   |-- labels.md
@@ -75,7 +82,7 @@ Sometimes you will want to create a page with many children (a section). First,
 |   |   +-- typography.md
 |   |
 |   |-- utilities
-|   |   |-- utilities.md      (parent page)
+|   |   |-- index.md      (parent page)
 |   |   |-- color.md
 |   |   |-- layout.md
 |   |   |-- responsive-modifiers.md
@@ -88,9 +95,8 @@ Sometimes you will want to create a page with many children (a section). First,
 +-- ..
 ```
 
-On the parent pages, add 2 YAML front matter parameters:
+On the parent pages, add this YAML front matter parameter:
 -  `has_children: true` (tells us that this is a parent page)
--  `permalink:` set this to the site directory that contains the child pages
 
 #### Example
 {: .no_toc }
@@ -101,7 +107,6 @@ layout: default
 title: UI Components
 nav_order: 2
 has_children: true
-permalink: /docs/ui-components
 ---
 ```
 
@@ -140,7 +145,6 @@ title: UI Components
 nav_order: 2
 has_children: true
 has_toc: false
-permalink: /docs/ui-components
 ---
 ```
 
@@ -193,9 +197,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 }

docs/search.md

@@ -37,13 +37,13 @@ This command creates the `search-data.json` file that Jekyll uses to create your
 {% raw %}---
 ---
 {
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
+  {% assign comma = false %}
+  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
     "title": "{{ page.title | replace: '&', '&' }}",
-    "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | normalize_whitespace }}",
+    "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}",
     "url": "{{ page.url | absolute_url }}",
     "relUrl": "{{ page.url }}"
-  }{% unless forloop.last %},{% endunless %}
+  }{% assign comma = true %}
   {% endif %}{% endfor %}
 }{% endraw %}
 ```
@@ -59,6 +59,15 @@ In your site's `_config.yml`, enable search:
 search_enabled: true
 ```
 
+The default is for hyphens to separate tokens in search terms:
+`gem-based` is equivalent to `gem based`, matching either word.
+To allow search for hyphenated words:
+
+```yaml
+# Set the search token separator
+search_tokenizer_separator: /[\s/]+/
+```
+
 ## Hiding pages from search
 
 Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:

docs/ui-components/code.md

@@ -22,9 +22,14 @@ Code can be rendered inline by wrapping it in single back ticks.
 
 <div class="code-example" markdown="1">
 Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Heading with `<inline code snippet>` in it.
+{: .no_toc }
 </div>
 ```markdown
 Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Heading with `<inline code snippet>` in it.
 ```
 
 ---

docs/utilities/color.md

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

docs/utilities/layout.md

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

docs/utilities/responsive-modifiers.md

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

docs/utilities/typography.md

@@ -2,7 +2,6 @@
 layout: default
 title: Typography
 parent: Utilities
-nav_order: 4
 ---
 
 # Typography Utilities
@@ -145,3 +144,13 @@ Default line height
 Default line height
 {: .fh-default }
 ```
+
+## Text justification
+
+By default text is justified left. Use these `text-` classes to override settings:
+
+| Class          | What it does         |
+|:---------------|:---------------------|
+| `.text-left`   | `text-align: left`   |
+| `.text-right`  | `text-align: right`  |
+| `.text-center` | `text-align: center` |

index.md

@@ -4,6 +4,7 @@ title: Home
 nav_order: 1
 description: "Just the Docs is a responsive Jekyll theme with built-in search that is easily customizable and hosted on GitHub Pages."
 permalink: /
+last_modified_date: 2020-04-27T17:54:08+0000
 ---
 
 # Focus on writing good documentation
@@ -20,7 +21,7 @@ Just the Docs gives your documentation a jumpstart with a responsive Jekyll them
 
 ### Dependencies
 
-Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/) for more information. Just the Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler.
+Just the Docs is built for [Jekyll](https://jekyllrb.com), a static site generator. View the [quick start guide](https://jekyllrb.com/docs/) for more information. Just the Docs requires no special plugins and can run on GitHub Pages' standard Jekyll compiler. The [Jekyll SEO Tag plugin](https://github.com/jekyll/jekyll-seo-tag) is included by default (no need to run any special installation) to inject SEO and open graph metadata on docs pages. For information on how to configure SEO and open graph metadata visit the [Jekyll SEO Tag usage guide](https://jekyll.github.io/jekyll-seo-tag/usage/).
 
 ### Quick start: Use as a GitHub Pages remote theme
 
@@ -68,7 +69,7 @@ If you're hosting your site on GitHub Pages, [set up GitHub Pages and Jekyll loc
 
 ## About the project
 
-Just the Docs is © 2017-2019 by [Patrick Marsceill](http://patrickmarsceill.com).
+Just the Docs is © 2017-{{ "now" | date: "%Y" }} by [Patrick Marsceill](http://patrickmarsceill.com).
 
 ### License
 
@@ -79,6 +80,16 @@ Just the Docs is distributed by an [MIT license](https://github.com/pmarsceill/j
 When contributing to this repository, please first discuss the change you wish to make via issue,
 email, or any other method with the owners of this repository before making a change. Read more about becoming a contributor in [our GitHub repo](https://github.com/pmarsceill/just-the-docs#contributing).
 
+#### Thank you to the contributors of Just the Docs!
+
+<ul class="list-style-none">
+{% for contributor in site.github.contributors %}
+  <li class="d-inline-block mr-1">
+     <a href="{{ contributor.html_url }}"><img src="{{ contributor.avatar_url }}" width="32" height="32" alt="{{ contributor.login }}"/></a>
+  </li>
+{% endfor %}
+</ul>
+
 ### Code of Conduct
 
 Just the Docs is committed to fostering a welcoming community.

just-the-docs.gemspec

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

lib/tasks/search.rake

@@ -4,7 +4,7 @@ namespace :search do
     puts 'Creating search data json file...'
     mkdir_p 'assets/js'
     touch 'assets/js/search-data.json'
-    content = %Q[{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\\', ' ' | normalize_whitespace }}]
+    content = %Q[{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```'  | remove: '---' | replace: '\\', ' ' | replace: ' .  .  . ', ' . ' | replace: ' .  . ', ' . ' | normalize_whitespace }}]
     puts 'Done.'
     puts 'Generating content...'
 
@@ -12,13 +12,13 @@ namespace :search do
       f.puts '---
 ---
 {
-  {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": {
-    "id": "{{ forloop.index0 }}",
+  {% assign comma = false %}
+  {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
     "title": "{{ page.title | replace: \'&amp;\', \'&\' }}",
     "content": "'+content+'",
     "url": "{{ page.url | absolute_url }}",
     "relUrl": "{{ page.url }}"
-  }{% unless forloop.last %},{% endunless %}
+  }{% assign comma = true %}
   {% endif %}{% endfor %}
 }'
     end

package.json

@@ -1,19 +1,23 @@
 {
   "name": "just-the-docs",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "A modern Jekyll theme for documentation",
   "repository": "pmarsceill/just-the-docs",
   "license": "MIT",
   "bugs": "https://github.com/pmarsceill/just-the-docs/issues",
   "devDependencies": {
-    "stylelint": "^10.0.1",
-    "stylelint-config-primer": "^7.0.1",
+    "@primer/css": "^14.3.0",
+    "prettier": "^2.0.5",
+    "stylelint": "^13.3.3",
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-primer": "^9.0.0",
+    "stylelint-prettier": "^1.1.2",
     "stylelint-selector-no-utility": "^4.0.0"
   },
-  "dependencies": {
-    "@primer/css": "^12.6.0"
-  },
   "scripts": {
-    "test": "stylelint '**/*.scss'"
-  }
+    "test": "stylelint '**/*.scss'",
+    "format": "prettier --write '**/*.{scss,js,json}'",
+    "stylelint-check": "stylelint-config-prettier-check"
+  },
+  "dependencies": {}
 }