From 01f5b1ba7b4d976d7fd4e95ceffe94e513c3c328 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 4 Dec 2025 09:36:08 -0500
Subject: [PATCH] UI improvements: nav pills, breadcrumb positioning, anchor
 offsets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert verse navigation to pill-style buttons
- Extend breadcrumb bar to the left with padding
- Add scroll-margin-top for verse anchors on chapter page
- Rename 'Chapter X' to 'Read in Chapter X'

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/base.html    |  3 +-
 kjvstudy_org/templates/chapter.html |  5 +++
 kjvstudy_org/templates/verse.html   | 56 +++++++++++++++++++++++++----
 3 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 9358560..f26b0e8 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -338,7 +338,8 @@
 
         /* Refined breadcrumb navigation */
         .breadcrumb {
-            margin: 2rem 0 3rem 0;
+            margin: 2rem 0 3rem -5%;
+            padding-left: 3rem;
             font-size: 0.95rem;
             color: var(--text-secondary);
             font-style: italic;
diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html
index 3637144..9937aaa 100644
--- a/kjvstudy_org/templates/chapter.html
+++ b/kjvstudy_org/templates/chapter.html
@@ -6,6 +6,11 @@
 
 {% block head %}
 <style>
+/* Anchor offset for sticky breadcrumb */
+[id^="verse-"] {
+    scroll-margin-top: 5rem;
+}
+
 /* Red Letter Edition - Words of Christ */
 .words-of-christ {
     color: #c41e3a;
diff --git a/kjvstudy_org/templates/verse.html b/kjvstudy_org/templates/verse.html
index 956044f..b4c7cab 100644
--- a/kjvstudy_org/templates/verse.html
+++ b/kjvstudy_org/templates/verse.html
@@ -253,6 +253,50 @@ a.crossref-pill:hover {
     gap: 0.5rem;
 }
 
+/* Verse navigation pills */
+.verse-nav-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin: 1.5rem 0;
+}
+
+.nav-pill {
+    display: inline-block;
+    padding: 0.3rem 0.7rem;
+    background: transparent;
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.15s;
+    white-space: nowrap;
+}
+
+.nav-pill:hover {
+    border-color: var(--link-color);
+    color: var(--link-color);
+    background: rgba(74, 124, 89, 0.05);
+}
+
+[data-theme="dark"] .nav-pill {
+    border-color: #444;
+}
+
+[data-theme="dark"] .nav-pill:hover {
+    background: rgba(74, 124, 89, 0.15);
+}
+
+[data-font-size="large"] .nav-pill {
+    font-size: 1.1rem;
+    padding: 0.4rem 0.9rem;
+}
+
+[data-font-size="large"] .verse-nav-pills {
+    gap: 0.5rem;
+}
+
 .share-buttons {
     display: flex;
     gap: 0.75rem;
@@ -896,13 +940,11 @@ a.crossref-pill:hover {
     </script>
     {% endif %}
 
-    <nav style="margin: 1.5rem 0;">
-        <p>
-            <a href="/book/{{ book }}">← {{ book }}</a> |
-            <a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_num }}">View in Chapter {{ chapter }}</a>
-            {% if verse_num > 1 %} | <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num - 1 }}">← Verse {{ verse_num - 1 }}</a>{% endif %}
-            {% if verse_num < total_verses %} | <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num + 1 }}">Verse {{ verse_num + 1 }} →</a>{% endif %}
-        </p>
+    <nav class="verse-nav-pills">
+        <a href="/book/{{ book }}" class="nav-pill">← {{ book }}</a>
+        <a href="/book/{{ book }}/chapter/{{ chapter }}#verse-{{ verse_num }}" class="nav-pill">Read in Chapter {{ chapter }}</a>
+        {% if verse_num > 1 %}<a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num - 1 }}" class="nav-pill">← Verse {{ verse_num - 1 }}</a>{% endif %}
+        {% if verse_num < total_verses %}<a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num + 1 }}" class="nav-pill">Verse {{ verse_num + 1 }} →</a>{% endif %}
     </nav>
 
     <div class="share-container">