Merge branch 'master' into Blendify/sidebar-tweaks

* Cleanup: Sass formatting

This patch addresses some sass formatting to make the code easier to read:

- Use leading zeros on decimals less than 1
- Use parentheses around math for css propeties with multiply arguments
- Spaces after commas in arguments

In the future it would be nice to automatically format this with a tool like style lint.

* Revert Extra Tabbing

* Add back missing line

* Add whitespace back

* Fix whitespace 2

docs/changelog.rst

@@ -5,6 +5,50 @@ 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,12 +10,14 @@ 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 = '0.5.1'
-release = '0.5.1'
+version = theme_version
+release = theme_version_full
 author = u'Dave Snider, Read the Docs, Inc. & contributors'
 copyright = author
 language = 'en'
@@ -41,7 +43,7 @@ pygments_style = 'default'
 
 intersphinx_mapping = {
     'rtd': ('https://docs.readthedocs.io/en/stable/', None),
-    'sphinx': ('https://www.sphinx-doc.org/en/stable/', None),
+    'sphinx': ('https://www.sphinx-doc.org/en/master/', None),
 }
 
 html_theme = 'sphinx_rtd_theme'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sphinx_rtd_theme",
   "main": "js/theme.js",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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.1",
-    "css-loader": "^3.1.0",
+    "copy-webpack-plugin": "^5.1.2",
+    "css-loader": "^3.6.0",
     "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
     "html5shiv": "^3.7.3",
     "imports-loader": "^0.8.0",
-    "jquery": "^3.4.1",
+    "jquery": "^3.6.0",
     "lato-font": "^3.0.0",
     "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "roboto-fontface": "^0.10.0",
     "sass-loader": "^7.3.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.1",
-    "webpack-dev-server": "^3.3.1",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^4.2.1",
     "webpack-shell-plugin": "^0.5.0",
-    "webpack-watch-files-plugin": "^1.0.3",
+    "webpack-watch-files-plugin": "^1.1.0",
     "wyrm": "^1.0.9"
   }
 }

setup.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.5.1
+current_version = 0.5.2
 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.1',
+    version='0.5.2',
     url='https://github.com/readthedocs/sphinx_rtd_theme',
     license='MIT',
     author='Dave Snider, Read the Docs, Inc. & contributors',
