More PyTorch theme fixes

docs/source/_static/css/custom.css

@@ -11,6 +11,12 @@ body {
   margin: unset;
 }
 
+.pytorch-left-menu a:link,
+.pytorch-left-menu a:visited,
+ul.pytorch-breadcrumbs li {
+  font-size: inherit; /* larger */
+}
+
 article.pytorch-article pre {
   margin-bottom: 1rem;
 }
@@ -19,6 +25,67 @@ article.pytorch-article pre {
   top: -1px;
 }
 
+a:link,
+a:visited,
+p a:link,
+p a:visited,
+.pytorch-left-menu li.toctree-l1.current > a,
+.pytorch-left-menu li.toctree-l1.current > a:before,
+ul.pytorch-breadcrumbs a {
+  color: var(--color-primary);
+}
+
+article.pytorch-article .note .admonition-title {
+  background-color: var(--color-secondary);
+}
+
+.rst-footer-buttons {
+  /* the "next" button is floated and doesn't take up any height by itself */
+  min-height: 2em;
+}
+
+/* fixes for code line numbers */
+
+article.pytorch-article div[class*="highlight-"] {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+article.pytorch-article table.highlighttable {
+  table-layout: auto;
+  margin-bottom: 0;
+}
+
+table.highlighttable td.linenos {
+  padding-right: 0;
+}
+
+table.highlighttable td.linenos pre {
+  background-color: inherit;
+  outline: 3px solid #f3f4f7;
+  outline-offset: -3px;
+}
+
+table.highlighttable td.code {
+  padding-left: 0;
+  width: 100%;
+}
+
+table.highlighttable td.code pre {
+  white-space: pre;
+}
+
+/* tweaks copied from sphinx-rtd-theme */
+
+.rst-content .section > img,
+.rst-content .section > a > img {
+  margin-bottom: 24px;
+}
+
+.rst-content .align-center {
+  margin: auto;
+}
+
 article.pytorch-article .reference.download.internal {
   display: unset;
 }
@@ -37,29 +104,66 @@ article.pytorch-article .reference.download.internal {
 
 .nav__main__logo {
   width: 300px;
-  padding-left: 30px;
+  margin-left: 30px;
+  margin-right: 20px;
 }
 
 #nav__main__items {
   text-align: right;
   width: 100%;
-  max-width: 800px;
+  max-width: 900px;
+}
+
+.nav__main a {
+  color: inherit;
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 850px) {
+  .nav__main__logo {
+    margin: 0;
+    padding-left: 30px;
+  }
+}
+
+@media screen and (max-width: 1099px) {
+  .nav__main {
+    height: unset;
+  }
+}
+
+.footer-wrapper {
+  background: var(--bg-dark-secondary);
 }
 
 .footer {
+  max-width: 880px; /* match body content (850px) + left margin (30px) */
   font-size: 15px;
-  padding: 70px 120px 10px;
+  padding-top: 70px;
+  padding-bottom: 10px;
 }
 
 .footer a {
   line-height: 30px;
+  color: inherit;
 }
 
 .footer .nav__item--brand {
   margin-bottom: 0;
   line-height: 30px;
 }
 
+@media only screen and (min-device-width: 320px) and (max-device-width: 850px) {
+  .footer {
+    font-size: 12px;
+    padding-top: 30px;
+  }
+
+  .footer__icons {
+    padding-top: 10px;
+    font-size: 15px;
+  }
+}
+
 /* tabs */
 
 .tab.sphinx-tab > :last-child {
@@ -74,6 +178,16 @@ article.pytorch-article .reference.download.internal {
   background-color: rgb(252, 252, 252);
 }
 
+/* left side section links */
+
+.pytorch-left-menu li.toctree-l1 ul {
+  margin-left: 1rem;
+}
+
+.pytorch-left-menu li.toctree-l2.current > a {
+  color: var(--color-primary);
+}
+
 /* right side section link highlighting */
 
 .pytorch-content-right .pytorch-side-scroll li.current-section {

docs/source/_static/css/voxel51-website.css

@@ -270,26 +270,6 @@
   }
 } /* end of media query for mobile responsive nav */
 
-/* BodyPart
- * This is a div in the body section
- */
-.body_part {
-  min-width: 100%;
-  padding: var(--padding-y) var(--padding-x); /* -x padding has to be here to have the background extend to viewport edges; */
-}
-
-@media screen and (min-width: 1240px) {
-  .body_part {
-    padding: var(--padding-y) calc((100vw - 1040px) / 2);
-  }
-}
-
-@media only screen and (min-device-width: 320px) and (max-device-width: 850px) {
-  .body_part {
-    padding: 6rem 3rem;
-  }
-}
-
 /* FOOTER */
 /* Footer uses grid to keep everything aligned. */
 .footer {

docs/source/_static/js/custom.js

@@ -8,21 +8,26 @@ $(function () {
     parseInt($(".section h2").css("marginTop")) +
     10;
 
-  function updateSidebar() {
+  function updateSidebar(e) {
     let currentSection = undefined;
-    for (let i = sections.length - 1; i >= 0; i--) {
-      if (
-        $(sections[i]).offset().top <
-        $(window).scrollTop() + sectionStartThreshold
-      ) {
-        currentSection = sections[i].id;
-        break;
+    if (e.target && e.target.href && e.target.href.indexOf("#") >= 0) {
+      currentSection = e.target.href.split("#").pop();
+    } else {
+      for (let i = sections.length - 1; i >= 0; i--) {
+        if (
+          $(sections[i]).offset().top <
+          $(window).scrollTop() + sectionStartThreshold
+        ) {
+          currentSection = sections[i].id;
+          break;
+        }
       }
     }
 
+    let sectionLinks = $(".pytorch-content-right .pytorch-side-scroll li");
+    sectionLinks.removeClass("current-section");
     if (currentSection) {
-      $(".pytorch-content-right .pytorch-side-scroll li")
-        .removeClass("current-section")
+      sectionLinks
         .filter(":not(:has(a.title-link))")
         .filter(':has(a[href="#' + currentSection + '"])')
         .filter(":visible")

docs/source/_templates/layout.html

@@ -53,9 +53,13 @@
 {# delete PyTorch's menu because our own is reused on mobile #}
 {% endblock %}
 
-{% block custom_footer %}
-<footer class="body_part footer" id="docs-tutorials-resources">
+{% block menu %}
+{{ toctree(maxdepth=2, collapse=True, includehidden=True, titles_only=True) }}
+{% endblock %}
 
+{% block custom_footer %}
+<footer class="footer-wrapper" id="docs-tutorials-resources">
+<div class="footer pytorch-container">
   <div class="footer__logo">
     <a href="{{link_home}}"><img src="https://voxel51.com/images/logo/voxel51-logo-horz-color-600dpi.png" /></a>
   </div>
@@ -130,7 +134,7 @@
       </li>
     </ul>
   </div>
-
+</div>
 </footer>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->

docs/source/index.rst

@@ -163,6 +163,7 @@ or reach out to us at support@voxel51.com.
    :maxdepth: 1
    :hidden:
 
+   Overview<self>
    Installation<getting_started/install>
    Tutorials<tutorials/index>
    Recipes<recipes/index>

docs/theme/js/side-menus.js

@@ -104,6 +104,10 @@ window.sideMenus = {
         sideMenus.handleRightMenu();
       }
     });
+
+    $(function() {
+      $(window).trigger('scroll');
+    })
   },
 
   leftMenuIsFixed: function() {
@@ -202,6 +206,10 @@ window.sideMenus = {
     var rightMenuSideScroll = document.getElementById("pytorch-side-scroll-right");
     var sideScrollFromWindowTop = rightMenuSideScroll.getBoundingClientRect().top;
 
-    rightMenuSideScroll.style.height = utilities.windowHeight() - sideScrollFromWindowTop + "px";
+    var windowHeight = utilities.windowHeight();
+    var topOfFooterRelativeToWindow = document.getElementById("docs-tutorials-resources").getBoundingClientRect().top;
+    var howManyPixelsOfTheFooterAreInTheWindow = Math.max(0, windowHeight - topOfFooterRelativeToWindow);
+
+    rightMenuSideScroll.style.height = windowHeight - sideScrollFromWindowTop - howManyPixelsOfTheFooterAreInTheWindow + "px";
   }
 };

docs/theme/package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "build": "browserify js/*.js --outfile pytorch_sphinx_theme/static/js/theme.js --external jquery",
+    "deploy": "yarn build && cp pytorch_sphinx_theme/static/js/theme.js ../build/html/_static/js/",
+    "watch": "nodemon --watch js/ --exec 'yarn deploy'"
+  },
+  "dependencies": {
+    "browserify": "^16.5.1",
+    "nodemon": "^2.0.4"
+  }
+}

docs/theme/pytorch_sphinx_theme/static/js/theme.js

@@ -1,4 +1,4 @@
-require=(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 window.utilities = {
   scrollTop: function() {
     var supportPageOffset = window.pageXOffset !== undefined;
@@ -590,6 +590,10 @@ window.sideMenus = {
         sideMenus.handleRightMenu();
       }
     });
+
+    $(function() {
+      $(window).trigger('scroll');
+    })
   },
 
   leftMenuIsFixed: function() {
@@ -688,11 +692,15 @@ window.sideMenus = {
     var rightMenuSideScroll = document.getElementById("pytorch-side-scroll-right");
     var sideScrollFromWindowTop = rightMenuSideScroll.getBoundingClientRect().top;
 
-    rightMenuSideScroll.style.height = utilities.windowHeight() - sideScrollFromWindowTop + "px";
+    var windowHeight = utilities.windowHeight();
+    var topOfFooterRelativeToWindow = document.getElementById("docs-tutorials-resources").getBoundingClientRect().top;
+    var howManyPixelsOfTheFooterAreInTheWindow = Math.max(0, windowHeight - topOfFooterRelativeToWindow);
+
+    rightMenuSideScroll.style.height = windowHeight - sideScrollFromWindowTop - howManyPixelsOfTheFooterAreInTheWindow + "px";
   }
 };
 
-},{}],"pytorch-sphinx-theme":[function(require,module,exports){
+},{}],11:[function(require,module,exports){
 var jQuery = (typeof(window) != 'undefined') ? window.jQuery : require('jquery');
 
 // Sphinx theme nav state
@@ -1039,4 +1047,13 @@ $("#tutorial-cards p").each(function(index, item) {
     }
 });
 
-},{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,10,"pytorch-sphinx-theme"]);
+// Jump back to top on pagination click
+
+$(document).on("click", ".page", function() {
+    $('html, body').animate(
+      {scrollTop: $("#dropdown-filter-tags").position().top},
+      'slow'
+    );
+});
+
+},{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,10,11]);