From 99288c734ec93a4e3bc741e7bca18d712e5462a3 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sun, 23 Nov 2025 12:20:26 -0500 Subject: [PATCH] Comprehensive mobile/iOS styling improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Enhanced mobile experience across the entire site: Base Template (all pages): - Added iOS-specific webkit optimizations - Increased all touch targets to 44px minimum (Apple HIG) - Enhanced link visibility with 2px borders and darker colors - Improved sidenotes with background tint and thicker borders - Better button styling with proper tap highlights - Stronger section dividers with 2px borders - Improved breadcrumb contrast and weight Homepage: - Enhanced verse lookup with background tint and thicker border - Better input/button styling with 2px borders - Study entries with subtle backgrounds and better contrast - Quick link buttons with proper touch targets and borders - Epigraph with background tint for better visibility - All text using primary color for maximum readability Dark mode support for all new background tints. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/base.html | 73 ++++++++++++++++++++++--- kjvstudy_org/templates/index.html | 88 ++++++++++++++++++++++++++----- 2 files changed, 142 insertions(+), 19 deletions(-) diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index 178d4a8..feb7ca4 100644 --- a/kjvstudy_org/templates/base.html +++ b/kjvstudy_org/templates/base.html @@ -554,11 +554,19 @@ } @media (max-width: 768px) { + /* iOS-specific optimizations */ + body { + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); + } + /* Keep dark mode toggle on mobile, just reposition */ .dark-mode-toggle { top: 1rem; right: 1rem; margin: 0; + min-width: 44px; + min-height: 44px; } /* Adjust article width for mobile */ @@ -567,7 +575,7 @@ padding: 1rem; } - /* Optimize typography for mobile */ + /* Optimize typography for mobile with better contrast */ body { font-size: 16px; } @@ -575,20 +583,37 @@ h1 { font-size: 2rem; line-height: 2.2rem; + font-weight: 500; } h2 { font-size: 1.5rem; line-height: 1.7rem; + font-weight: 500; } h3 { font-size: 1.2rem; + font-weight: 600; } p { font-size: 1rem; line-height: 1.8; + color: var(--text-color); + } + + /* Enhanced link visibility for mobile */ + a { + border-bottom: 2px solid var(--border-color-darker); + padding-bottom: 1px; + min-height: 44px; + display: inline-block; + line-height: 1.6; + } + + a:hover, a:active { + border-bottom-color: var(--text-color); } /* Make max-width sections full width on mobile */ @@ -605,16 +630,24 @@ max-width: 100% !important; } - /* Optimize sidenotes for mobile */ + /* Optimize sidenotes for mobile with better visibility */ .sidenote, .marginnote { display: block; float: none; width: 100%; - margin: 1rem 0 1rem 2rem; - padding-left: 1rem; - border-left: 2px solid var(--border-color); + margin: 1rem 0 1rem 1.5rem; + padding: 0.75rem 0 0.75rem 1rem; + border-left: 3px solid var(--border-color-darker); + background: rgba(0, 0, 0, 0.02); font-size: 0.9rem; + line-height: 1.6; + color: var(--text-color); + } + + [data-theme="dark"] .sidenote, + [data-theme="dark"] .marginnote { + background: rgba(255, 255, 255, 0.03); } .sidenote-number, @@ -657,10 +690,36 @@ justify-content: center; } - /* Optimize breadcrumbs */ + /* Optimize breadcrumbs with better contrast */ .breadcrumb { - font-size: 0.85rem; + font-size: 0.9rem; flex-wrap: wrap; + border-bottom: 2px solid var(--border-color-darker); + padding-bottom: 0.75rem; + } + + .breadcrumb a { + font-weight: 500; + border-bottom: 1px dotted var(--border-color-darker); + } + + /* Improve button visibility on mobile */ + button, .btn, input[type="submit"] { + min-height: 44px; + min-width: 44px; + padding: 0.75rem 1.25rem; + font-size: 1rem; + font-weight: 500; + border: 2px solid var(--text-color); + cursor: pointer; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); + } + + /* Improve section dividers */ + section:not(:first-of-type) { + border-top: 2px solid var(--border-color-darker); + padding-top: 2rem; + margin-top: 2.5rem; } /* Optimize verse text */ diff --git a/kjvstudy_org/templates/index.html b/kjvstudy_org/templates/index.html index e45260b..f592bba 100644 --- a/kjvstudy_org/templates/index.html +++ b/kjvstudy_org/templates/index.html @@ -143,12 +143,20 @@ section a[href^="/book/"] { .verse-lookup { max-width: 100%; - padding: 1rem 0 1rem 1rem; + padding: 1.25rem 0 1.25rem 1.25rem; margin: 1.5rem 0; + border-left: 4px solid var(--border-color-darker); + background: rgba(0, 0, 0, 0.02); + } + + [data-theme="dark"] .verse-lookup { + background: rgba(255, 255, 255, 0.03); } .verse-lookup h2 { - font-size: 1.1rem; + font-size: 1.15rem; + font-weight: 600; + color: var(--text-color); } .lookup-form { @@ -159,18 +167,29 @@ section a[href^="/book/"] { .lookup-input { width: 100%; font-size: 1rem; - padding: 0.75rem; + padding: 0.875rem 1rem; + border: 2px solid var(--border-color-darker); + font-weight: 400; + } + + .lookup-input:focus { + border-color: var(--text-color); + outline: none; } .lookup-btn { width: 100%; - padding: 0.75rem; + padding: 0.875rem; font-size: 1rem; + font-weight: 600; + min-height: 44px; + border: 2px solid var(--text-color); } .lookup-help { - font-size: 0.85rem; - line-height: 1.5; + font-size: 0.9rem; + line-height: 1.6; + color: var(--text-secondary); } .featured-studies { @@ -180,35 +199,80 @@ section a[href^="/book/"] { .study-entry { margin: 1.25rem 0; - padding-left: 1rem; + padding: 1rem 0 1rem 1.25rem; + border-left: 3px solid var(--border-color-darker); + background: rgba(0, 0, 0, 0.015); + } + + [data-theme="dark"] .study-entry { + background: rgba(255, 255, 255, 0.02); } .study-entry h3 { - font-size: 1.05rem; + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.5rem; + } + + .study-entry h3 a { + color: var(--text-color); + border-bottom: 2px solid var(--border-color-darker); } .study-entry p { font-size: 0.95rem; line-height: 1.7; + color: var(--text-color); } .quick-links { max-width: 100%; margin: 1rem 0; + line-height: 1.8; } .quick-link-btn { - display: block; - margin: 0.5rem 0; + display: inline-block; + margin: 0.5rem 0.75rem 0.5rem 0; + padding: 0.5rem 1rem; + border: 2px solid var(--border-color-darker); + border-radius: 4px; + background: rgba(0, 0, 0, 0.02); + font-weight: 500; + min-height: 44px; + line-height: 1.6; } - /* Adjust epigraph on mobile */ + [data-theme="dark"] .quick-link-btn { + background: rgba(255, 255, 255, 0.03); + } + + /* Adjust epigraph on mobile with better visibility */ .epigraph { margin: 2rem 0; + padding: 1rem; + border-left: 3px solid var(--border-color-darker); + background: rgba(0, 0, 0, 0.02); + } + + [data-theme="dark"] .epigraph { + background: rgba(255, 255, 255, 0.03); } .epigraph blockquote { - font-size: 1rem; + font-size: 1.05rem; + line-height: 1.8; + color: var(--text-color); + } + + .epigraph footer { + margin-top: 0.75rem; + font-size: 0.9rem; + } + + .epigraph footer a { + font-weight: 500; + border-bottom: 1px dotted var(--border-color-darker); } }