Comprehensive mobile UX improvements

- Auto-enable large font mode on mobile (base.html)
- Add swipe gestures for chapter navigation
- Improve verse number tap targets with background
- Make family tree pages full width on mobile
- Enhance homepage mobile layout with larger touch targets
- Increase text sizes and line heights for readability
- Remove sidenote tap target styling per user request

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

Co-Authored-By: Claude <noreply@anthropic.com>

kjvstudy_org/templates/base.html

@@ -525,6 +525,47 @@
             font-size: 2.4rem;
         }
 
+        /* Auto-enable large font on mobile */
+        @media (max-width: 768px) {
+            article {
+                font-size: 1.2rem;
+            }
+
+            article p,
+            article li {
+                font-size: 1.4rem;
+                line-height: 1.9;
+            }
+
+            article h1 {
+                font-size: 2.4rem;
+            }
+
+            article h2 {
+                font-size: 1.8rem;
+            }
+
+            article h3 {
+                font-size: 1.4rem;
+            }
+
+            /* Sidebar links bigger for tap */
+            .nav-sidebar a {
+                font-size: 1rem;
+                padding: 0.5rem 0.6rem;
+            }
+
+            .nav-sidebar .book-list a {
+                font-size: 0.95rem;
+                padding: 0.4rem 0.5rem;
+            }
+
+            .nav-sidebar summary {
+                font-size: 0.8rem;
+                padding: 0.5rem 0;
+            }
+        }
+
         /* Shared large font and dark mode rules are in style.css */
 
         .breadcrumb a {

kjvstudy_org/templates/chapter.html

@@ -29,6 +29,20 @@
         line-height: 1.8;
     }
 
+    /* Verse numbers: larger tap target */
+    a.verse-number-link {
+        display: inline-block;
+        min-width: 32px;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-right: 4px;
+        font-size: 1rem;
+        text-align: center;
+        vertical-align: baseline;
+        border-radius: 4px;
+        background: var(--code-bg, #f5f5f5);
+    }
+
     a.verse-number-link,
     a.verse-number-link:visited,
     a.verse-number-link:hover,
@@ -36,6 +50,18 @@
         text-decoration: none !important;
         border-bottom: none !important;
     }
+
+    a.verse-number-link:active {
+        background: var(--border-color-darker, #ccc);
+    }
+
+    /* Section headings */
+    .section-heading {
+        font-size: 1.1rem;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+
 }
 
 .poetry-chapter .stanza-break {
@@ -1021,6 +1047,31 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     });
+
+    // Swipe gestures for chapter navigation (mobile)
+    let touchStartX = 0;
+    let touchEndX = 0;
+    const minSwipeDistance = 80;
+
+    document.addEventListener('touchstart', function(e) {
+        touchStartX = e.changedTouches[0].screenX;
+    }, { passive: true });
+
+    document.addEventListener('touchend', function(e) {
+        touchEndX = e.changedTouches[0].screenX;
+        const swipeDistance = touchEndX - touchStartX;
+
+        // Swipe right (prev chapter)
+        if (swipeDistance > minSwipeDistance) {
+            const prevBtn = document.getElementById('prev-chapter');
+            if (prevBtn) window.location.href = prevBtn.href;
+        }
+        // Swipe left (next chapter)
+        else if (swipeDistance < -minSwipeDistance) {
+            const nextBtn = document.getElementById('next-chapter');
+            if (nextBtn) window.location.href = nextBtn.href;
+        }
+    }, { passive: true });
 });
 </script>
 

kjvstudy_org/templates/family_tree.html

@@ -346,6 +346,9 @@
 }
 
 @media (max-width: 768px) {
+    .family-tree-page {
+        max-width: 100%;
+    }
     .feature-grid {
         grid-template-columns: 1fr;
     }

kjvstudy_org/templates/family_tree_ancestors.html

@@ -93,6 +93,15 @@
 .navigation-links a {
     margin-right: 1.5rem;
 }
+
+@media (max-width: 768px) {
+    .tree-header,
+    .intro-text,
+    .ancestors-tree,
+    .navigation-links {
+        max-width: 100%;
+    }
+}
 </style>
 {% endblock %}
 

kjvstudy_org/templates/family_tree_descendants.html

@@ -91,6 +91,15 @@
 .navigation-links a {
     margin-right: 1.5rem;
 }
+
+@media (max-width: 768px) {
+    .tree-header,
+    .intro-text,
+    .descendants-tree,
+    .navigation-links {
+        max-width: 100%;
+    }
+}
 </style>
 {% endblock %}
 

kjvstudy_org/templates/family_tree_generation.html

@@ -64,6 +64,15 @@
     gap: 1rem;
 }
 
