Restyle the per-card library selector as compact pills

Ten file-folder tabs wrapped to two ragged lines and broke the metaphor.
Chips wrap cleanly instead: all libraries fit one line at 1200px and up,
and stack tidily below that.

Also fixes the hvPlot label casing.

Author: tdhopper

render.py

@@ -26,7 +26,7 @@
     "plotnine": "plotnine",
     "lets-plot": "lets-plot",
     "plotly": "plotly",
-    "hvplot": "hvplot (Bokeh)",
+    "hvplot": "hvPlot (Bokeh)",
     "altair": "Altair",
     "ggplot": "ggplot2 (R)",
 }

templates/t_index.html

@@ -120,11 +120,10 @@ <h5>{{ name }}</h5>
           <div class="card mb-4">
             <div class="card-header">
               <h3 class="card-title mb-1">{{ name }}<a class="anchor-link" href="#{{ slug }}" title="Link to {{ name }}" aria-label="Link to {{ name }}">#</a></h3>
-              <ul class="nav nav-tabs card-header-tabs">
+              <ul class="nav nav-pills card-header-pills library-pills">
                 {% for plot in items %}
                 <li class="nav-item">
-                  <a class="nav-link {% if loop.index0 == 0 %} active{% endif %}" data-toggle="tab" href="#{{ slug }}{{ plot['package-slug'] }}" role="tab">   {{ plot['package'] }}
-                  </a>
+                  <a class="nav-link{% if loop.index0 == 0 %} active{% endif %}" data-toggle="tab" href="#{{ slug }}{{ plot['package-slug'] }}" role="tab">{{ plot['package'] }}</a>
                 </li>
                 {% endfor %}
               </ul>

web/css/custom.css

@@ -43,6 +43,46 @@ table {
     text-decoration: none;
 }
 
+/* Library selector: compact chips that wrap neatly instead of ragged folder tabs. */
+.library-pills {
+    gap: .25rem;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: .35rem;
+}
+
+.library-pills .nav-item {
+    margin: 0;
+}
+
+.library-pills .nav-link {
+    background-color: #fff;
+    border: 1px solid #e0e2e5;
+    border-radius: 50rem;
+    color: #495057;
+    font-size: .85rem;
+    line-height: 1.3;
+    padding: .2rem .6rem;
+    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
+    white-space: nowrap;
+}
+
+.library-pills .nav-link:hover,
+.library-pills .nav-link:focus {
+    background-color: #eceef0;
+    border-color: #cfd3d7;
+    color: #212529;
+    text-decoration: none;
+}
+
+.library-pills .nav-link.active,
+.library-pills .nav-link.active:hover,
+.library-pills .nav-link.active:focus {
+    background-color: #202020;
+    border-color: #202020;
+    color: #fff;
+}
+
 /* Copy button sitting in the dark code panel header. */
 .copy-btn {
     background: transparent;