Schuil

assets/templates/reference.njk

@@ -1,6 +1,5 @@
 <div class="reference" id="reference">
-  <span class="reference-book" id="reference-book">{{ reference.book }}</span>
-  <label class="visually-hidden" for="reference-chapter">Chapter</label>
+  <label for="reference-chapter">Chapter</label>
   <select class="reference-chapter" id="reference-chapter" name="at"
           hx-get="api/reference" hx-target="#reference-verse"
           hx-swap="innerHTML">
@@ -9,8 +8,7 @@
             {%- if chapter.id == reference.chapter %} selected{% endif %}>{{ chapter.label }}</option>
   {%- endfor %}
   </select>
-  <span class="reference-sep">:</span>
-  <label class="visually-hidden" for="reference-verse">Verse</label>
+  <label for="reference-verse">Verse</label>
   <select class="reference-verse" id="reference-verse" name="at"
           hx-get="api/reference" hx-target="this" hx-swap="innerHTML">
 {% include "verses.njk" %}

assets/templates/sidebar.njk

@@ -19,9 +19,15 @@
           hx-on:click="if (event.target === this && this.matches(':modal')) this.close();"
           hx-on:close="if (!this.open) this.show();">
     <div class="sidebar-body">
+      <h2 class="sidebar-title">Navigation</h2>
+      <hr class="sidebar-rule">
 {%- if reference %}
 {% include "reference.njk" %}
 {%- endif %}
+      {# Names the body's target and swap again: it would otherwise inherit
+         the shell's, and swap the index in for the sidebar. #}
+      <a class="sidebar-index" href="./"
+         hx-target="#content" hx-swap="innerHTML show:window:top">Back to index</a>
     </div>
     {# Takes the place of the frame's last corner on a phone, right where the
        button that opened it was. #}