Migrate to bootstrap

bin/preinstall.js

@@ -1,20 +1,3 @@
 #!/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/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

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "bootstrap": "^4.6.0",
+    "popper.js": "^1.16.1",
     "bourbon": "~4.3",
     "bourbon-neat": "~1.9",
     "copy-webpack-plugin": "^5.1.1",
@@ -30,7 +32,6 @@
     "webpack-dev-server": "^3.3.1",
     "webpack-merge": "^4.2.1",
     "webpack-shell-plugin": "^0.5.0",
-    "webpack-watch-files-plugin": "^1.0.3",
-    "wyrm": "^1.0.9"
+    "webpack-watch-files-plugin": "^1.0.3"
   }
 }

sphinx_rtd_theme/breadcrumbs.html

@@ -28,16 +28,16 @@
 
 <div role="navigation" aria-label="breadcrumbs navigation">
 
-  <ul class="wy-breadcrumbs">
+  <ol class="breadcrumb">
     {% block breadcrumbs %}
-      <li><a href="{{ pathto(master_doc) }}" class="icon icon-home"></a> &raquo;</li>
+      <li class="breadcrumb-item"><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>
     {% 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 %}
@@ -68,15 +68,15 @@
         {% 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="breadcrumb navigation">
       {% 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 navigation">
       {%- 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/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

@@ -5,15 +5,15 @@
   width: $nav-desktop-width
   color: $section-background-color
   background: darken($menu-background-color, 8%)
-  font-family: $base-font-family
-  z-index: $z-index-tray
+  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
+    padding: $line-height-base / 2
     background-color: darken($menu-background-color, 5%)
     display: block
     text-align: right
@@ -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
@@ -56,7 +56,7 @@
       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)
+@include media-breakpoint-down(md)
   .rst-versions
     width: 85%
     display: none

src/sass/_theme_badge_fa.sass

@@ -9,7 +9,6 @@
   font-weight: normal
   line-height: 1
   text-decoration: inherit
-  +font-smooth
 
 a .fa
   display: inline-block

src/sass/_theme_breadcrumbs.sass

@@ -1,34 +1,11 @@
-.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
-
-
-+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