Merge branch 'master' into blendify/v2

This causes issues with dart-sass compiler

.readthedocs.yml

@@ -6,7 +6,6 @@ python:
     - requirements: docs/requirements.txt
     - method: pip
       path: .
-    - requirements: docs/docutils-test.txt
 
 sphinx:
   configuration: docs/conf.py

MANIFEST.in

@@ -1,7 +1,6 @@
 include *.txt
 include babel.cfg
 include LICENSE
-include bin/preinstall.js
 recursive-include sphinx_rtd_theme *.conf
 recursive-include sphinx_rtd_theme *.css
 recursive-include sphinx_rtd_theme *.eot

bin/preinstall.js

@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-
-const package = require('../package.json');
-
-// Sorry everyone, this is the closest we can get to commenting on package.json
-// dependencies :(
-if (package.devDependencies['bourbon-neat'] !== '~1.9') {
-    // Wyrm is not compatible with Neat 2.0+, and Neat 1.9 at least pins a
-    // node-sass version that doesn't require Python 2. The changes to Wyrm to
-    // support Neat 2.0+ are all fairly minor changes, but it deeply affects the
-    // grid system and might be more of a liability than an old release of Neat.
-    // See: https://github.com/readthedocs/sphinx_rtd_theme/pull/771
-    console.error(
-        'bourbon-neat 1.9 is required, Wyrm is not compatible with Neat 2.0+.'
-    );
-    console.error(
-        'The expected selector for the bourbon-neat dependency in package.json is "~1.9".'
-    );
-    process.exit(1);
-}

docs/changelog.rst

@@ -5,50 +5,6 @@ Changelog
 master
 ======
 
