Update .gitignore

fontsource is the new defacto source for google fonts.
Originally, this was `typeface-*` however that is now deprecated.
Not sure why but there does not seem to be woff2 formats for the `all` character sets.
But the new fonts are already smaller than the old woff2 as we now only include the needed font weight.

.gitignore

@@ -17,8 +17,6 @@ local/
 node_modules
 npm-debug.log
 pip-selfcheck.json
-sphinx_rtd_theme/static/fonts/Lato/
-sphinx_rtd_theme/static/fonts/RobotoSlab/
 .python-version
 .node-version
 sphinx_rtd_theme/static/js/html5shiv.min.js

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'

package.json

@@ -1,7 +1,7 @@
 {
   "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",
@@ -21,26 +21,26 @@
   "devDependencies": {
     "bourbon": "~4.3",
     "bourbon-neat": "~1.9",
-    "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "^3.6.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.1.0",
     "file-loader": "^3.0.1",
+    "@fontsource/lato": "^4.2.2",
+    "@fontsource/roboto-slab": "^4.2.2",
     "font-awesome": "^4.7.0",
     "html5shiv": "^3.7.3",
     "imports-loader": "^0.8.0",
-    "jquery": "^3.6.0",
-    "lato-font": "^3.0.0",
+    "jquery": "^3.4.1",
     "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "roboto-fontface": "^0.10.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "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",
+    "webpack-watch-files-plugin": "^1.0.3",
     "wyrm": "^1.0.9"
   }
 }

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 %}
@@ -35,24 +43,24 @@
               <!-- 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 %}

sphinx_rtd_theme/layout.html

@@ -174,7 +174,7 @@
     <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') }}" {% if theme_style_nav_header_background %} style="background: {{theme_style_nav_header_background}}" {% endif %}>
+      <nav class="wy-nav-top" aria-label="{{ _('Top') }}">
         {%- block mobile_nav %}
           <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
           <a href="{{ pathto(master_doc) }}">{{ project }}</a>

sphinx_rtd_theme/searchbox.html

