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

Permissioning

.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,4 +1,4 @@
-on: [push]
+on: [pull_request]
 
 name: CI
 
@@ -9,40 +9,64 @@ jobs:
     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:latest /bin/bash -c "gem install bundler && chmod -R 777 /srv/jekyll && jekyll build && bundle exec just-the-docs rake search:init"
+        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
+    - 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 && jekyll build && bundle exec just-the-docs rake search:init"
+        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"
 
-  css:
+  assets:
-    name: Stylelint
+    name: Format and test CSS and JS
     runs-on: ubuntu-latest
-    steps:
-    
-    - uses: actions/checkout@master
 
-    - name: Use Node.js 10.x
+    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
+        echo "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git"
-        npm test
+        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" : [
+  "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
+  }
 }

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

_config.yml

@@ -38,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
+# 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_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

_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 -%}

_layouts/default.html

@@ -29,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">
@@ -43,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 %}
@@ -74,10 +82,10 @@ 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>{% if child.summary %} - {{ child.summary }}{% endif %}
                 </li>
@@ -86,10 +94,39 @@ layout: table_wrappers
             </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,
+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

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

@@ -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) {

_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/overrides.scss

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

_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;
+$content-line-height: 1.6 !default;
-$body-heading-line-height: 1.15 !default !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-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;

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

@@ -279,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

@@ -9,4 +9,4 @@
     "relUrl": "{{ page.url }}"
   }{% assign comma = true %}
   {% endif %}{% endfor %}
-}
+}

docs/configuration.md

@@ -38,7 +38,6 @@ search_enabled: true
 
 # Enable support for hyphenated search words:
 search_tokenizer_separator: /[\s/]+/
-
 ```
 
 ## Aux links
@@ -48,6 +47,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 +58,56 @@ 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 
+# 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 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 +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,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/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
@@ -190,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/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
@@ -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
 

just-the-docs.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "just-the-docs"
-  spec.version       = "0.2.8"
+  spec.version       = "0.2.9"
   spec.authors       = ["Patrick Marsceill"]
   spec.email         = ["patrick.marsceill@gmail.com"]
 
@@ -13,7 +13,7 @@ Gem::Specification.new do |spec|
   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 "bundler", "~> 2.1.4"
+  spec.add_development_dependency "bundler", "~> 2.1.4"
   spec.add_runtime_dependency "jekyll", ">= 3.8.5", "< 4.1.0"
   spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"
   spec.add_runtime_dependency "rake", ">= 12.3.1", "< 13.1.0"

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 | 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 }}]
+    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...'
 
@@ -15,7 +15,7 @@ namespace :search do
   {% 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+\'",
+    "content": "'+content+'",
     "url": "{{ page.url | absolute_url }}",
     "relUrl": "{{ page.url }}"
   }{% assign comma = true %}

package.json

@@ -1,19 +1,23 @@
 {
   "name": "just-the-docs",
-  "version": "0.2.8",
+  "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",
+    "@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": "^14.3.0"
-  },
   "scripts": {
-    "test": "stylelint '**/*.scss'"
+    "test": "stylelint '**/*.scss'",
-  }
+    "format": "prettier --write '**/*.{scss,js,json}'",
+    "stylelint-check": "stylelint-config-prettier-check"
+  },
+  "dependencies": {}
 }