rework demo card, restore all content on index sidebar

docs/source/_static/theme.css

@@ -1,9 +1,31 @@
-.demo-sidebar .demo-title {
-  font-size: var(--pst-sidebar-header-font-size);
-  font-weight: var(--pst-sidebar-header-font-weight);
-  margin-bottom: 0.5rem;
-}
-
+/* index */
 table.indextable tr.cap {
   background-color: var(--pst-color-on-background) !important;
 }
+
+/* demo */
+#demo-sidebar {
+  margin: 0;
+}
+
+#demo-sidebar .demo-app {
+  display: inline;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  flex-wrap: wrap;
+  margin: 0.75rem 0.25rem 0 0.25rem;
+}
+
+.demo-app > * {
+  flex: 1 auto;
+  white-space: nowrap;
+}
+
+#demo-sidebar .admonition-title::after {
+  display: none;
+}
+
+#demo-sidebar .admonition-title {
+  padding-left: 0.75rem;
+}

docs/source/_templates/demo.html

@@ -1,41 +1,41 @@
-<div class="demo-sidebar">
-  <p class="demo-title" role="heading" aria-level="1">
-    Try Jupyter Widgets <strong>Now</strong>
+<div id="demo-sidebar" class="admonition warning">
+  <p class="demo-title admonition-title" role="heading" aria-level="1">
+    <img src="https://jupyterlite.readthedocs.io/en/latest/_static/icon.svg" width="16" />
+    Try Jupyter Widgets
   </p>
 
-  <div class="demo-app btn-group btn-group-toggle" data-toggle="buttons">
-    <label class="btn btn-secondary active">
+  <div class="demo-app">
+    <label title="Try Widgets in a multi-document UI">
       <input
         type="radio"
         name="demo-app"
         autocomplete="off"
         checked
-        title="Lab"
         value="{{ pathto('try/lab/index') }}?path=Widget%20List.ipynb"
       >
       <i class="fas fa-flask"></i> Lab
     </label>
-    <label class="btn btn-secondary">
+    <label title="Try Widgets in a single-document UI">
       <input
         type="radio"
         name="demo-app"
-        title="Notebook"
+        autocomplete="off"
         value="{{ pathto('try/retro/index') }}?path=Widget%20List.ipynb"
       >
       <i class="fas fa-book"></i> Notebook
     </label>
+    <a
+      href="{{ pathto('try/lab/index') }}?path=Widget%20List.ipynb"
+      class="btn btn-primary"
+      target="_blank"
+      title="Try Jupyter Widgets in your browser."
+      id="demo-button"
+    >
+      <i class="fas fa-play"></i>
+      Try Now
+    </a>
   </div>
 
-  <a
-    href="{{ pathto('try/lab/index') }}?path=Widget%20List.ipynb"
-    class="btn btn-primary"
-    target="_blank"
-    title="Try Jupyter Widgets in your browser."
-    id="demo-button"
-  >
-    <i class="fas fa-play"></i>
-    Try Now
-  </a>
 
   <script>$(function() {
     $('.demo-app input').on('change', (event) => {

docs/source/_templates/sidebar-nav-bs-index.html

@@ -0,0 +1,24 @@
+<style>
+  #bd-docs-nav .toctree-toggle,
+  #bd-docs-nav .toctree-checkbox {
+    display: none;
+  }
+  #bd-docs-nav .toctree-l1 > a{
+    font-weight: bold;
+  }
+</style>
+
+<nav class="bd-links" id="bd-docs-nav" aria-label="{{ _('Documentation Contents') }}">
+  <div class="bd-toc-item navbar-nav">
+    <!-- Specify a startdepth of 0 instead of default of 1 -->
+    {{ generate_toctree_html(
+      "sidebar",
+      startdepth=0,
+      show_nav_level=4,
+      maxdepth=4,
+      collapse=False,
+      includehidden=True,
+      titles_only=False
+    ) }}
+  </div>
+</nav>

docs/source/conf.py

@@ -181,10 +181,16 @@ def setup(app):
 }
 
 html_sidebars = {
+    "index": [
+        "demo.html",
+        "search-field.html",
+        "sidebar-nav-bs-index.html",
+        "sidebar-ethical-ads.html",
+    ],
     "**": [
         "search-field.html",
-        "demo.html",
         "sidebar-nav-bs.html",
+        "demo.html",
         "sidebar-ethical-ads.html",
     ]
 }