From 3ebf27c0ed8d39ce4eeb08198f44ede39665f8b0 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Fri, 5 Dec 2025 15:10:08 -0500 Subject: [PATCH] Comprehensive mobile UX improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- kjvstudy_org/templates/base.html | 41 +++++++ kjvstudy_org/templates/chapter.html | 51 +++++++++ kjvstudy_org/templates/family_tree.html | 3 + .../templates/family_tree_ancestors.html | 9 ++ .../templates/family_tree_descendants.html | 9 ++ .../templates/family_tree_generation.html | 9 ++ .../templates/family_tree_interactive.html | 14 +++ .../templates/family_tree_person.html | 6 + kjvstudy_org/templates/index.html | 106 +++++++++++++++++- 9 files changed, 242 insertions(+), 6 deletions(-) diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index 5136fdc..31d05b7 100644 --- a/kjvstudy_org/templates/base.html +++ b/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 { diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html index a33af70..247be97 100644 --- a/kjvstudy_org/templates/chapter.html +++ b/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 }); }); diff --git a/kjvstudy_org/templates/family_tree.html b/kjvstudy_org/templates/family_tree.html index 9f50555..0c46738 100644 --- a/kjvstudy_org/templates/family_tree.html +++ b/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; } diff --git a/kjvstudy_org/templates/family_tree_ancestors.html b/kjvstudy_org/templates/family_tree_ancestors.html index c0d34a7..90f9441 100644 --- a/kjvstudy_org/templates/family_tree_ancestors.html +++ b/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%; + } +} {% endblock %} diff --git a/kjvstudy_org/templates/family_tree_descendants.html b/kjvstudy_org/templates/family_tree_descendants.html index 73fda43..a628879 100644 --- a/kjvstudy_org/templates/family_tree_descendants.html +++ b/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%; + } +} {% endblock %} diff --git a/kjvstudy_org/templates/family_tree_generation.html b/kjvstudy_org/templates/family_tree_generation.html index 3ad608f..c25ad93 100644 --- a/kjvstudy_org/templates/family_tree_generation.html +++ b/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; diff --git a/kjvstudy_org/templates/family_tree_interactive.html b/kjvstudy_org/templates/family_tree_interactive.html index ba7b4c2..164ecd7 100644 --- a/kjvstudy_org/templates/family_tree_interactive.html +++ b/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%; + } +} {% endblock %} diff --git a/kjvstudy_org/templates/family_tree_person.html b/kjvstudy_org/templates/family_tree_person.html index cc4f97b..2154f74 100644 --- a/kjvstudy_org/templates/family_tree_person.html +++ b/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; diff --git a/kjvstudy_org/templates/index.html b/kjvstudy_org/templates/index.html index 7242f40..34fc91f 100644 --- a/kjvstudy_org/templates/index.html +++ b/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; + } } {% endblock %}