@@ -117,7 +117,8 @@ setup(
         ]
     },
     install_requires=[
-        'sphinx>=1.6'
+        'sphinx>=1.6',
+        'docutils<0.17', # https://github.com/sphinx-doc/sphinx/issues/9001
     ],
     tests_require=[
         'pytest',

sphinx_rtd_theme/__init__.py

@@ -5,13 +5,14 @@ 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
+from sphinx import version_info as sphinx_version
 from sphinx.locale import _
 from sphinx.util.logging import getLogger
 
 
-__version__ = '0.5.1'
+__version__ = '0.5.2'
 __version_full__ = __version__
 
 logger = getLogger(__name__)
@@ -33,8 +34,11 @@ 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 version_info <= (2, 0, 0):
+    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 not app.config.html_experimental_html5_writer:
             logger.warning("'html4_writer' is deprecated with sphinx_rtd_theme")
     else:
@@ -44,7 +48,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 version_info >= (1, 8, 0):
+    if sphinx_version >= (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,11 +1,3 @@
-{#- 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 %}
@@ -43,24 +35,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 }}{{ 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 }}{{ page_source_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 }}{{ 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 }}{{ page_source_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 }}{{ 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 }}{{ page_source_suffix }}" class="fa fa-gitlab"> {{ _('Edit on GitLab') }}</a>
             {%- endif %}
           {%- elif show_source and source_url_prefix %}
-            <a href="{{ source_url_prefix }}{{ pagename }}{{ suffix }}">{{ _('View page source') }}</a>
+            <a href="{{ source_url_prefix }}{{ pagename }}{{ page_source_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 %}

src/sass/_theme_badge_fa.sass

@@ -30,7 +30,7 @@ ul.fas
   text-indent: -0.8em
   li
     .fa
-      width: .8em
+      width: 0.8em
     .fa-large:before,
     .fa-large:before
       /* 1.5 increased font size for fa-large * 1.25 width

src/sass/_theme_layout.sass

@@ -15,7 +15,7 @@ html
   ul, li
     display: inline-block
   li:hover
-    background: rgba(255,255,255,.1)
+    background: rgba(255, 255, 255, 0.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
@@ -45,18 +45,13 @@ html
   ul
     margin-bottom: 0
   li
-    &.divide-top
-      border-top: solid 1px hsl(0, 0%, 25%)
-    &.divide-bottom
-      border-bottom: solid 1px hsl(0, 0%, 25%)
     &.current
       background: darken($menu-vertical-background-color, 10%)
       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%)
+          background: $menu-vertical-background-color
     code
       border: none
       background: inherit
@@ -67,20 +62,18 @@ html
     span.toctree-expand
       display: block
       float: left
-      margin-left: -1.2em
+      margin-left: -1em
       @extend .fa
-      @extend .fa-plus-square-o
+      @extend .fa-angle-right
       line-height: 18px
-      color: darken($menu-link-medium, 20%)
 
   // On state for the first level
-  li.on a, li.current > 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
-    border: none
     padding-left: $gutter -4px
     +font-smooth
     &:hover
@@ -89,14 +82,9 @@ html
         color: $menu-link-medium
     span.toctree-expand
       @extend .fa
-      @extend .fa-minus-square-o
+      @extend .fa-angle-down
       display: block
       line-height: 18px
-      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%)
 
   // This is the on state for pages beyond second level
 
@@ -107,7 +95,7 @@ html
       display: block
 
   %shrink_toctree_element
-    font-size: .9em
+    font-size: 0.9em
 
   %toctree_link_color
     color: $menu-link-color
@@ -126,13 +114,14 @@ html
       li.toctree-l#{$toc_level}
         a
           @extend %toctree_link_color
+          background: darken($menu-vertical-background-color, 6% * $toc_level)
         &.current
           > a
-            padding: $gutter / 4 $gutter * ($toc_level - 1 + .5)
+            padding: ($gutter / 4) ($gutter * ($toc_level - 1 + 0.5))
 
-          li.toctree-l#{$toc_level + 1}  > a
+          li.toctree-l#{$toc_level + 1} > a
             @extend %display_current_toctree_element
-            padding: $gutter / 4 $gutter * ($toc_level + .5)
+            padding: ($gutter / 4) ($gutter * ($toc_level + 0.5))
             padding-right: $gutter
         a:hover span.toctree-expand
           @extend %toctree_hover_link_color
@@ -140,23 +129,6 @@ html
       li.toctree-l#{$toc_level}
         @extend %shrink_toctree_element
 
-  li.toctree-l2
-    &.current
-      > a
-        background: darken($menu-vertical-background-color, 20%)
-      li.toctree-l3 > a
-        background: darken($menu-vertical-background-color, 20%)
-    span.toctree-expand
-      color: darken($menu-vertical-background-color, 35%)
-  li.toctree-l3
-    &.current
-      > a
-        background: darken($menu-vertical-background-color, 25%)
-      li.toctree-l4 > a
-        background: darken($menu-vertical-background-color, 25%)
-    span.toctree-expand
-      color: darken($menu-vertical-background-color, 40%)
-
   li.current ul
     display: block
   li ul
@@ -168,7 +140,7 @@ html
     font-weight: normal
   a
     line-height: 18px
-    padding: $gutter / 4 $gutter
+    padding: ($gutter / 4) $gutter
     display: block
     position: relative
     font-size: 90%
@@ -176,8 +148,6 @@ html
     &:hover
       background-color: lighten($menu-background-color, 10%)
       cursor: pointer
-      span.toctree-expand
-        color: $menu-link-light
     &:active
       background-color: $menu-logo-color
       cursor: pointer
@@ -196,12 +166,12 @@ html
   color: $nav-search-color
   input[type=text]
     width: 100%
+    border: none
     border-radius: 50px
     padding: 6px 12px
-    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 +182,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,.1)
+      background: rgba(255, 255, 255, 0.1)
     img.logo
       display: block  // display on its own line all the time
       margin: 0 auto
@@ -224,15 +194,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,.3)
+    color: rgba(255, 255, 255, 0.3)
 
 .wy-nav .wy-menu-vertical
   header
@@ -244,7 +214,7 @@ html
       color: $white
 
 [data-menu-wrap]
-  +transition(all .2s ease-in)
+  +transition(all 0.2s ease-in)
   position: absolute
   opacity: 1
   width: 100%
@@ -295,7 +265,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 +294,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 +303,7 @@ html
   position: fixed
   width: 100%
   height: 100%
-  background: rgba(0,0,0,.2)
+  background: rgba(0, 0, 0, 0.2)
   display: none
   z-index: $z-index-modal - 1
   &.on
@@ -411,7 +381,7 @@ footer
 
 @media screen and (min-width: $nav-media-query)
   .wy-nav-content-wrap
-    background: rgba(0,0,0,.05)
+    background: rgba(0, 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,.1)
+    border-color: rgba(0, 0, 0, 0.1)
     td, th
       background: transparent !important
-      border-color: rgba(0,0,0,.1) !important
+      border-color: rgba(0, 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: .9rem
+      font-size: 0.9rem
       > dt
-        margin: 0rem .5rem .5rem 0rem
+        margin: 0rem 0.5rem 0.5rem 0rem
         line-height: 1.2rem
         word-break: break-all
         font-weight: normal
         > span.brackets
-          margin-right: .5rem
+          margin-right: 0.5rem
           &:before
             content: "["
           &:after
@@ -304,13 +304,13 @@
         > span.fn-backref
           font-style: italic
       > dd
-        margin: 0rem 0rem .5rem 0rem
+        margin: 0rem 0rem 0.5rem 0rem
         line-height: 1.2rem
         p
-          font-size: .9rem
+          font-size: 0.9rem
     dl.option-list
       kbd
-        font-size: .9rem
+        font-size: 0.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: .9rem
+        font-size: 0.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