@@ -1,22 +1,9 @@
-{#
-    basic/searchbox.html
-    ~~~~~~~~~~~~~~~~~~~~
-
-    Sphinx sidebar template: quick search box.
-
-    :copyright: Copyright 2007-2020 by the Sphinx team, see AUTHORS.
-    :license: BSD, see https://github.com/sphinx-doc/sphinx/blob/master/LICENSE for details.
-
-    .. note::
-
-       This file is the same, except the "Go" button was removed and the label is an aria-label.
-#}
-{%- if pagename != "search" and builder != "singlehtml" %}
-<div id="searchbox" role="search">
-  <div class="searchformwrapper">
-    <form class="search" action="{{ pathto('search') }}" method="get">
-      <input aria-label="{{ _('Search docs') }}" type="text" name="q" id="main-search" placeholder="{{ _('Search docs') }}"/>
-    </form>
-  </div>
+{%- 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') }}" />
+    <input type="hidden" name="check_keywords" value="yes" />
+    <input type="hidden" name="area" value="default" />
+  </form>
 </div>
 {%- endif %}

src/sass/_theme_badge_fa.sass

@@ -30,7 +30,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_font_local.sass

@@ -1,31 +1,31 @@
-$lato-font-path: "~lato-font/fonts"
-$roboto-font-path: "~roboto-fontface/fonts/roboto-slab"
+$lato-font-path: "~@fontsource/lato/files"
+$roboto-font-path: "~@fontsource/roboto-slab/files"
 
 @font-face
   font-family: 'Lato'
-  src: url('#{$lato-font-path}/lato-normal/lato-normal.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal/lato-normal.woff') format('woff')
+  src: url('#{$lato-font-path}/lato-all-400-normal.woff') format('woff')
   font-weight: 400
   font-style: normal
   font-display: $font-display
 
 @font-face
   font-family: 'Lato'
-  src: url('#{$lato-font-path}/lato-bold/lato-bold.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold/lato-bold.woff') format('woff')
+  src: url('#{$lato-font-path}/lato-all-700-normal.woff') format('woff')
   font-weight: 700
   font-style: normal
   font-display: $font-display
 
 @font-face
   font-family: 'Lato'
-  src: url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff') format('woff')
-  font-weight: 700
+  src: url('#{$lato-font-path}/lato-all-400-italic.woff') format('woff')
+  font-weight: 400
   font-style: italic
   font-display: $font-display
 
 @font-face
   font-family: 'Lato'
-  src: url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff') format('woff')
-  font-weight: 400
+  src: url('#{$lato-font-path}/lato-all-700-italic.woff') format('woff')
+  font-weight: 700
   font-style: italic
   font-display: $font-display
 
@@ -33,12 +33,12 @@ $roboto-font-path: "~roboto-fontface/fonts/roboto-slab"
   font-family: 'Roboto Slab'
   font-style: normal
   font-weight: 400
-  src: url('#{$roboto-font-path}/Roboto-Slab-Regular.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Regular.woff') format('woff')
+  src: url('#{$roboto-font-path}/roboto-slab-all-400-normal.woff') format('woff')
   font-display: $font-display
 
 @font-face
   font-family: 'Roboto Slab'
   font-style: normal
   font-weight: 700
-  src: url('#{$roboto-font-path}/Roboto-Slab-Bold.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Bold.woff') format('woff')
+  src: url('#{$roboto-font-path}/roboto-slab-all-700-normal.woff') format('woff')
   font-display: $font-display

src/sass/_theme_layout.sass

@@ -15,7 +15,7 @@ html
   ul, li
     display: inline-block
   li:hover
-    background: rgba(255, 255, 255, 0.1)
+    background: rgba(255,255,255,.1)
   li
     &.divide-left
       border-left: solid 1px hsl(0, 0%, 25%)
@@ -35,7 +35,7 @@ html
     height: $base-font-size * 2
     line-height: $base-font-size * 2
     padding: 0 $gutter
-    margin: ($base-line-height / 2) 0 0 0
+    margin: $base-line-height / 2 0 0 0
     display: block
     font-weight: bold
     text-transform: uppercase
@@ -54,7 +54,7 @@ html
       a
         color: $menu-link-medium
         border-right: solid 1px darken($menu-vertical-background-color, 20%)
-        padding: ($gutter / 4) ($gutter * 1.5)
+        padding: $gutter / 4 $gutter * 1.5
         &:hover
           background: darken($menu-vertical-background-color, 15%)
     code
@@ -76,7 +76,7 @@ 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
@@ -107,7 +107,7 @@ html
       display: block
 
   %shrink_toctree_element
-    font-size: 0.9em
+    font-size: .9em
 
   %toctree_link_color
     color: $menu-link-color
@@ -128,11 +128,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
@@ -168,7 +168,7 @@ html
     font-weight: normal
   a
     line-height: 18px
-    padding: ($gutter / 4) $gutter
+    padding: $gutter / 4 $gutter
     display: block
     position: relative
     font-size: 90%
@@ -201,7 +201,7 @@ 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
@@ -212,11 +212,11 @@ html
     font-size: 100%
     font-weight: bold
     display: inline-block
-    padding: ($base-line-height / 6) ($base-line-height / 4)
+    padding: $base-line-height / 6 $base-line-height / 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,15 +224,15 @@ 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)
+    color: rgba(255,255,255,.3)
 
 .wy-nav .wy-menu-vertical
   header
@@ -244,7 +244,7 @@ html
       color: $white
 
 [data-menu-wrap]
-  +transition(all 0.2s ease-in)
+  +transition(all .2s ease-in)
   position: absolute
   opacity: 1
   width: 100%
@@ -295,7 +295,7 @@ 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
@@ -324,7 +324,7 @@ html
   min-height: 100%
 
 .wy-nav-content
-  padding: $gutter ($gutter * 2)
+  padding: $gutter $gutter * 2
   height: 100%
   max-width: $nav-content-width
   margin: auto
@@ -333,7 +333,7 @@ html
   position: fixed
   width: 100%
   height: 100%
-  background: rgba(0, 0, 0, 0.2)
+  background: rgba(0,0,0,.2)
   display: none
   z-index: $z-index-modal - 1
   &.on
@@ -411,7 +411,7 @@ footer
 
 @media screen and (min-width: $nav-media-query)
   .wy-nav-content-wrap
-    background: rgba(0, 0, 0, 0.05)
+    background: rgba(0,0,0,.05)
   .wy-nav-content
     margin: 0
     background: $section-background-color

src/sass/_theme_rst.sass

@@ -56,7 +56,7 @@
   pre.literal-block
     white-space: pre
     margin: 0
-    padding: ($base-line-height / 2) ($base-line-height / 2)
+    padding: $base-line-height / 2 $base-line-height / 2
     font-family: $code-font-family
     display: block
     overflow: auto
@@ -75,21 +75,21 @@
   .linenodiv pre
     border-right: solid 1px lighten($table-border-color, 2%)
     margin: 0
-    padding: ($base-line-height / 2) ($base-line-height / 2)
+    padding: $base-line-height / 2 $base-line-height / 2
     font-family: $code-font-family
     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: $base-line-height / 2 $base-line-height / 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 * $base-line-height / 2
+      padding: 0 $base-line-height / 2
   pre.literal-block, div[class^='highlight'] pre, .linenodiv pre
     font-family: $code-font-family
     font-size: 12px
@@ -135,10 +135,10 @@
     @extend .wy-alert.wy-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
   .section ol.loweralpha, .section ol.loweralpha > li
@@ -234,14 +234,14 @@
       font-family: $custom-font-family
       font-weight: bold
       background: $table-border-color
-      padding: ($base-line-height / 4) ($base-line-height / 2)
+      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 $base-line-height / 12 $highlight-color
     display: inline
     font-weight: bold
 
@@ -289,14 +289,14 @@
       > dt, > dd
         margin-bottom: 0rem
     dl.footnote
-      font-size: 0.9rem
+      font-size: .9rem
       > dt
-        margin: 0rem 0.5rem 0.5rem 0rem
+        margin: 0rem .5rem .5rem 0rem
         line-height: 1.2rem
         word-break: break-all
         font-weight: normal
         > span.brackets
-          margin-right: 0.5rem
+          margin-right: .5rem
           &:before
             content: "["
           &:after
@@ -304,13 +304,13 @@
         > span.fn-backref
           font-style: italic
       > dd
-        margin: 0rem 0rem 0.5rem 0rem
+        margin: 0rem 0rem .5rem 0rem
         line-height: 1.2rem
         p
-          font-size: 0.9rem
+          font-size: .9rem
     dl.option-list
       kbd
-        font-size: 0.9rem
+        font-size: .9rem
   // Both
   html.writer-html4 & table.docutils.citation, table.docutils.footnote,
   html.writer-html5 & dl.footnote
@@ -340,7 +340,7 @@
       th > p, td > p
         line-height: 1rem
         margin-bottom: 0rem
-        font-size: 0.9rem
+        font-size: .9rem
     &:not(.field-list)
       @extend .wy-table-striped
     // Remove bottom margin for the last element (and it's last child)
@@ -395,14 +395,14 @@
       margin-bottom: $base-line-height / 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
+      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
     > dt
       display: table
-      margin: ($base-line-height / 4) 0
+      margin: $base-line-height / 4 0
       font-size: 90%
       line-height: normal
       background: lighten($class-color, 50%)
@@ -420,8 +420,8 @@
     dl:not(.field-list) > dt
       margin-bottom: $base-line-height / 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
@@ -481,8 +481,8 @@
     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)
+    padding: $base-line-height / 10 $base-line-height / 4
+    margin: auto $base-line-height / 12
   .versionmodified
     font-style: italic
 

src/sass/_theme_variables.sass

@@ -6,7 +6,7 @@ $fa-font-path:                        "~font-awesome/fonts"
 $static-img:                          "../img/"
 
 $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