Give each plot heading a visible anchor link

The heading already carried a deep link, but it was a Font Awesome icon
and Font Awesome is not loaded, so it rendered as nothing. A muted # after
the title is visible without competing with the heading.

Author: tdhopper

templates/t_index.html

@@ -111,7 +111,7 @@ <h5>{{ name }}</h5>
         <section id="{{ slug }}">
           <div class="card mb-4">
             <div class="card-header">
-              <h3 class="card-title mb-1"><a href="#{{ slug }}"><i class="fa fa-link" aria-hidden="true"></i></a> {{ name }}</h3>
+              <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">
                 {% for plot in items %}
                 <li class="nav-item">

web/css/custom.css

@@ -27,6 +27,22 @@ table {
     font-family: monospace;
 }
 
+/* Subtle deep-link anchor next to each plot heading. */
+.anchor-link {
+    color: #adb5bd;
+    font-weight: 400;
+    margin-left: .4rem;
+    opacity: .45;
+    text-decoration: none;
+}
+
+.anchor-link:hover,
+.anchor-link:focus {
+    color: #495057;
+    opacity: 1;
+    text-decoration: none;
+}
+
 /* Copy button sitting in the dark code panel header. */
 .copy-btn {
     background: transparent;