+@media (max-width: 768px) {
+    .gen-header,
+    .gen-nav,
+    .gen-stats,
+    .person-grid {
+        max-width: 100%;
+    }
+}
+
 .person-card {
     padding: 1rem 1.25rem;
     border: 1px solid #ddd;

kjvstudy_org/templates/family_tree_interactive.html

@@ -284,6 +284,20 @@
     background: #2a2a2a;
     border-color: #444;
 }
+
+/* Mobile full width */
+@media (max-width: 768px) {
+    .tree-header,
+    .intro-text,
+    .tree-controls,
+    .navigation-links,
+    .keyboard-hint {
+        max-width: 100%;
+    }
+    .tree-container {
+        max-width: 100%;
+    }
+}
 </style>
 {% endblock %}
 

kjvstudy_org/templates/family_tree_person.html

@@ -11,6 +11,12 @@
     max-width: 55%;
 }
 
+@media (max-width: 768px) {
+    .person-page {
+        max-width: 100%;
+    }
+}
+
 .person-nav {
     display: flex;
     align-items: center;

kjvstudy_org/templates/index.html

@@ -360,37 +360,64 @@ section h2 {
     }
 
     .title-page h1 {
-        font-size: 2rem;
+        font-size: 2.2rem;
         letter-spacing: 0.04em;
     }
 
-    .title-page .epigraph {
+    .title-page .subtitle {
+        font-size: 1rem;
+    }
+
+    .title-page .epigraph {
+        font-size: 1.1rem;
+        padding: 0 0.5rem;
+        line-height: 1.9;
+    }
+
+    .title-page .epigraph footer {
         font-size: 1rem;
-        padding: 0 1rem;
     }
 
     .search-section {
         max-width: 100%;
         margin-left: auto;
         margin-right: auto;
+        padding: 0;
     }
 
     .search-form {
         flex-direction: column;
     }
 
+    .search-input {
+        padding: 1.1rem 1rem;
+        font-size: 1.1rem;
+    }
+
     .search-btn {
         width: 100%;
+        padding: 1.1rem 2rem;
+        font-size: 1.1rem;
+        min-height: 50px;
+    }
+
+    .search-help {
+        font-size: 0.9rem;
     }
 
     .quick-links {
         margin-left: 0;
+        padding: 0;
     }
 
     .quick-links a {
-        margin: 0.25rem;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.9rem;
+        margin: 0.35rem;
+        padding: 0.7rem 1rem;
+        font-size: 1rem;
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
     }
 
     .interlinear-samples {
@@ -401,18 +428,85 @@ section h2 {
         grid-template-columns: 1fr;
     }
 
+    .resource-card {
+        padding: 1.25rem;
+        min-height: 44px;
+    }
+
+    .resource-card h3 {
+        font-size: 1.15rem;
+    }
+
+    .resource-card p {
+        font-size: 1rem;
+        line-height: 1.7;
+    }
+
     .topic-grid {
         grid-template-columns: repeat(2, 1fr);
+        gap: 0.5rem;
+    }
+
+    .topic-link {
+        padding: 0.85rem 0.75rem;
+        font-size: 0.95rem;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
     }
 
     .interactive-grid {
         grid-template-columns: repeat(2, 1fr);
+        gap: 0.5rem;
+    }
+
+    .interactive-grid a {
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     .testament-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }
+
+    section h2 {
+        font-size: 1.5rem;
+    }
+
+    section p {
+        font-size: 1.1rem;
+        line-height: 1.9;
+    }
+
+    .sample-word {
+        padding: 0.4rem 0.5rem;
+    }
+
+    .sample-original {
+        font-size: 1.8rem;
+    }
+
+    .sample-english {
+        font-size: 0.8rem;
+    }
+
+    .home-footer {
+        padding-top: 1rem;
+    }
+
+    .home-footer p {
+        font-size: 0.95rem;
+        line-height: 1.8;
+    }
+
+    .home-footer a {
+        padding: 0.25rem;
+    }
 }
 </style>
 {% endblock %}