feat: improve TOC layout

source/_static/css/custom.css

@@ -15,3 +15,38 @@ a.reference.external {
 a.reference.external:hover {
   color: rgba(61, 185, 209, 1);
 }
+
+
+/* Make nicer global TOC */
+/* For smaller screens, default to standard layout which is mobile friendly */
+@media screen and (min-width: 1800px) {
+
+  /* Lighter color in global TOC */
+  nav.md-nav--primary {
+    color: rgba(38,38,66,0.7)
+  }
+
+  /* Smaller fonts in both TOCs (global and contents) */
+  nav.md-nav {
+    font-size: 15px;
+  }
+
+  /* Properly align everything */
+  div.md-main__inner {
+    display: inline-flex;
+    max-width: none;
+  }
+  div.md-sidebar--primary {
+    width: 20rem;
+  }
+  div.md-sidebar--secondary {
+    margin-left: 99%;
+    width: 15rem;
+  }
+  div.md-content {
+    margin-left: 22rem;
+    margin-right: 22rem;
+    max-width: 1000px;
+  }
+
+}

source/conf.py

@@ -95,7 +95,7 @@
 html_theme = 'sphinx_material'
 html_theme_options = {
     # 'color_primary': 'teal',
-    'globaltoc_depth': 3,
+    'globaltoc_depth': 4,
     'globaltoc_collapse': True,
     'html_minify': True,
     'css_minify': True,
@@ -197,3 +197,13 @@
 # -- Options for autosectionlabel extension ----------------------------------------------
 
 autosectionlabel_prefix_document = True
+
+
+# Enable reloading custom.css even if no changes where made to the RST
+# ref: https://github.com/sphinx-doc/sphinx/issues/2090#issuecomment-572902572
+
+def env_get_outdated(app, env, added, changed, removed):
+    return ['index']
+
+def setup(app):
+    app.connect('env-get-outdated', env_get_outdated)