Move installation methods to tabs

docs/_static/css/tabs.css

@@ -0,0 +1,89 @@
+.sphinx-tabs {
+    margin-bottom: 1rem;
+  }
+
+  [role="tablist"] {
+    border-bottom: 1px solid #a0b3bf;
+  }
+
+  .sphinx-tabs-tab {
+    position: relative;
+    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
+    color: var(--pst-color-link);
+    line-height: 24px;
+    margin: 3px;
+    font-size: 16px;
+    font-weight: 400;
+    background-color: var(--bs-body-color);
+    border-radius: 5px 5px 0 0;
+    border: 0;
+    padding: 1rem 1.5rem;
+    margin-bottom: 0;
+  }
+
+  .sphinx-tabs-tab[aria-selected="true"] {
+    font-weight: 700;
+    border: 1px solid #a0b3bf;
+    border-bottom: 1px solid rgb(50, 50, 50);
+    margin: -1px;
+    background-color: rgb(50, 50, 50);
+  }
+
+  .sphinx-tabs-tab:focus {
+    z-index: 1;
+    outline-offset: 1px;
+  }
+
+  .sphinx-tabs-panel {
+    position: relative;
+    padding: 1rem;
+    border: 1px solid #a0b3bf;
+    margin: 0px -1px -1px -1px;
+    border-radius: 0 0 5px 5px;
+    border-top: 0;
+    background: rgb(50, 50, 50);
+  }
+
+  .sphinx-tabs-panel.code-tab {
+    padding: 0.4rem;
+  }
+
+  .sphinx-tab img {
+      margin-bottom: 24 px;
+  }
+
+  /* Dark theme preference styling */
+
+  @media (prefers-color-scheme: dark) {
+    body[data-theme="auto"] .sphinx-tabs-panel {
+      color: white;
+      background-color: rgb(50, 50, 50);
+    }
+
+    body[data-theme="auto"] .sphinx-tabs-tab {
+      color: white;
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
+      border-bottom: 1px solid rgb(50, 50, 50);
+      background-color: rgb(50, 50, 50);
+    }
+  }
+
+  /* Explicit dark theme styling */
+
+  body[data-theme="dark"] .sphinx-tabs-panel {
+    color: white;
+    background-color: rgb(50, 50, 50);
+  }
+
+  body[data-theme="dark"] .sphinx-tabs-tab {
+    color: white;
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
+    border-bottom: 2px solid rgb(50, 50, 50);
+    background-color: rgb(50, 50, 50);
+  }

docs/conf.py

@@ -174,6 +174,12 @@ def linkcode_resolve(domain, info):
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
 
+# These paths are either relative to html_static_path
+# or fully qualified paths (eg. https://...)
+html_css_files = [
+    'css/custom.css',
+]
+
 # Custom sidebar templates, must be a dictionary that maps document names
 # to template names.
 #
@@ -220,3 +226,7 @@ def linkcode_resolve(domain, info):
 
 # https://myst-nb.readthedocs.io/en/latest/use/config-reference.html
 jupyter_execute_notebooks = "off"
+
+# Sphinx-tabs settings
+# https://sphinx-tabs.readthedocs.io/en/latest/
+sphinx_tabs_disable_css_loading = True  # Use the theme's CSS