-v1.0.0
-======
-
-Incompatible Changes
---------------------
-
-* The minimum supported python version is now 2.7 or 3.4 and greater (#1093)
-* The minimum supported Sphinx version is now 1.6 (#1091)
-
-Deprecated
-----------
-
-* Support for sphinx's html4 writer is deprecated and will be removed in version 2.0 (#1091)
-
-Other Changes
--------------
-
-* Update npm development dependencies (#1096)
-* Don't require npm to build from source (#1039)
-* Use regular toctree instead of toc for singlehtml builder (#507)
-* Templates: Cleanup Whitespace (#1060)
-
-Fixes
------
-
-* Javascript: Add support for deep toc levels (#1089)
-* Use Proper Sass Syntax (#1069)
-* Nav: Fix right padding on level2+ (#1068)
-* Fix Nav Buttons Size (#1067)
-* Fix: wrap inline literals (#1050)
-* Fix aria label (#1056)
-* Respect tab order for prev/next buttons (#1051)
-* Nav: Don't toggle terminal nodes (#1049)
-
-v0.5.2
-======
-
-:Date: April 5, 2021
-
-.. note:: This commit will not be in ``master``, but was branched directly off ``0.5.1`` to minimize issues.
-          The next full release will contain all PR's previously merged.
-
-* Depend on docutils < 0.17 (#1113)
-
 v0.5.1
 ======
 

docs/conf.py

@@ -10,14 +10,12 @@ sys.path.insert(0, os.path.abspath('..'))
 sys.path.append(os.path.abspath('./demo/'))
 
 import sphinx_rtd_theme
-from sphinx_rtd_theme import __version__ as theme_version
-from sphinx_rtd_theme import __version_full__ as theme_version_full
 from sphinx.locale import _
 
 project = u'Read the Docs Sphinx Theme'
 slug = re.sub(r'\W+', '-', project.lower())
-version = theme_version
-release = theme_version_full
+version = '0.5.1'
+release = '0.5.1'
 author = u'Dave Snider, Read the Docs, Inc. & contributors'
 copyright = author
 language = 'en'
@@ -43,7 +41,7 @@ pygments_style = 'default'
 
 intersphinx_mapping = {
     'rtd': ('https://docs.readthedocs.io/en/stable/', None),
-    'sphinx': ('https://www.sphinx-doc.org/en/master/', None),
+    'sphinx': ('https://www.sphinx-doc.org/en/stable/', None),
 }
 
 html_theme = 'sphinx_rtd_theme'

docs/contributing.rst

@@ -59,7 +59,6 @@ can be used to test built assets:
 .. _Webpack: https://webpack.js.org/
 .. _node-sass: https://github.com/sass/node-sass
 .. _SASS: http://www.sass-lang.com
-.. _Wyrm: http://www.github.com/snide/wyrm/
 .. _Sphinx: http://www.sphinx-doc.org/en/stable/
 
 Translations

docs/docutils-test.txt

@@ -1 +0,0 @@
-docutils==0.17

docs/requirements.txt

@@ -1,2 +1,2 @@
-sphinx>=4.0.dev0
+sphinx>=3.0
 sphinxcontrib-httpdomain

package.json

@@ -1,11 +1,10 @@
 {
   "name": "sphinx_rtd_theme",
   "main": "js/theme.js",
-  "version": "0.5.2",
+  "version": "0.5.1",
   "scripts": {
     "dev": "webpack-dev-server --open --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js",
-    "preinstall": "bin/preinstall.js"
+    "build": "webpack --config webpack.prod.js"
   },
   "repository": {
     "type": "git",
@@ -19,28 +18,26 @@
   "homepage": "https://github.com/readthedocs/sphinx_rtd_theme",
   "dependencies": {},
   "devDependencies": {
-    "bourbon": "~4.3",
-    "bourbon-neat": "~1.9",
-    "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "^3.6.0",
+    "bootstrap": "^4.6.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.1.0",
     "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
-    "html5shiv": "^3.7.3",
     "imports-loader": "^0.8.0",
-    "jquery": "^3.6.0",
+    "jquery": "^3.4.1",
     "lato-font": "^3.0.0",
     "mini-css-extract-plugin": "^0.6.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "popper.js": "^1.16.1",
     "roboto-fontface": "^0.10.0",
+    "sass": "^1.32.8",
     "sass-loader": "^7.3.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1",
     "webpack-merge": "^4.2.1",
     "webpack-shell-plugin": "^0.5.0",
-    "webpack-watch-files-plugin": "^1.1.0",
-    "wyrm": "^1.0.9"
+    "webpack-watch-files-plugin": "^1.0.3"
   }
 }

setup.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.5.2
+current_version = 0.5.1
 commit = false
 tag = false
 parse = (?P<major>\d+)\.(?P<minor>\d+)\.(?P<patch>\d+)((?P<release>[a-z]+)(?P<dev>\d+))?

setup.py

@@ -87,7 +87,7 @@ class TransifexCommand(distutils.cmd.Command):
 
 setup(
     name='sphinx_rtd_theme',
-    version='0.5.2',
+    version='0.5.1',
     url='https://github.com/readthedocs/sphinx_rtd_theme',
     license='MIT',
     author='Dave Snider, Read the Docs, Inc. & contributors',
@@ -117,8 +117,7 @@ setup(
         ]
     },
     install_requires=[
-        'sphinx>=1.6',
-        'docutils<0.17', # https://github.com/sphinx-doc/sphinx/issues/9001
+        'sphinx>=1.6'
     ],
     tests_require=[
         'pytest',

sphinx_rtd_theme/__init__.py

@@ -5,14 +5,13 @@ From https://github.com/ryan-roemer/sphinx-bootstrap-theme.
 """
 
 from os import path
-from sys import version_info as python_version
 
-from sphinx import version_info as sphinx_version
+from sphinx import version_info
 from sphinx.locale import _
 from sphinx.util.logging import getLogger
 
 
-__version__ = '0.5.2'
+__version__ = '0.5.1'
 __version_full__ = __version__
 
 logger = getLogger(__name__)
@@ -34,11 +33,8 @@ def config_initiated(app, config):
 
 # See http://www.sphinx-doc.org/en/stable/theming.html#distribute-your-theme-as-a-python-package
 def setup(app):
-    if python_version[0] < 3:
-        logger.warning("Python 2 is deprecated with sphinx_rtd_theme, update to Python 3")
     app.require_sphinx('1.6')
-    if sphinx_version <= (2, 0, 0):
-        logger.warning("Sphinx 1.x is deprecated with sphinx_rtd_theme, update to Sphinx 2.x or greater")
+    if version_info <= (2, 0, 0):
         if not app.config.html_experimental_html5_writer:
             logger.warning("'html4_writer' is deprecated with sphinx_rtd_theme")
     else:
@@ -48,7 +44,7 @@ def setup(app):
     # Register the theme that can be referenced without adding a theme path
     app.add_html_theme('sphinx_rtd_theme', path.abspath(path.dirname(__file__)))
 
-    if sphinx_version >= (1, 8, 0):
+    if version_info >= (1, 8, 0):
         # Add Sphinx message catalog for newer versions of Sphinx
         # See http://www.sphinx-doc.org/en/master/extdev/appapi.html#sphinx.application.Sphinx.add_message_catalog
         rtd_locale_path = path.join(path.abspath(path.dirname(__file__)), 'locale')

sphinx_rtd_theme/breadcrumbs.html

@@ -1,3 +1,11 @@
+{#- Support for Sphinx 1.3+ page_source_suffix, but don't break old builds. #}
+
+{%- if page_source_suffix %}
+   {%- set suffix = page_source_suffix %}
+{%- else %}
+   {%- set suffix = source_suffix %}
+{%- endif %}
+
 {%- if meta is defined and meta is not none %}
    {%- set check_meta = True %}
 {%- else %}
@@ -19,55 +27,56 @@
 {%- set display_vcs_links = display_vcs_links if display_vcs_links is defined else True %}
 
 <div role="navigation" aria-label="{{ _('Breadcrumbs') }}">
-  <ul class="wy-breadcrumbs">
+
+  <ol class="breadcrumb">
     {%- block breadcrumbs %}
-      <li><a href="{{ pathto(master_doc) }}" class="icon icon-home"></a> &raquo;</li>
-        {%- for doc in parents %}
-          <li><a href="{{ doc.link|e }}">{{ doc.title }}</a> &raquo;</li>
-        {%- endfor %}
-      <li>{{ title }}</li>
+      <li class="breadcrumb-item"><a href="{{ pathto(master_doc) }}" class="icon icon-home"></a></li>
+      {%- for doc in parents %}
+        <li class="breadcrumb-item"><a href="{{ doc.link|e }}">{{ doc.title }}</a></li>
+      {%- endfor %}
+      <li class="breadcrumb-item active">{{ title }}</li>
     {%- endblock %}
     {%- block breadcrumbs_aside %}
-      <li class="wy-breadcrumbs-aside">
+      <li class="breadcrumb-aside">
         {%- if hasdoc(pagename) and display_vcs_links %}
           {%- if display_github %}
             {%- if check_meta and 'github_url' in meta %}
               <!-- User defined GitHub URL -->
               <a href="{{ meta['github_url'] }}" class="fa fa-github"> {{ _('Edit on GitHub') }}</a>
             {%- else %}
-              <a href="https://{{ github_host|default("github.com") }}/{{ github_user }}/{{ github_repo }}/{{ theme_vcs_pageview_mode or "blob" }}/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ page_source_suffix }}" class="fa fa-github"> {{ _('Edit on GitHub') }}</a>
+              <a href="https://{{ github_host|default("github.com") }}/{{ github_user }}/{{ github_repo }}/{{ theme_vcs_pageview_mode or "blob" }}/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ suffix }}" class="fa fa-github"> {{ _('Edit on GitHub') }}</a>
             {%- endif %}
           {%- elif display_bitbucket %}
             {%- if check_meta and 'bitbucket_url' in meta %}
               <!-- User defined Bitbucket URL -->
               <a href="{{ meta['bitbucket_url'] }}" class="fa fa-bitbucket"> {{ _('Edit on Bitbucket') }}</a>
             {%- else %}
-              <a href="https://bitbucket.org/{{ bitbucket_user }}/{{ bitbucket_repo }}/src/{{ bitbucket_version}}{{ conf_py_path }}{{ pagename }}{{ page_source_suffix }}?mode={{ theme_vcs_pageview_mode or "view" }}" class="fa fa-bitbucket"> {{ _('Edit on Bitbucket') }}</a>
+              <a href="https://bitbucket.org/{{ bitbucket_user }}/{{ bitbucket_repo }}/src/{{ bitbucket_version}}{{ conf_py_path }}{{ pagename }}{{ suffix }}?mode={{ theme_vcs_pageview_mode or "view" }}" class="fa fa-bitbucket"> {{ _('Edit on Bitbucket') }}</a>
             {%- endif %}
           {%- elif display_gitlab %}
             {%- if check_meta and 'gitlab_url' in meta %}
               <!-- User defined GitLab URL -->
               <a href="{{ meta['gitlab_url'] }}" class="fa fa-gitlab"> {{ _('Edit on GitLab') }}</a>
             {%- else %}
-              <a href="https://{{ gitlab_host|default("gitlab.com") }}/{{ gitlab_user }}/{{ gitlab_repo }}/{{ theme_vcs_pageview_mode or "blob" }}/{{ gitlab_version }}{{ conf_py_path }}{{ pagename }}{{ page_source_suffix }}" class="fa fa-gitlab"> {{ _('Edit on GitLab') }}</a>
+              <a href="https://{{ gitlab_host|default("gitlab.com") }}/{{ gitlab_user }}/{{ gitlab_repo }}/{{ theme_vcs_pageview_mode or "blob" }}/{{ gitlab_version }}{{ conf_py_path }}{{ pagename }}{{ suffix }}" class="fa fa-gitlab"> {{ _('Edit on GitLab') }}</a>
             {%- endif %}
           {%- elif show_source and source_url_prefix %}
-            <a href="{{ source_url_prefix }}{{ pagename }}{{ page_source_suffix }}">{{ _('View page source') }}</a>
+            <a href="{{ source_url_prefix }}{{ pagename }}{{ suffix }}">{{ _('View page source') }}</a>
           {%- elif show_source and has_source and sourcename %}
             <a href="{{ pathto('_sources/' + sourcename, true)|e }}" rel="nofollow"> {{ _('View page source') }}</a>
           {%- endif %}
         {%- endif %}
       </li>
     {%- endblock %}
-  </ul>
+  </ol>
 
   {%- if (theme_prev_next_buttons_location == 'top' or theme_prev_next_buttons_location == 'both') and (next or prev) %}
   <div class="rst-breadcrumbs-buttons" role="navigation" aria-label="{{ _('Breadcrumbs') }}">
       {%- if prev %}
-        <a href="{{ prev.link|e }}" class="btn btn-neutral float-left" title="{{ prev.title|striptags|e }}" accesskey="p"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> {{ _('Previous') }}</a>
+        <a href="{{ prev.link|e }}" class="btn btn-light float-left" title="{{ prev.title|striptags|e }}" accesskey="p"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> {{ _('Previous') }}</a>
       {%- endif %}
       {%- if next %}
-        <a href="{{ next.link|e }}" class="btn btn-neutral float-right" title="{{ next.title|striptags|e }}" accesskey="n">{{ _('Next') }} <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
+        <a href="{{ next.link|e }}" class="btn btn-light float-right" title="{{ next.title|striptags|e }}" accesskey="n">{{ _('Next') }} <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
       {%- endif %}
   </div>
   {%- endif %}

sphinx_rtd_theme/footer.html

@@ -2,10 +2,10 @@
   {%- if (theme_prev_next_buttons_location == 'bottom' or theme_prev_next_buttons_location == 'both') and (next or prev) %}
     <div class="rst-footer-buttons" role="navigation" aria-label="{{ _('Footer') }}">
       {%- if prev %}
-        <a href="{{ prev.link|e }}" class="btn btn-neutral float-left" title="{{ prev.title|striptags|e }}" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> {{ _('Previous') }}</a>
+        <a href="{{ prev.link|e }}" class="btn btn-light float-left" title="{{ prev.title|striptags|e }}" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> {{ _('Previous') }}</a>
       {%- endif %}
       {%- if next %}
-        <a href="{{ next.link|e }}" class="btn btn-neutral float-right" title="{{ next.title|striptags|e }}" accesskey="n" rel="next">{{ _('Next') }} <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
+        <a href="{{ next.link|e }}" class="btn btn-light float-right" title="{{ next.title|striptags|e }}" accesskey="n" rel="next">{{ _('Next') }} <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
       {%- endif %}
     </div>
   {%- endif %}

sphinx_rtd_theme/layout.html

@@ -6,11 +6,10 @@
 {%- else %}
   {%- set titlesuffix = "" %}
 {%- endif %}
-{%- set lang_attr = 'en' if language == None else (language | replace('_', '-')) %}
-{%- set sphinx_writer = 'writer-html5' if html5_doctype else 'writer-html4' -%}
+{%- set lang_attr = 'en' if language == None else (language | replace('_', '-')) -%}
 
 <!DOCTYPE html>
-<html class="{{ sphinx_writer }}" lang="{{ lang_attr }}" >
+<html lang="{{ lang_attr }}" >
 <head>
   <meta charset="utf-8" />
   {{- metatags }}
@@ -51,9 +50,6 @@
 
   {#- JAVASCRIPTS #}
   {%- block scripts %}
-  <!--[if lt IE 9]>
-    <script src="{{ pathto('_static/js/html5shiv.min.js', 1) }}"></script>
-  <![endif]-->
   {%- if not embedded %}
   {# XXX Sphinx 1.8.0 made this an external js-file, quick fix until we refactor the template to inherert more blocks directly from sphinx #}
     {%- if sphinx_version >= "1.8.0" -%}
@@ -111,22 +107,23 @@
   {%- block extrahead %} {% endblock %}
 </head>
 
-<body class="wy-body-for-nav">
-
+<body>
   {%- block extrabody %} {% endblock %}
-  <div class="wy-grid-for-nav">
-    {#- SIDE NAV, TOGGLES ON MOBILE #}
-    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
-      <div class="wy-side-scroll">
-        <div class="wy-side-nav-search" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
-          {%- block sidebartitle %}
 
+  <div class="d-flex" id="wrapper">
+
+    <!-- Sidebar -->
+    <div class="sidebar-right" id="sidebar-wrapper">
+      <div class="sidebar-scroll">
+        <div class="sidebar-heading">
+          {%- block sidebartitle %}
+ 
           {%- if logo and theme_logo_only %}
             <a href="{{ pathto(master_doc) }}">
           {%- else %}
             <a href="{{ pathto(master_doc) }}" class="icon icon-home"> {{ project }}
           {%- endif %}
-
+ 
           {%- if logo %}
             {#- Not strictly valid HTML, but it's the only way to display/scale
                 it properly, without weird scripting or heaps of work
@@ -134,7 +131,7 @@
             <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="{{ _('Logo') }}"/>
           {%- endif %}
           </a>
-
+ 
           {%- if theme_display_version %}
             {%- set nav_version = version %}
             {%- if READTHEDOCS and current_version %}
@@ -146,14 +143,14 @@
               </div>
             {%- endif %}
           {%- endif %}
-
+ 
           {%- include "searchbox.html" %}
-
+ 
           {%- endblock %}
         </div>
 
         {%- block navigation %}
-        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="{{ _('Main') }}">
+        <div class="sidebar-navigation" data-spy="affix" role="navigation" aria-label="{{ _('Main') }}">
           {%- block menu %}
             {%- set toctree = toctree(maxdepth=theme_navigation_depth|int,
                                       collapse=theme_collapse_navigation|tobool,
@@ -166,48 +163,49 @@
               <div class="local-toc">{{ toc }}</div>
             {%- endif %}
           {%- endblock %}
-        </div>
-        {%- endblock %}
+       </div>
+       {%- endblock %}
       </div>
-    </nav>
+    </div>
+    <!-- /#sidebar-wrapper -->
 
-    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
-
-      {#- MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
-      <nav class="wy-nav-top" aria-label="{{ _('Top') }}">
+    <!-- Page Content -->
+   <div class="page-content-wrapper">
+      <nav class="wy-nav-top navbar navbar-expand-lg navbar-light bg-light border-bottom" aria-label="{{ _('Top') }}">
         {%- block mobile_nav %}
-          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
-          <a href="{{ pathto(master_doc) }}">{{ project }}</a>
+           <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
+           <a href="{{ pathto(master_doc) }}">{{ project }}</a>
         {%- endblock %}
       </nav>
 
-      <div class="wy-nav-content">
-      {%- block content %}
-        {%- if theme_style_external_links|tobool %}
-        <div class="rst-content style-external-links">
-        {%- else %}
-        <div class="rst-content">
-        {%- endif %}
-          {% include "breadcrumbs.html" %}
-          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
-          {%- block document %}
-           <div itemprop="articleBody">
-             {% block body %}{% endblock %}
-           </div>
-           {%- if self.comments()|trim %}
-             <div class="articleComments">
+      <div class="container-fluid">
+         {%- block content %}
+           {%- if theme_style_external_links|tobool %}
+           <div class="rst-content style-external-links">
+           {%- else %}
+           <div class="rst-content">
+           {%- endif %}
+             {% include "breadcrumbs.html" %}
+             <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
+             {%- block document %}
+              <div itemprop="articleBody">
+               {% block body %}{% endblock %}
+              </div>
+              {%- if self.comments()|trim %}
+              <div class="articleComments">
                {%- block comments %}{% endblock %}
+              </div>
+              {%- endif%}
              </div>
-           {%- endif%}
-          </div>
-          {%- endblock %}
-          {% include "footer.html" %}
-        </div>
-      {%- endblock %}
+             {%- endblock %}
+             {%- include "footer.html" %}
+           </div>
+         {%- endblock %}
       </div>
-    </section>
+    </div>
+    <!-- /#page-content-wrapper -->
   </div>
-  {% include "versions.html" -%}
+  {%- include "versions.html" -%}
 
   <script type="text/javascript">
       jQuery(function () {

sphinx_rtd_theme/searchbox.html

@@ -1,7 +1,7 @@
 {%- if 'singlehtml' not in builder %}
-<div role="search">
-  <form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
-    <input type="text" name="q" placeholder="{{ _('Search docs') }}" />
+<div class="form-outline" role="search">
+  <form id="rtd-search-form" action="{{ pathto('search') }}" method="get">
+    <input type="search" name="q" class="form-control" placeholder="{{ _('Search docs') }}" />
     <input type="hidden" name="check_keywords" value="yes" />
     <input type="hidden" name="area" value="default" />
   </form>

src/sass/_theme_badge.sass

@@ -4,23 +4,23 @@
   left: 0
   width: $nav-desktop-width
   color: $section-background-color
-  background: darken($menu-background-color, 8%)
-  font-family: $base-font-family
-  z-index: $z-index-tray
+  background: darken($nav-background-color, 8%)
+  font-family: $font-family-base
+  z-index: $zindex-popover
   a
     color: $link_color
     text-decoration: none
   .rst-badge-small
     display: none
   .rst-current-version
-    padding: $base-line-height / 2
-    background-color: darken($menu-background-color, 5%)
+    padding: $line-height-base / 2
+    background-color: darken($nav-background-color, 5%)
     display: block
     text-align: right
     font-size: 90%
     cursor: pointer
     color: $green
-    +clearfix
+    @include clearfix
     .fa
       color: $section-background-color
     .fa-book
@@ -41,7 +41,7 @@
     display: block
   .rst-other-versions
     font-size: 90%
-    padding: $base-line-height / 2
+    padding: $line-height-base / 2
     color: $text-medium
     display: none
     hr
@@ -50,13 +50,13 @@
       border: 0
       margin: 20px 0
       padding: 0
-      border-top: solid 1px lighten($menu-background-color, 5%)
+      border-top: solid 1px lighten($nav-background-color, 5%)
     dd
       display: inline-block
       margin: 0
       a
         display: inline-block
-        padding: $base-line-height / 4
+        padding: $line-height-base / 4
         color: $section-background-color
   &.rst-badge
     width: auto
@@ -82,11 +82,11 @@
       width: auto
       height: 30px
       line-height: 30px
-      padding: 0 $base-line-height / 4
+      padding: 0 $line-height-base / 4
       display: block
       text-align: center
 
-+media($tablet)
+@media (max-width: $nav-media-query)
   .rst-versions
     width: 85%
     display: none

src/sass/_theme_badge_fa.sass

@@ -1,7 +1,5 @@
 // Slimmer version of FA for use on the badge_only.sass file.
 
-+font-face(FontAwesome, '#{$fa-font-path}/fontawesome-webfont')
-
 .fa:before
   display: inline-block
   font-family: FontAwesome
@@ -9,7 +7,6 @@
   font-weight: normal
   line-height: 1
   text-decoration: inherit
-  +font-smooth
 
 a .fa
   display: inline-block
@@ -30,7 +27,7 @@ ul.fas
   text-indent: -0.8em
   li
     .fa
-      width: 0.8em
+      width: .8em
     .fa-large:before,
     .fa-large:before
       /* 1.5 increased font size for fa-large * 1.25 width

src/sass/_theme_breadcrumbs.sass

@@ -1,34 +1,14 @@
-.wy-breadcrumbs
-  +clearfix
+.breadcrumb
+   padding-left: 0px
+   background-color: inherit
 
-.wy-breadcrumbs li
-  display: inline-block
-  &.wy-breadcrumbs-aside
-    float: right
-  a
-    display: inline-block
-    padding: 5px
-    &:first-child
-      padding-left: 0
-  code
-    padding: 5px
-    border: none
-    background: none
-    &.literal
-      color: $text-color
-.wy-breadcrumbs-extra
-  margin-bottom: 0
-  color: $text-light
-  font-size: 80%
-  display: inline-block
+.breadcrumb-aside
+   margin-left: auto
 
-
-+media($mobile)
-  .wy-breadcrumbs-extra
-    display: none
-  .wy-breadcrumbs li.wy-breadcrumbs-aside
+@include media-breakpoint-down(sm)
+  .breadcrumb li.breadcrumb-aside
     display: none
 
 @media print
-  .wy-breadcrumbs li.wy-breadcrumbs-aside
+  .breadcrumb li.breadcrumb-aside
     display: none

src/sass/_theme_layout.sass

@@ -1,41 +1,41 @@
 // Set uniform (but not relative) base font size
-html
-  font-size: $base-font-size
+body
+  font-family: $font-family-base
+  font-size: $font-size-base
 
-.wy-affix
-  position: fixed
-  top: $gutter
+h1, h2, h3, h4, h5, h6
+   font-family: $font-family-headings
+   font-weight: 700
+   margin-bottom: $line-height-base
+
+h1
+  font-size: 175%
+h2
+  font-size: 150%
+h3
+  font-size: 125%
+h4
+  font-size: 115%
+h5
+  font-size: 110%
+h6
+  font-size: 100%
+
+ol, ul
+  padding-left: 0px
+
+.sidebar-navigation
+  width: $nav-desktop-width
 
-.wy-menu
   a:hover
     text-decoration: none
 
-.wy-menu-horiz
-  +clearfix
-  ul, li
-    display: inline-block
-  li:hover
-    background: rgba(255, 255, 255, 0.1)
-  li
-    &.divide-left
-      border-left: solid 1px hsl(0, 0%, 25%)
-    &.divide-right
-      border-right: solid 1px hsl(0, 0%, 25%)
-  a
-    height: $base-font-size * 2
-    display: inline-block
-    line-height: $base-font-size * 2
-    padding: 0 $base-font-size
-
-.wy-menu-vertical
-  width: $nav-desktop-width
-
   header, p.caption
     color: $nav-caption
-    height: $base-font-size * 2
-    line-height: $base-font-size * 2
+    height: $font-size-base * 2
+    line-height: $font-size-base * 2
     padding: 0 $gutter
-    margin: ($base-line-height / 2) 0 0 0
+    margin: $line-height-base / 2 0 0 0
     display: block
     font-weight: bold
     text-transform: uppercase
@@ -50,13 +50,13 @@ html
     &.divide-bottom
       border-bottom: solid 1px hsl(0, 0%, 25%)
     &.current
-      background: darken($menu-vertical-background-color, 10%)
+      background: darken($nav-menu-background-color, 10%)
       a
         color: $menu-link-medium
-        border-right: solid 1px darken($menu-vertical-background-color, 20%)
-        padding: ($gutter / 4) ($gutter * 1.5)
+        border-right: solid 1px darken($nav-menu-background-color, 20%)
+        padding: $gutter / 4 $gutter * 1.5
         &:hover
-          background: darken($menu-vertical-background-color, 15%)
+          background: darken($nav-menu-background-color, 15%)
     code
       border: none
       background: inherit
@@ -76,15 +76,14 @@ html
   // On state for the first level
   li.on a, li.current > a
     color: $menu-link-color
-    padding: ($gutter / 4) $gutter
+    padding: $gutter / 4 $gutter
     font-weight: bold
     position: relative
-    background: $menu-vertical-background-color
+    background: $nav-menu-background-color
     border: none
     padding-left: $gutter -4px
-    +font-smooth
     &:hover
-      background: $menu-vertical-background-color
+      background: $nav-menu-background-color
       span.toctree-expand
         color: $menu-link-medium
     span.toctree-expand
@@ -95,8 +94,8 @@ html
       color: darken($menu-link-medium, 30%)
 
   li.toctree-l1.current > a
-    border-bottom: solid 1px darken($menu-vertical-background-color, 20%)
-    border-top: solid 1px darken($menu-vertical-background-color, 20%)
+    border-bottom: solid 1px darken($nav-menu-background-color, 20%)
+    border-top: solid 1px darken($nav-menu-background-color, 20%)
 
   // This is the on state for pages beyond second level
 
@@ -107,7 +106,7 @@ html
       display: block
 
   %shrink_toctree_element
-    font-size: 0.9em
+    font-size: .9em
 
   %toctree_link_color
     color: $menu-link-color
@@ -128,11 +127,11 @@ html
           @extend %toctree_link_color
         &.current
           > a
-            padding: ($gutter / 4) ($gutter * ($toc_level - 1 + 0.5))
+            padding: $gutter / 4 $gutter * ($toc_level - 1 + .5)
 
           li.toctree-l#{$toc_level + 1}  > a
             @extend %display_current_toctree_element
-            padding: ($gutter / 4) ($gutter * ($toc_level + 0.5))
+            padding: $gutter / 4 $gutter * ($toc_level + .5)
             padding-right: $gutter
         a:hover span.toctree-expand
           @extend %toctree_hover_link_color
@@ -143,19 +142,19 @@ html
   li.toctree-l2
     &.current
       > a
-        background: darken($menu-vertical-background-color, 20%)
+        background: darken($nav-menu-background-color, 20%)
       li.toctree-l3 > a
-        background: darken($menu-vertical-background-color, 20%)
+        background: darken($nav-menu-background-color, 20%)
     span.toctree-expand
-      color: darken($menu-vertical-background-color, 35%)
+      color: darken($nav-menu-background-color, 35%)
   li.toctree-l3
     &.current
       > a
-        background: darken($menu-vertical-background-color, 25%)
+        background: darken($nav-menu-background-color, 25%)
       li.toctree-l4 > a
-        background: darken($menu-vertical-background-color, 25%)
+        background: darken($nav-menu-background-color, 25%)
     span.toctree-expand
-      color: darken($menu-vertical-background-color, 40%)
+      color: darken($nav-menu-background-color, 40%)
 
   li.current ul
     display: block
@@ -168,29 +167,29 @@ html
     font-weight: normal
   a
     line-height: 18px
-    padding: ($gutter / 4) $gutter
+    padding: $gutter / 4 $gutter
     display: block
     position: relative
     font-size: 90%
     color: $menu-link-light
     &:hover
-      background-color: lighten($menu-background-color, 10%)
+      background-color: lighten($nav-background-color, 10%)
       cursor: pointer
       span.toctree-expand
         color: $menu-link-light
     &:active
-      background-color: $menu-logo-color
+      background-color: $nav-search-background-color
       cursor: pointer
       color: $menu-link-active
       span.toctree-expand
         color: $menu-link-active
 
-.wy-side-nav-search
+.sidebar-heading
   display: block
   width: $nav-desktop-width
   padding: $gutter / 2
   margin-bottom: $gutter / 2
-  z-index: $z-index-popover
+  z-index: $zindex-fixed
   background-color: $nav-search-background-color
   text-align: center
   color: $nav-search-color
@@ -201,22 +200,21 @@ html
     border-color: darken($link-color, 5%)
   img
     display: block
-    margin: auto auto ($gutter / 2) auto
+    margin: auto auto $gutter / 2 auto
     height: 45px
     width: 45px
-    background-color: $menu-logo-color
+    background-color: $nav-search-background-color
     padding: 5px
     border-radius: 100%
-  > a, .wy-dropdown > a
+  > a
     color: $nav-search-color
     font-size: 100%
     font-weight: bold
     display: inline-block
-    padding: ($base-line-height / 6) ($base-line-height / 4)
+    padding: $line-height-base / 6 $line-height-base / 4
     margin-bottom: $gutter / 2
-    +font-smooth
     &:hover
-      background: rgba(255, 255, 255, 0.1)
+      background: rgba(255,255,255,.1)
     img.logo
       display: block  // display on its own line all the time
       margin: 0 auto
@@ -224,27 +222,18 @@ html
       width: auto
       border-radius: 0
       max-width: 100%  // shrink on mobile, if appropriate
-      background: rgba(0, 0, 0, 0)  // make hover background of parent show up properly
+      background: rgba(0,0,0,0)  // make hover background of parent show up properly
     &.icon
       img.logo
         margin-top: 0.85em  // space it away from the title text
   > div.version
-    margin-top: -1 * $gutter / 4
+    margin-top: -1 * ($gutter / 4)
     margin-bottom: $gutter / 2
     font-weight: normal
-    color: rgba(255, 255, 255, 0.3)
-
-.wy-nav .wy-menu-vertical
-  header
-    color: $link-color
-  a
-    color: $text-light
-    &:hover
-      background-color: $link-color
-      color: $white
+    color: rgba(255,255,255,.3)
 
 [data-menu-wrap]
-  +transition(all 0.2s ease-in)
+  +transition(all .2s ease-in)
   position: absolute
   opacity: 1
   width: 100%
@@ -262,15 +251,10 @@ html
     left: auto
     opacity: 0
 
-.wy-body-for-nav
+.d-flex
   background: $section-background-color
 
-.wy-grid-for-nav
-  position: absolute
-  width: 100%
-  height: 100%
-
-.wy-nav-side
+.sidebar-right
   position: fixed
   top: 0
   bottom: 0
@@ -280,11 +264,11 @@ html
   overflow-x: hidden
   overflow-y: hidden
   min-height: 100%
-  color: $menu-medium
   background: $nav-background-color
-  z-index: $z-index-popover
+  z-index: $zindex-fixed
 
-.wy-side-scroll
+.sidebar-scroll
+  padding-bottom: $gutter / 2
   width: $nav-desktop-width + 20px
   position: relative
   overflow-x: hidden
@@ -295,21 +279,20 @@ html
   display: none
   background: $link-color
   color: $white
-  padding: ($gutter / 4) ($gutter / 2)
+  padding: $gutter / 4 $gutter / 2
   position: relative
   line-height: 50px
   text-align: center
   font-size: 100%
-  +clearfix
+  @include clearfix
   a
     color: $white
     font-weight: bold
-    +font-smooth
   img
-    margin-right: $base-line-height / 2
+    margin-right: $line-height-base / 2
     height: 45px
     width: 45px
-    background-color: $menu-logo-color
+    background-color: $nav-search-background-color
     padding: 5px
     border-radius: 100%
   i
@@ -318,72 +301,63 @@ html
     cursor: pointer
     padding-top: inherit
 
-.wy-nav-content-wrap
+.page-content-wrapper
   margin-left: $nav-desktop-width
-  background: $section-background-color
+  background: $content-background-color
   min-height: 100%
 
-.wy-nav-content
-  padding: $gutter ($gutter * 2)
+.container-fluid
+  padding: $gutter $gutter * 2
   height: 100%
   max-width: $nav-content-width
   margin: auto
 
-.wy-body-mask
-  position: fixed
-  width: 100%
-  height: 100%
-  background: rgba(0, 0, 0, 0.2)
-  display: none
-  z-index: $z-index-modal - 1
-  &.on
-    display: block
 footer
   color: $footer-color
   p
-    margin-bottom: $base-line-height / 2
+    margin-bottom: $line-height-base / 2
   span.commit code
     padding: 0px
-    font-family: $code-font-family
+    font-family: $font-family-code
     font-size: 1em
     background: none
     border: none
     color: $footer-color
 
 .rst-footer-buttons
+  @include clearfix
   &:before, &:after
     width: 100%
-  +clearfix
 
 .rst-breadcrumbs-buttons
+  @include clearfix
   margin-top: 12px
-  +clearfix
 
 #search-results
   .search li
-    margin-bottom: $base-line-height
+    margin-bottom: $line-height-base
     border-bottom: solid 1px $table_border_color
-    padding-bottom: $base-line-height
+    padding-bottom: $line-height-base
   .search li:first-child
     border-top: solid 1px $table_border_color
-    padding-top: $base-line-height
+    padding-top: $line-height-base
   .search li a
     font-size: 120%
-    margin-bottom: $base-line-height / 2
+    margin-bottom: $line-height-base / 2
     display: inline-block
   .context
     color: $text-medium
     font-size: 90%
 
 .genindextable li > ul
-  margin-left: $base-line-height
+  margin-left: $line-height-base
 
-+media($tablet)
-  .wy-body-for-nav
+@media (max-width: $nav-media-query)
+  .d-flex
     background: $section-background-color
   .wy-nav-top
     display: block
-  .wy-nav-side
+  .sidebar-right
     @if $nav-desktop-position == left
       left: -$nav-desktop-width
     @else
@@ -391,15 +365,15 @@ footer
     &.shift
       width: 85%
       left: 0
-  .wy-side-scroll
+  .sidebar-scroll
     width: auto
-  .wy-side-nav-search
+  .sidebar-heading
     width: auto
-  .wy-menu.wy-menu-vertical
+  .sidebar-navigation
     width: auto
-  .wy-nav-content-wrap
+  .page-content-wrapper
     margin-left: 0
-    .wy-nav-content
+    .container-fluid
       padding: $gutter
     &.shift
       position: fixed
@@ -410,14 +384,14 @@ footer
       overflow: hidden
 
 @media screen and (min-width: $nav-media-query)
-  .wy-nav-content-wrap
-    background: rgba(0, 0, 0, 0.05)
-  .wy-nav-content
+  .page-content-wrapper
+    background: rgba(0,0,0,.05)
+  .container-fluid
     margin: 0
-    background: $section-background-color
+    background: $content-background-color
 
 @media print
-  .rst-versions, footer, .wy-nav-side
+  .rst-versions, footer, .sidebar-right
     display: none
-  .wy-nav-content-wrap
+  .page-content-wrapper
     margin-left: 0

src/sass/_theme_rst.sass

@@ -7,9 +7,8 @@
 //        * That said, know that I'm very unlikely to accept PRs from wyrm just to change style here.
 //    2. I plan to remove the !importants in here. Part of it is due to lazyness, part to sphinx's fondness for nesting.
 //    3. Try to use variables from wyrm_core/wy_variables.sass. Notable are...
-//        * $base-line-height // All margins, padding and line-height should use this in .25 increments.
+//        * $line-height-base // All margins, padding and line-height should use this in .25 increments.
 //        * $text-color, $text-light, $text-dark...etc
-//        * $base-font-family, $custom-font-family, $code-font-family
 //    4. If you have changes for mobile/tablet, put them at the bottom of the sass file.
 // --------------------------------------------------------------------------------------------------------------------
 
@@ -20,7 +19,7 @@
     height: auto
 
   div.figure
-    margin-bottom: $base-line-height
+    margin-bottom: $line-height-base
     p.caption
       font-style: italic
     p:last-child.caption
@@ -31,7 +30,7 @@
 
   // Usually it's a good idea to give images some space.
   .section > img,   .section > a > img
-    margin-bottom: $base-line-height
+    margin-bottom: $line-height-base
 
   // normalize browser styling
   abbr[title]
@@ -49,22 +48,24 @@
   // For the most part, its safe to assume that sphinx wants you to use a blockquote as an indent. It gets
   // used in many different ways, so don't assume you can apply some fancy style, just leave it be.
   blockquote
-    margin-left: $base-line-height
-    line-height: $base-line-height
-    margin-bottom: $base-line-height
+    @extend .blockquote
+    margin-left: $line-height-base
+    line-height: $line-height-base
+    margin-bottom: $line-height-base
+    font-size: $font-size-base
 
   pre.literal-block
     white-space: pre
     margin: 0
-    padding: ($base-line-height / 2) ($base-line-height / 2)
-    font-family: $code-font-family
+    padding: $line-height-base / 2 $line-height-base / 2
+    font-family: $font-family-code
     display: block
     overflow: auto
   pre.literal-block, div[class^='highlight']
-    border: 1px solid $table-border-color
+    border: 1px solid $gray-300
     overflow-x: auto
     // 1px hack otherwise border won't show. lame
-    margin: 1px 0 $base-line-height 0
+    margin: 1px 0 $line-height-base 0
     div[class^='highlight']
       padding: 0px
       border: none
@@ -73,30 +74,33 @@
   div[class^='highlight'] td.code
     width: 100%
   .linenodiv pre
-    border-right: solid 1px lighten($table-border-color, 2%)
+    border-right: solid 1px $gray-300
     margin: 0
-    padding: ($base-line-height / 2) ($base-line-height / 2)
-    font-family: $code-font-family
+    padding: $line-height-base / 2 $line-height-base / 2
+    font-family: $font-family-code
     user-select: none
     pointer-events: none
   div[class^='highlight'] pre
     white-space: pre
     margin: 0
-    padding: ($base-line-height / 2) ($base-line-height / 2)
+    padding: $line-height-base / 2 $line-height-base / 2
     display: block
     overflow: auto
     & .hll
       // Line emphasis spans full width
       display: block
-      margin: 0 (-1 * $base-line-height / 2)
-      padding: 0 ($base-line-height / 2)
+      margin: 0 -1 * $line-height-base / 2
+      padding: 0 $line-height-base / 2
   pre.literal-block, div[class^='highlight'] pre, .linenodiv pre
-    font-family: $code-font-family
+    font-family: $font-family-code
     font-size: 12px
     line-height: 1.4
   
+  .literal-block-wrapper
+    padding: 0px 
+
   // Do not allow selection of code block prompts
-  div.highlight .gp 
+  div.highlight .gp
     user-select: none
     pointer-events: none
 
@@ -113,54 +117,81 @@
 
   // These are the various note pullouts that sphinx applies
   .note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning, .seealso, .admonition-todo, .admonition
-    @extend .wy-alert
+    @extend .alert
+    color: $text-color
     // These block elements are unsuitable for having floating objects next
     // to them
     clear: both
     .last, > *:last-child
       margin-bottom: 0
   .admonition-title
-    @extend .wy-alert-title
+    // @extend .alert-heading
     @extend .fa
     @extend .fa-exclamation-circle
     &:before
       margin-right: 4px
   .note, .seealso
-    @extend .wy-alert.wy-alert-info
+    @extend .alert-info
   .hint, .tip, .important
-    @extend .wy-alert.wy-alert-success
+    @extend .alert-success
   .error, .danger
-    @extend .wy-alert.wy-alert-danger
+    @extend .alert-danger
   .warning, .caution, .attention, .admonition-todo
-    @extend .wy-alert.wy-alert-warning
+    @extend .alert-warning
   // Some people put tables in notes. Let's give them very basic support.
   .admonition table
-    border-color: rgba(0, 0, 0, 0.1)
+    border-color: rgba(0,0,0,.1)
     td, th
       background: transparent !important
-      border-color: rgba(0, 0, 0, 0.1) !important
+      border-color: rgba(0,0,0,.1) !important
   .section ul, .toctree-wrapper ul
-    @extend .wy-plain-list-disc
+     list-style: disc
+     line-height: $line-height-base
+     margin-bottom: $line-height-base
+     li
+       list-style: disc
+       margin-left: $line-height-base
+       p:last-child
+         margin-bottom: 0
+       ul
+         margin-bottom: 0
+       li
+         list-style: circle
+         li
+           list-style: square
+       ol li
+         list-style: decimal
   .section ol.loweralpha, .section ol.loweralpha > li
     list-style: lower-alpha
   .section ol.upperalpha, .section ol.upperalpha > li
     list-style: upper-alpha
   .section ol, ol.arabic
-    @extend .wy-plain-list-decimal
+     list-style: decimal
+     line-height: $line-height-base
+     margin-bottom: $line-height-base
+     li
+       list-style: decimal
+       margin-left: $line-height-base
+       p:last-child
+         margin-bottom: 0
+       ul
+         margin-bottom: 0
+         li
+           list-style: disc
   // Complex bullet lists, they have more item margins than simple lists
   .section ol li, .section ul li
     > *
-      margin-top: $base-line-height / 2
-      margin-bottom: $base-line-height / 2
+      margin-top: $line-height-base / 2
+      margin-bottom: $line-height-base / 2
       &:first-child
         margin-top: 0rem
     > p
       &, &:last-child
-        margin-bottom: $base-line-height / 2
+        margin-bottom: $line-height-base / 2
       &:only-child, &:only-child:last-child
         margin-bottom: 0rem
     > ul, > ol
-      margin-bottom: $base-line-height / 2
+      margin-bottom: $line-height-base / 2
   // Simple lists, no item margins
   .section ol.simple li, .section ul.simple li
     > *
@@ -171,24 +202,26 @@
       margin-bottom: 0rem
   .line-block
     margin-left: 0px
-    margin-bottom: $base-line-height
-    line-height: $base-line-height
+    margin-bottom: $line-height-base
+    line-height: $line-height-base
   .line-block .line-block
-    margin-left: $base-line-height
+    margin-left: $line-height-base
     margin-bottom: 0px
 
   // Generics handling of headings and toc stuff.
   .topic-title
     font-weight: bold
-    margin-bottom: $base-line-height / 2
+    margin-bottom: $line-height-base / 2
   .toc-backref
     color: $text-color
+    &:hover
+      text-decoration-line: none
   .align-right
     float: right
-    margin: 0px 0px $base-line-height $base-line-height
+    margin: 0px 0px $line-height-base $line-height-base
   .align-left
     float: left
-    margin: 0px $base-line-height $base-line-height 0px
+    margin: 0px $line-height-base $line-height-base 0px
   .align-center
     margin: auto
     // Do not override display:table for tables
@@ -215,33 +248,10 @@
   .centered
     text-align: center
 
-  // Sidebar content. You'll see at the bottom of this file I change it in mobile.
-  .sidebar
-    float: right
-    width: 40%
-    display: block
-    margin: 0 0 $base-line-height $base-line-height
-    padding: $base-line-height
-    background: $sidebar-background-color
-    border: solid 1px $sidebar-border-color
-    // Sidebar content is usually less relevant, so adjust the margins and sizes.
-    p, ul, dl
-      font-size: 90%
-    .last, > *:last-child
-      margin-bottom: 0
-    .sidebar-title
-      display: block
-      font-family: $custom-font-family
-      font-weight: bold
-      background: $table-border-color
-      padding: ($base-line-height / 4) ($base-line-height / 2)
-      margin: -$base-line-height
-      margin-bottom: $base-line-height
-      font-size: 100%
   // Sphinx can highlight searched text with ?highlighted=searchterm
   .highlighted
     background: $highlight-color
-    box-shadow: 0 0 0 ($base-line-height / 12) $highlight-color
+    box-shadow: 0 0 0 $line-height-base / 12 $highlight-color
     display: inline
     font-weight: bold
 
@@ -257,98 +267,81 @@
   .hlist
     width: 100%
 
-  // The html4 writer outputs the citation and footnotes as a table, and the
-  // html5 writer outputs these as a definition list. We will use the fairly
-  // well supported css `grid` attribute to make these back into a table
-  // HTML4 writer
-  html.writer-html4 &
-    table.docutils.citation, table.docutils.footnote
-      background: none
-      border: none
-      td, tr
-        border: none
-        background-color: transparent !important
-        white-space: normal
-      td.label
-        padding-left: 0
-        padding-right: 0
-        vertical-align: top
-  // HTML5 writer
-  html.writer-html5 &
-    dl dt span.classifier
-      &:before
-        content: " : "
-    dl.footnote,
-    dl.field-list
-      display: grid
-      grid-template-columns: max-content auto
-      > dt
-        padding-left: 1rem
+  // Formate citation and footnotes as a table.
+  // We will use the fairly well supported css `grid` attribute
+  dl dt span.classifier
+    &:before
+      content: " : "
+  dl.footnote,
+  dl.field-list
+    display: grid
+    grid-template-columns: max-content auto
+    > dt
+      padding-left: 1rem
+      &:after
+        content: ":"
+    > dt, > dd
+      margin-bottom: 0rem
+  dl.footnote
+    font-size: .9rem
+    > dt
+      margin: 0rem .5rem .5rem 0rem
+      line-height: 1.2rem
+      word-break: break-all
+      font-weight: normal
+      > span.brackets
+        margin-right: .5rem
+        &:before
+          content: "["
         &:after
-          content: ":"
-      > dt, > dd
-        margin-bottom: 0rem
-    dl.footnote
-      font-size: 0.9rem
-      > dt
-        margin: 0rem 0.5rem 0.5rem 0rem
-        line-height: 1.2rem
-        word-break: break-all
-        font-weight: normal
-        > span.brackets
-          margin-right: 0.5rem
-          &:before
-            content: "["
-          &:after
-            content: "]"
-        > span.fn-backref
-          font-style: italic
-      > dd
-        margin: 0rem 0rem 0.5rem 0rem
-        line-height: 1.2rem
-        p
-          font-size: 0.9rem
-    dl.option-list
-      kbd
-        font-size: 0.9rem
-  // Both
-  html.writer-html4 & table.docutils.citation, table.docutils.footnote,
-  html.writer-html5 & dl.footnote
+          content: "]"
+      > span.fn-backref
+        font-style: italic
+    > dd
+      margin: 0rem 0rem .5rem 0rem
+      line-height: 1.2rem
+      p
+        font-size: .9rem
+  dl.option-list
+    kbd
+      font-size: .9rem
+
+  table.docutils.footnote, dl.footnote
     color: $text-medium
     code
-      color: $gray
+      color: $gray-500
 
   // Remove the large vertical space between citations and footnotes
-  .wy-table-responsive.citation, .wy-table-responsive.footnote
+  .table-responsive.citation, .table-responsive.footnote
     margin-bottom: 0
   // Re-add vertical space to element directly following citation and footnotes,
   // if the following element is of a different type
-  .wy-table-responsive.citation + :not(.citation),
-  .wy-table-responsive.footnote + :not(.footnote)
-    margin-top: $base-line-height
+  .table-responsive.citation + :not(.citation),
+  .table-responsive.footnote + :not(.footnote)
+    margin-top: $line-height-base
   // Re-add vertical space after citation and footnotes if it is the last child of a parent
-  .wy-table-responsive.citation:last-child, .wy-table-responsive.footnote:last-child
-    margin-bottom: $base-line-height
+  .table-responsive.citation:last-child, .table-responsivefootnote:last-child
+    margin-bottom: $line-height-base
   table.docutils
-    @extend .wy-table
-    @extend .wy-table-bordered-all
+    @extend .table
+    @extend .table-bordered
     th
-      border-color: $table-border-color
+      border-color: $gray-300
       html.writer-html5 &
-        border: 1px solid $table-border-color
+        border: 1px solid $gray-300
     html.writer-html5 &
       th > p, td > p
         line-height: 1rem
         margin-bottom: 0rem
-        font-size: 0.9rem
+        font-size: .9rem
     &:not(.field-list)
-      @extend .wy-table-striped
+      @extend .table-striped
     // Remove bottom margin for the last element (and it's last child)
     td .last, td .last > *:last-child
       margin-bottom: 0
   // This table is what gets spit out for auto-generated API stuff. I style it smaller bits of padding.
   table.field-list
-    @extend .wy-table
+    @extend .table
     border: none
     td
       border: none
@@ -368,64 +361,66 @@
   tt, code
     @extend code
     color: $black
-    font-family: $code-font-family
+    font-family: $font-family-code
     padding: 2px 5px
     big, em
       font-size: 100% !important
       line-height: normal
 
     &.literal
-      color: $text-code-color
+      border: 1px solid $gray-300
+      color: $red
       white-space: normal
     &.xref, a &
       font-weight: bold
       color: $text-codexref-color
   pre, kbd, samp
-    font-family: $code-font-family
+    font-family: $font-family-code
   // If the literal is inside an a tag, let's color it like a link
   a tt, a code
     color: $link-color
   dl
-    margin-bottom: $base-line-height
+    margin-bottom: $line-height-base
     dt
       font-weight: bold
-      margin-bottom: $base-line-height / 2
+      margin-bottom: $line-height-base / 2
     // Most of the content within these dls are one liners, so I halve the normal margins.
     p, table, ul, ol
-      margin-bottom: $base-line-height / 2
+      margin-bottom: $line-height-base / 2
     // rST seems to want dds to be treated as the browser would, indented.
     dd
-      margin: 0 0 ($base-line-height / 2) $base-line-height
-      line-height: $base-line-height
-  html.writer-html4 & dl:not(.docutils),
-  html.writer-html5 & dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple)
-    margin-bottom: $base-line-height
+      margin: 0  0 $line-height-base / 2 $line-height-base
+      line-height: $line-height-base
+
+  dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple)
+    margin-bottom: $line-height-base
     > dt
       display: table
-      margin: ($base-line-height / 4) 0
+      margin: $line-height-base / 4 0
       font-size: 90%
       line-height: normal
-      background: lighten($class-color, 50%)
+      background: lighten($class-color, 45%)
       color: $class-color
       border-top: solid 3px lighten($class-color, 20%)
-      padding: $base-line-height / 4
+      padding: $line-height-base / 4
       position: relative
       &:before
         color: lighten($class-color, 20%)
       .headerlink
         color: $text-color
         font-size: 100% !important
-    // In the html4 writer, parameters is a table. In html5 writer, parameters
-    // is a nested dl.field-list
+    // parameters
     dl:not(.field-list) > dt
-      margin-bottom: $base-line-height / 4
+      margin-bottom: $line-height-base / 4
       border: none
-      border-left: solid 3px hsl(0, 0%, 80%)
-      background: hsl(0, 0%, 94%)
+      border-left: solid 3px hsl(0,0%,80%)
+      background: hsl(0,0%,94%)
       color: $method-color
       .headerlink
         color: $headerlink-color
         font-size: 100% !important
+      &:not(.sig-name)
+        color: darken($method-color, 35%)
     > dt:first-child
       margin-top: 0
     // Since dts get the callout style, we treat this less as callouts.
@@ -452,7 +447,7 @@
     display: inline-block
     color: $text-viewcode-color
     font-size: 80%
-    padding-left: $base-line-height
+    padding-left: $line-height-base
   .viewcode-back
     display: block
     float: right
@@ -477,18 +472,21 @@
         margin-right: 4px
   .guilabel
     border: 1px solid lighten($guilabel-color, 25%)
-    background: lighten($guilabel-color, 50%)
+    background: lighten($guilabel-color, 45%)
     font-size: 80%
     font-weight: 700
-    border-radius: $base-line-height / 6
-    padding: ($base-line-height / 10) ($base-line-height / 4)
-    margin: auto ($base-line-height / 12)
+    border-radius: $line-height-base / 6
+    padding: $line-height-base / 10 $line-height-base / 4
+    margin: auto $line-height-base / 12
+  kbd, .kbd
+    color: inherit
+    background: $gray-300
   .versionmodified
     font-style: italic
 
 
 // Mobile specific
-+media($mobile)
+@include media-breakpoint-down(sm)
   .rst-content
     .sidebar
       width: 100%

src/sass/_theme_variables.sass

@@ -1,69 +1,67 @@
 // In here are varibles used for sphinx_rtd_theme, they either add to or overwrite the default ones
-// that are set in wyrm_core/wy_variables.sass. You'll find wyrm in bower_components if you're looking
-// for a reference.
-
+// -------------------------Paths-------------------------
 $fa-font-path:                        "~font-awesome/fonts"
-$static-img:                          "../img/"
 
+// -------------------------Layout-------------------------
+$gutter:                              1.618em // the golden ratio
+
+$nav-desktop-position:                left
+$nav-desktop-width:                   300px
 $nav-content-width:                   800px
-$nav-media-query:                     $nav-desktop-width + $nav-content-width
+$nav-media-query:                     (($nav-desktop-width) + ($nav-content-width))
 
-$mathjax-color:                       $text-color
+// -------------------------Typography-------------------------
+$font-family-base:                    "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif
+$font-family-headings:                "Roboto Slab", ff-tisa-web-pro, Georgia, Arial, sans-serif
+$font-family-code:                    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace
+$font-display:                        block
+$font-size-base:                      16px
+$line-height-base:                    24px
 
+// -------------------------Colors-------------------------
+// Text
+$text-color:                          hsl(0,0%,25%) !default
+$text-dark:                           lighten($text-color,15%) !default
+$text-medium:                         lighten($text-color,25%) !default
+$text-light:                          lighten($text-color,45%) !default
+$text-lighter:                        lighten($text-color,60%) !default
+
+// Content
+$section-background-color:            $gray-200
+$content-background-color:            $white
+$footer-color:                        $text-medium
+
+// Links
+$link-color:                          $blue
+$link-color-visited:                  $purple
 $headerlink-color:                    $text-color
 
+// Math
+$mathjax-color:                       $text-color
+
 // Code colors
 $text-viewcode-color:                 $green
 $text-codexref-color:                 $text-color
 
 // Definition list colors
 $class-color:                         $blue
-$method-color:                        $gray
+$method-color:                        $gray-500
 
 // GUI label color
 $guilabel-color:                      $blue
 
-// Footer colors
-$footer-color:                        $text-medium
-
-// Menu colors
-$menu-vertical-background-color:      $section-background-color
-
-// Menu text colors
-$menu-color:                          $gray
-$menu-dark:                           lighten($menu-color,10%) !default
-$menu-medium:                         lighten($menu-color,27.5%) !default
-$menu-light:                          lighten($menu-color,45%) !default
-$menu-lighter:                        lighten($menu-color,60%) !default
-
 // Menu link colors
 $menu-link-color:                     $text-color
-$menu-link-dark:                      $text-dark
 $menu-link-medium:                    $text-medium
 $menu-link-light:                     $text-lighter
 $menu-link-active:                    $white
 
 // Navigation colors
-$nav-background-color:                $menu-background-color
-$nav-search-background-color:         $blue
+$nav-background-color:                #343131
+$nav-search-background-color:         #2980B9
 $nav-search-color:                    $section-background-color
-$nav-link-color:                      $blue
-$nav-link-color-visited:              $purple
-$nav-link-color-hover:                lighten($nav-link-color, 6%) !default
-$nav-link-color-alt:                  hsl(33, 100%, 51%)
-$nav-caption:                         lighten($blue, 15%)
-
-// Sidebar colors
-$sidebar-background-color:            $table-stripe-color
-$sidebar-border-color:                $table-border-color
-$sidebar-title-background-color:      $table-border-color
+$nav-menu-background-color:           $section-background-color
+$nav-caption:                         $nav-search-background-color
 
 // Sphinx highlight color
 $highlight-color:                     $yellow
-
-$base-font-family:                    "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif
-$custom-font-family:                  "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif
-$custom-font-family2:                 Georgia, serif
-$code-font-family:                    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace
-
-$font-display:                        block

src/sass/badge_only.sass

@@ -4,13 +4,10 @@
 // This generates the RTD sticky badge for non RTD themes. As
 // always, only files labeled "theme_*.sass should be edited".
 // ------------------------------------------------------------
-$border-box-sizing: false !default
 
-@import wyrm_core/wy_variables
+@import "node_modules/bootstrap/scss/functions"
+@import "node_modules/bootstrap/scss/variables"
+@import "node_modules/bootstrap/scss/mixins"
 @import theme_variables
-@import ~bourbon/app/assets/stylesheets/bourbon
-@import ~bourbon-neat/app/assets/stylesheets/neat
-@import wyrm_core/mixin
-@import wyrm_core/grid_settings
-@import _theme_badge_fa
-@import _theme_badge
+@import theme_badge_fa
+@import theme_badge

src/sass/theme.sass

@@ -6,39 +6,14 @@
 // "theme_*.sass". All other files are loaded through bower.
 // ------------------------------------------------------------
 
-// Variable defaults set by Wyrm
-@import wyrm_core/wy_variables
+@import ~bootstrap/scss/bootstrap
 
 // Variable overrides that change coloring and fonts for this theme.
 @import theme_variables
 
-// bourbon.io framework
-@import ~bourbon/app/assets/stylesheets/bourbon
-
-// Bourbon.io/neat framework, with some default media queries
-@import wyrm_core/grid_settings
-@import ~bourbon-neat/app/assets/stylesheets/neat
-// Some corrections for neat
-@import wyrm_core/neat_extra
-
-// Custom reset
-@import wyrm_core/reset
-
-// Wyrm mixins
-@import wyrm_core/mixin
-
-// Font Awesome with wyrm extras
+// Font Awesome
 @import ~font-awesome/scss/font-awesome
-@import wyrm_core/font_icon_defaults
 
-// Wyrm core styles used in this theme
-@import wyrm_core/alert
-@import wyrm_core/button
-@import wyrm_core/dropdown
-@import wyrm_core/form
-@import wyrm_core/generic
-@import wyrm_core/table
-@import wyrm_core/type
 
 // Theme specific styles. These are likely the files you want to edit.
 @import theme_breadcrumbs

src/theme.js

@@ -80,15 +80,15 @@ function ThemeNav () {
         $(document)
             // Shift nav in mobile when clicking the menu.
             .on('click', "[data-toggle='wy-nav-top']", function() {
-                $("[data-toggle='wy-nav-shift']").toggleClass("shift");
+                $("[data-toggle='sidebar-collapse']").toggleClass("shift");
                 $("[data-toggle='rst-versions']").toggleClass("shift");
             })
 
             // Nav menu link click operations
-            .on('click', ".wy-menu-vertical .current ul li a", function() {
+            .on('click', ".sidebar-navigation .current ul li a", function() {
                 var target = $(this);
                 // Close menu when you click a link.
-                $("[data-toggle='wy-nav-shift']").removeClass("shift");
+                $("[data-toggle='sidebar-collapse']").removeClass("shift");
                 $("[data-toggle='rst-versions']").toggleClass("shift");
                 // Handle dynamic display of l3 and l4 nav lists
                 self.toggleCurrent(target);
@@ -100,17 +100,17 @@ function ThemeNav () {
 
         // Make tables responsive
         $("table.docutils:not(.field-list,.footnote,.citation)")
-            .wrap("<div class='wy-table-responsive'></div>");
+            .wrap("<div class='table-responsive'></div>");
 
         // Add extra class to responsive tables that contain
         // footnotes or citations so that we can target them for styling
         $("table.docutils.footnote")
-            .wrap("<div class='wy-table-responsive footnote'></div>");
+            .wrap("<div class='table-responsive footnote'></div>");
         $("table.docutils.citation")
-            .wrap("<div class='wy-table-responsive citation'></div>");
+            .wrap("<div class='table-responsive citation'></div>");
 
         // Add expand links to all parents of nested ul
-        $('.wy-menu-vertical ul').not('.simple').siblings('a').each(function () {
+        $('.sidebar-navigation ul').not('.simple').siblings('a').each(function () {
             var link = $(this);
                 expand = $('<span class="toctree-expand"></span>');
             expand.on('click', function (ev) {
@@ -127,7 +127,7 @@ function ThemeNav () {
         var anchor = encodeURI(window.location.hash) || '#';
 
         try {
-            var vmenu = $('.wy-menu-vertical');
+            var vmenu = $('.sidebar-navigation');
             var link = vmenu.find('[href="' + anchor + '"]');
             if (link.length === 0) {
                 // this link was not found in the sidebar.
@@ -144,7 +144,7 @@ function ThemeNav () {
             // If we found a matching link then reset current and re-apply
             // otherwise retain the existing match
             if (link.length > 0) {
-                $('.wy-menu-vertical .current').removeClass('current');
+                $('.sidebar-navigation .current').removeClass('current');
                 link.addClass('current');
                 link.closest('li.toctree-l1').parent().addClass('current');
                 for (let i = 1; i <= 10; i++) {

webpack.common.js

@@ -37,10 +37,10 @@ module.exports = {
             loader: "sass-loader?indentedSyntax",
             options: {
               includePaths: [
+                "node_modules/bootstrap/scss",
                 "node_modules/bourbon/app/assets/stylesheets",
                 "node_modules/bourbon-neat/app/assets/stylesheets",
-                "node_modules/font-awesome/scss",
-                "node_modules/wyrm/sass"
+                "node_modules/font-awesome/scss"
               ]
             }
           }
@@ -66,11 +66,5 @@ module.exports = {
       filename: "css/[name].css?[hash]",
       chunkFilename: "css/[name].css?[hash]"
     }),
-    new CopyPlugin([
-      {
-        from: 'node_modules/html5shiv/dist/*.min.js',
-        flatten: true,
-        to: path.resolve(__dirname,'sphinx_rtd_theme/static/js') },
-    ]),
   ]
 };