From 202048de082fd30de2abc2b6702428b32b8454b2 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 20 Nov 2025 19:12:45 -0500
Subject: [PATCH] Optimize mobile responsive design across all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Comprehensive mobile optimization:

Tablet screens (max-width: 768px):
- Adjust article width to 95% with reduced padding
- Optimize typography: scaled heading sizes, readable line height
- Full-width content sections (remove max-width constraints)
- Sidenotes display inline with left border for readability
- Vertical stacking: plan stats, share buttons, lookup form
- Single column grids for books, plans, topics
- Responsive breadcrumbs with wrapping
- Optimized verse text sizing
- Horizontal scroll for tables
- Adjusted epigraph styling

Phone screens (max-width: 480px):
- Full width article (100%) with minimal padding
- Further reduced heading sizes
- Smaller verse text for readability
- Repositioned dark mode toggle

All responsive changes use !important where needed to
override inline styles in templates. Ensures comfortable
reading and navigation on all mobile devices.

Dark mode toggle retained on mobile (repositioned).
Sidebar auto-hides on screens under 1200px width.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/base.html | 162 ++++++++++++++++++++++++++++++-
 1 file changed, 160 insertions(+), 2 deletions(-)

diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 6fa99f5..8787004 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -357,7 +357,7 @@
             content: '-';
         }
 
-        /* Hide sidebar and controls on smaller screens */
+        /* Responsive design for tablets and mobile */
         @media (max-width: 1200px) {
             .nav-sidebar {
                 display: none;
@@ -368,8 +368,166 @@
         }
 
         @media (max-width: 768px) {
+            /* Keep dark mode toggle on mobile, just reposition */
             .dark-mode-toggle {
-                display: none;
+                top: 1rem;
+                right: 1rem;
+                margin: 0;
+            }
+
+            /* Adjust article width for mobile */
+            article {
+                width: 95%;
+                padding: 1rem;
+            }
+
+            /* Optimize typography for mobile */
+            body {
+                font-size: 16px;
+            }
+
+            h1 {
+                font-size: 2rem;
+                line-height: 2.2rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+                line-height: 1.7rem;
+            }
+
+            h3 {
+                font-size: 1.2rem;
+            }
+
+            p {
+                font-size: 1rem;
+                line-height: 1.8;
+            }
+
+            /* Make max-width sections full width on mobile */
+            section p[style*="max-width"],
+            section div[style*="max-width"],
+            .intro-text,
+            .plan-overview,
+            .topic-overview,
+            .verse-lookup,
+            .share-container,
+            .sample-days,
+            .subtopics-container,
+            .plan-stats {
+                max-width: 100% !important;
+            }
+
+            /* Optimize sidenotes for mobile */
+            .sidenote,
+            .marginnote {
+                display: block;
+                float: none;
+                width: 100%;
+                margin: 1rem 0 1rem 2rem;
+                padding-left: 1rem;
+                border-left: 2px solid var(--border-color);
+                font-size: 0.9rem;
+            }
+
+            .sidenote-number,
+            .margin-toggle {
+                display: inline;
+            }
+
+            /* Stack plan stats vertically */
+            .plan-stats {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            /* Optimize grids for mobile */
+            .book-grid,
+            .plan-grid,
+            .topic-grid {
+                grid-template-columns: 1fr !important;
+                gap: 1rem;
+                max-width: 100% !important;
+            }
+
+            /* Optimize verse lookup form */
+            .lookup-form {
+                flex-direction: column;
+            }
+
+            .lookup-input,
+            .lookup-btn {
+                width: 100%;
+            }
+
+            /* Optimize share buttons */
+            .share-buttons {
+                flex-direction: column;
+            }
+
+            .share-btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            /* Optimize breadcrumbs */
+            .breadcrumb {
+                font-size: 0.85rem;
+                flex-wrap: wrap;
+            }
+
+            /* Optimize verse text */
+            .verse-text {
+                font-size: 1.4rem;
+                line-height: 2rem;
+            }
+
+            /* Make tables responsive */
+            table {
+                display: block;
+                overflow-x: auto;
+                white-space: nowrap;
+            }
+
+            /* Optimize epigraph */
+            .epigraph {
+                margin: 2rem 0;
+            }
+
+            .epigraph blockquote {
+                padding: 1rem;
+                font-size: 1.1rem;
+            }
+        }
+
+        /* Extra small screens (phones in portrait) */
+        @media (max-width: 480px) {
+            article {
+                width: 100%;
+                padding: 0.5rem;
+            }
+
+            h1 {
+                font-size: 1.75rem;
+            }
+
+            h2 {
+                font-size: 1.3rem;
+            }
+
+            .verse-text {
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+            }
+
+            .dark-mode-toggle,
+            .sidebar-toggle-container {
+                top: 0.5rem;
+            }
+
+            .dark-mode-toggle {
+                right: 0.5rem;
             }
         }