Add chapter headers

assets/css/app.css

@@ -3,17 +3,31 @@
                          "Times New Roman", serif;
 }
 
+/* Both of these are links to their own id. They keep the text colour they
+   had as plain numbers, since an underlined blue verse number in the middle
+   of a sentence reads as part of the text. */
+.v,
+.chapter-number a {
+  color: var(--bs-secondary-color);
+  text-decoration: none;
+}
+
+.v:hover,
+.chapter-number a:hover {
+  color: var(--bs-emphasis-color);
+}
+
 .v {
   font-size: .7em;
   font-weight: 700;
   vertical-align: super;
   line-height: 0;
   margin-right: .15em;
-  color: var(--bs-secondary-color);
   user-select: none;
 }
 
-.v:focus-visible {
+.v:focus-visible,
+.chapter-number a:focus-visible {
   outline: 2px solid var(--bs-primary);
   outline-offset: 2px;
   border-radius: 2px;

assets/templates/base.njk

@@ -46,15 +46,14 @@
 
 <main class="container-xl my-4">
   <div class="row justify-content-center">
+    {# A verse number is a link to itself, so the browser handles the jump and
+       the address bar; this only adds the dialog on top. Enter comes free
+       with the link, which is why there is no key handler here. #}
     <div id="content" class="col-12 col-xl-8" hx-history-elt
          hx-on:click="var verse = event.target.closest('.v[id]');
                       if (verse) htmx.ajax('GET', 'api/verse?at=' + verse.id,
                                            { target: '#verse-dialog .modal-content',
-                                             swap: 'innerHTML' });"
-         hx-on:keydown="if (event.key !== 'Enter' &amp;&amp; event.key !== ' ') return;
-                        if (!event.target.matches('.v[id]')) return;
-                        event.preventDefault();
-                        event.target.click();">
+                                             swap: 'innerHTML' });">
 {% block content %}{% endblock %}
     </div>
   </div>