diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css index 1859a18..09c8b80 100644 --- a/kjvstudy_org/static/style.css +++ b/kjvstudy_org/static/style.css @@ -1,71 +1,75 @@ :root { - --primary-color: #4b2e83; - --primary-light: #6d4bb3; - --primary-dark: #2f1a4f; - --accent-color: #8b5cf6; - --background-color: #0f0f0f; - --surface-color: #1a1a1a; - --text-primary: #f5f5f5; - --text-secondary: #a3a3a3; - --text-muted: #737373; - --border-color: #2a2a2a; - --border-light: #262626; - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); - --radius-sm: 0.375rem; - --radius-md: 0.5rem; - --radius-lg: 0.75rem; - --font-serif: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; - --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - --font-display: 'Lora', var(--font-serif); - - /* Bible Book Category Colors */ - --torah-color: #8B4513; - --historical-color: #CD853F; - --wisdom-color: #DAA520; - --major-prophets-color: #A0522D; - --minor-prophets-color: #A52A2A; - --gospels-color: #4169E1; - --acts-color: #6495ED; - --pauline-color: #1E90FF; - --general-epistles-color: #4682B4; - --apocalyptic-color: #191970; + --primary-color: #4b2e83; + --primary-light: #6d4bb3; + --primary-dark: #2f1a4f; + --accent-color: #8b5cf6; + --background-color: #0f0f0f; + --surface-color: #1a1a1a; + --text-primary: #f5f5f5; + --text-secondary: #a3a3a3; + --text-muted: #737373; + --border-color: #2a2a2a; + --border-light: #262626; + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), + 0 2px 4px -2px rgb(0 0 0 / 0.3); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), + 0 4px 6px -4px rgb(0 0 0 / 0.3); + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --font-serif: "EB Garamond", "Palatino Linotype", "Book Antiqua", Palatino, + serif; + --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; + --font-display: "Lora", var(--font-serif); + + /* Bible Book Category Colors */ + --torah-color: #8b4513; + --historical-color: #cd853f; + --wisdom-color: #daa520; + --major-prophets-color: #a0522d; + --minor-prophets-color: #a52a2a; + --gospels-color: #4169e1; + --acts-color: #6495ed; + --pauline-color: #1e90ff; + --general-epistles-color: #4682b4; + --apocalyptic-color: #191970; } * { - box-sizing: border-box; + box-sizing: border-box; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } body { -font-family: var(--font-serif); -margin: 0; -padding: 0; -background-color: var(--background-color); -color: var(--text-primary); -line-height: 1.6; -font-size: 18px; -overflow-x: hidden; --webkit-text-size-adjust: 100%; --ms-text-size-adjust: 100%; --webkit-font-smoothing: antialiased; --moz-osx-font-smoothing: grayscale; -text-rendering: optimizeLegibility; + font-family: var(--font-serif); + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--text-primary); + line-height: 1.6; + font-size: 18px; + overflow-x: hidden; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } /* Global text selection styling */ ::selection { - background: rgba(139, 92, 246, 0.4); - color: var(--text-primary); + background: rgba(139, 92, 246, 0.4); + color: var(--text-primary); } ::-moz-selection { - background: rgba(139, 92, 246, 0.4); - color: var(--text-primary); + background: rgba(139, 92, 246, 0.4); + color: var(--text-primary); } /* Prevent unwanted text selection on UI elements */ @@ -75,220 +79,226 @@ text-rendering: optimizeLegibility; .nav-button, .book-card, .verse-number { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /* Allow text selection on content */ .verse-text, .commentary-section, .outline-item, -p, li, div { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; +p, +li, +div { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; } /* Layout */ .layout { - min-height: 100vh; - display: flex; + min-height: 100vh; + display: flex; } .sidebar { - width: 220px; - background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); - color: white; - overflow-y: auto; - padding: 1.5rem 0; - box-shadow: var(--shadow-lg); - position: fixed; - height: 100vh; - z-index: 30; - transition: transform 0.3s ease; - -webkit-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - will-change: transform; - left: 0; - top: 0; + width: 220px; + background: linear-gradient( + 135deg, + var(--primary-dark) 0%, + var(--primary-color) 100% + ); + color: white; + overflow-y: auto; + padding: 1.5rem 0; + box-shadow: var(--shadow-lg); + position: fixed; + height: 100vh; + z-index: 30; + transition: transform 0.3s ease; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform; + left: 0; + top: 0; } .sidebar-header { - padding: 0 1rem 1.5rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - margin-bottom: 1rem; + padding: 0 1rem 1.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 1rem; } .sidebar-title { - font-family: var(--font-display); - font-size: 1.4rem; - font-weight: 600; - margin: 0; - color: white; - display: flex; - align-items: center; - gap: 0.5rem; + font-family: var(--font-display); + font-size: 1.4rem; + font-weight: 600; + margin: 0; + color: white; + display: flex; + align-items: center; + gap: 0.5rem; } .sidebar-subtitle { - font-size: 1rem; - color: rgba(255, 255, 255, 0.7); - margin: 0.25rem 0 0; - font-weight: 400; + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); + margin: 0.25rem 0 0; + font-weight: 400; } .sidebar-nav { - padding: 0 0.75rem; + padding: 0 0.75rem; } .sidebar-nav h3 { - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: rgba(255, 255, 255, 0.6); - margin: 1.25rem 0.5rem 0.5rem; + font-size: 0.9rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: rgba(255, 255, 255, 0.6); + margin: 1.25rem 0.5rem 0.5rem; } .sidebar-nav a { - display: block; - color: rgba(255, 255, 255, 0.8); - padding: 0.5rem 0.75rem; - text-decoration: none; - border-radius: var(--radius-sm); - margin-bottom: 0.15rem; - transition: all 0.2s ease; - font-size: 0.95rem; + display: block; + color: rgba(255, 255, 255, 0.8); + padding: 0.5rem 0.75rem; + text-decoration: none; + border-radius: var(--radius-sm); + margin-bottom: 0.15rem; + transition: all 0.2s ease; + font-size: 0.95rem; } .sidebar-nav a:hover { - background-color: rgba(255, 255, 255, 0.1); - color: white; - transform: translateX(4px); + background-color: rgba(255, 255, 255, 0.1); + color: white; + transform: translateX(4px); } .sidebar-nav a.active { - background-color: rgba(255, 255, 255, 0.15); - color: white; - font-weight: 500; + background-color: rgba(255, 255, 255, 0.15); + color: white; + font-weight: 500; } .sidebar-nav a.coming-soon { - opacity: 0.6; - cursor: not-allowed; - position: relative; + opacity: 0.6; + cursor: not-allowed; + position: relative; } .sidebar-nav a.coming-soon small { - display: block; - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.5); - margin-top: 0.25rem; + display: block; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.5); + margin-top: 0.25rem; } .sidebar-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - z-index: 35; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 35; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } .sidebar-overlay.open { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } .main-content { - flex: 1; - margin-left: 220px; - min-height: 100vh; - position: relative; - z-index: 10; - background-color: var(--background-color); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - will-change: opacity; - transition: opacity 0.3s ease; - width: calc(100% - 220px); - box-sizing: border-box; + flex: 1; + margin-left: 220px; + min-height: 100vh; + position: relative; + z-index: 10; + background-color: var(--background-color); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: opacity; + transition: opacity 0.3s ease; + width: calc(100% - 220px); + box-sizing: border-box; } .container { - max-width: 1000px; - margin: 0 auto; - padding: 3rem 2rem; - background-color: var(--background-color); - position: relative; - z-index: 1; + max-width: 1000px; + margin: 0 auto; + padding: 3rem 2rem; + background-color: var(--background-color); + position: relative; + z-index: 1; } .narrow-container { - max-width: 800px; - margin: 0 auto; - padding: 3rem 2rem; - background-color: var(--background-color); + max-width: 800px; + margin: 0 auto; + padding: 3rem 2rem; + background-color: var(--background-color); } /* Typography */ .page-title { - font-family: var(--font-display); - font-size: clamp(2.2rem, 5vw, 3.8rem); - font-weight: 600; - color: var(--primary-color); - text-align: center; - margin: 0 0 3rem; - line-height: 1.2; + font-family: var(--font-display); + font-size: clamp(2.2rem, 5vw, 3.8rem); + font-weight: 600; + color: var(--primary-color); + text-align: center; + margin: 0 0 3rem; + line-height: 1.2; } .section-title { - font-family: var(--font-display); - font-size: 1.8rem; - font-weight: 600; - color: var(--primary-color); - margin: 0 0 1.5rem; - line-height: 1.3; + font-family: var(--font-display); + font-size: 1.8rem; + font-weight: 600; + color: var(--primary-color); + margin: 0 0 1.5rem; + line-height: 1.3; } .chapter-title { - font-family: var(--font-display); - font-size: 2.8rem; - font-weight: 600; - color: var(--primary-color); - text-align: center; - margin: 0 0 3rem; - line-height: 1.2; + font-family: var(--font-display); + font-size: 2.8rem; + font-weight: 600; + color: var(--primary-color); + text-align: center; + margin: 0 0 3rem; + line-height: 1.2; } /* Cards and Components */ .card { - background: var(--surface-color); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - border: 1px solid var(--border-light); - overflow: hidden; - transition: all 0.3s ease; + background: var(--surface-color); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-light); + overflow: hidden; + transition: all 0.3s ease; } .card:hover { - box-shadow: var(--shadow-md); - transform: translateY(-2px); + box-shadow: var(--shadow-md); + transform: translateY(-2px); } .card-body { - padding: 1.5rem; + padding: 1.5rem; } /* Book Grid */ @@ -305,15 +315,15 @@ p, li, div { padding: 0.75rem; text-decoration: none; box-shadow: var(--shadow-sm); - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; border: 1px solid var(--border-color); color: var(--text-primary); position: relative; -webkit-tap-highlight-color: transparent; } - - .book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); @@ -324,7 +334,11 @@ p, li, div { .testament-divider { border: none; height: 3px; - background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%); + background: linear-gradient( + 90deg, + var(--torah-color) 0%, + var(--gospels-color) 100% + ); margin: 2rem 0; opacity: 0.7; border-radius: 1px; @@ -333,689 +347,707 @@ p, li, div { } .book-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); - transform: scaleX(0); - transition: transform 0.3s ease; + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient( + 90deg, + var(--primary-color), + var(--accent-color) + ); + transform: scaleX(0); + transition: transform 0.3s ease; } .book-card:hover::before { - transform: scaleX(1); + transform: scaleX(1); } .book-card:hover { - box-shadow: var(--shadow-md); - transform: translateY(-4px); - border-color: var(--primary-color); + box-shadow: var(--shadow-md); + transform: translateY(-4px); + border-color: var(--primary-color); } .book-title { - font-family: var(--font-display); - font-size: 1.25rem; - font-weight: 600; - color: var(--primary-color); - margin: 0; - line-height: 1.3; + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 600; + color: var(--primary-color); + margin: 0; + line-height: 1.3; } .book-meta { - margin: 0.25rem 0 0 0; - font-size: 0.8rem; - color: var(--text-secondary); - font-style: italic; - text-transform: uppercase; - letter-spacing: 0.5px; + margin: 0.25rem 0 0 0; + font-size: 0.8rem; + color: var(--text-secondary); + font-style: italic; + text-transform: uppercase; + letter-spacing: 0.5px; } /* Chapter Grid */ .chapter-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - gap: 1rem; - margin-top: 2rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); + gap: 1rem; + margin-top: 2rem; } .chapter-link { - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - background: var(--surface-color); - color: var(--primary-light); - border-radius: var(--radius-md); - text-decoration: none; - font-weight: 600; - font-size: 1.3rem; - border: 2px solid var(--border-color); - transition: all 0.2s ease; - min-height: 60px; - -webkit-tap-highlight-color: transparent; - position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: var(--surface-color); + color: var(--primary-light); + border-radius: var(--radius-md); + text-decoration: none; + font-weight: 600; + font-size: 1.3rem; + border: 2px solid var(--border-color); + transition: all 0.2s ease; + min-height: 60px; + -webkit-tap-highlight-color: transparent; + position: relative; } .chapter-link:active { - transform: scale(0.95); + transform: scale(0.95); } .chapter-link:hover { - background: var(--primary-color); - color: white; - transform: translateY(-2px); - box-shadow: var(--shadow-md); - border-color: var(--primary-light); + background: var(--primary-color); + color: white; + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--primary-light); } /* Verses */ .verses-container { - max-width: 900px; - margin: 0 auto; - padding: 2rem 1rem; - background: var(--background-color); + max-width: 900px; + margin: 0 auto; + padding: 2rem 1rem; + background: var(--background-color); } .chapter-text { - font-family: var(--font-serif); - font-size: 1.125rem; - line-height: 1.8; - color: var(--text-primary); - text-align: justify; - text-justify: inter-word; - margin: 2rem 0; - padding: 2rem; - background: var(--surface-color); - border-radius: var(--radius-lg); - border: 1px solid var(--border-color); - box-shadow: var(--shadow-sm); + font-family: var(--font-serif); + font-size: 1.125rem; + line-height: 1.8; + color: var(--text-primary); + text-align: justify; + text-justify: inter-word; + margin: 2rem 0; + padding: 2rem; + background: var(--surface-color); + border-radius: var(--radius-lg); + border: 1px solid var(--border-color); + box-shadow: var(--shadow-sm); } .chapter-text .verse { - display: inline; - position: relative; - margin: 0; - padding: 0.1rem 0.2rem; - background: transparent; - border: none; - border-radius: 3px; - transition: background-color 0.15s ease; + display: inline; + position: relative; + margin: 0; + padding: 0.1rem 0.2rem; + background: transparent; + border: none; + border-radius: 3px; + transition: background-color 0.15s ease; } .chapter-text .verse:hover { - background: rgba(139, 92, 246, 0.08); + background: rgba(139, 92, 246, 0.08); } .verse { - margin-bottom: 0.5rem; - line-height: 1.8; - font-size: 1.125rem; - position: relative; - padding: 0.25rem 0; - background: transparent; - border: none; + margin-bottom: 0.5rem; + line-height: 1.8; + font-size: 1.125rem; + position: relative; + padding: 0.25rem 0; + background: transparent; + border: none; } .verse:hover { - background: rgba(255, 255, 255, 0.02); + background: rgba(255, 255, 255, 0.02); } .verse-number { - font-size: 0.8rem !important; - color: var(--text-secondary) !important; - font-weight: normal !important; - font-family: var(--font-sans) !important; - vertical-align: super !important; - margin-right: 0.25rem !important; - position: static !important; - display: inline !important; - background: none !important; - border: none !important; - padding: 0 !important; - width: auto !important; - height: auto !important; - text-align: left !important; - min-height: auto !important; - line-height: normal !important; + font-size: 0.8rem !important; + color: var(--text-secondary) !important; + font-weight: normal !important; + font-family: var(--font-sans) !important; + vertical-align: super !important; + margin-right: 0.25rem !important; + position: static !important; + display: inline !important; + background: none !important; + border: none !important; + padding: 0 !important; + width: auto !important; + height: auto !important; + text-align: left !important; + min-height: auto !important; + line-height: normal !important; } .verse-number::before, .verse-number::after { - content: none !important; - display: none !important; + content: none !important; + display: none !important; } .verse-text { - color: var(--text-primary); - font-family: var(--font-serif); - font-size: 1.125rem; - line-height: 1.7; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; + color: var(--text-primary); + font-family: var(--font-serif); + font-size: 1.125rem; + line-height: 1.7; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; } .verse-text::selection { - background: rgba(139, 92, 246, 0.4); - color: var(--text-primary); + background: rgba(139, 92, 246, 0.4); + color: var(--text-primary); } .verse-text::-moz-selection { - background: rgba(139, 92, 246, 0.4); - color: var(--text-primary); + background: rgba(139, 92, 246, 0.4); + color: var(--text-primary); } /* Navigation */ .breadcrumb { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 2rem; - font-size: 1.2rem; - color: var(--text-secondary); + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 2rem; + font-size: 1.2rem; + color: var(--text-secondary); } .breadcrumb a { - color: var(--primary-light); - text-decoration: none; - font-size: 1.2rem; + color: var(--primary-light); + text-decoration: none; + font-size: 1.2rem; } .breadcrumb a:hover { - text-decoration: underline; + text-decoration: underline; } .breadcrumb-separator { - color: var(--text-secondary); + color: var(--text-secondary); } .navigation { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 4rem; - padding-top: 2rem; - border-top: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 4rem; + padding-top: 2rem; + border-top: 1px solid var(--border-color); } .nav-button { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.5rem; - background: var(--surface-color); - color: var(--text-primary); - text-decoration: none; - border-radius: var(--radius-md); - border: 2px solid var(--border-color); - font-weight: 500; - transition: all 0.2s ease; - font-size: 1.2rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: var(--surface-color); + color: var(--text-primary); + text-decoration: none; + border-radius: var(--radius-md); + border: 2px solid var(--border-color); + font-weight: 500; + transition: all 0.2s ease; + font-size: 1.2rem; } .nav-button:hover { - background: var(--primary-light); - color: white; - border-color: var(--primary-light); + background: var(--primary-light); + color: white; + border-color: var(--primary-light); } .nav-button-primary { - background: var(--primary-light); - color: white; - border-color: var(--primary-light); + background: var(--primary-light); + color: white; + border-color: var(--primary-light); } .nav-button-primary:hover { - background: var(--primary-dark); - border-color: var(--primary-dark); + background: var(--primary-dark); + border-color: var(--primary-dark); } /* Search */ .search-container { - position: relative; - margin-bottom: 2rem; + position: relative; + margin-bottom: 2rem; } .search-input { - width: 100%; - padding: 1rem 1rem 1rem 3rem; - font-size: 1.15rem; - border: 2px solid var(--border-color); - border-radius: var(--radius-lg); - background: var(--surface-color); - color: var(--text-primary); - transition: border-color 0.2s ease; + width: 100%; + padding: 1rem 1rem 1rem 3rem; + font-size: 1.15rem; + border: 2px solid var(--border-color); + border-radius: var(--radius-lg); + background: var(--surface-color); + color: var(--text-primary); + transition: border-color 0.2s ease; } .search-input::placeholder { - color: var(--text-muted); + color: var(--text-muted); } .search-input:focus { - outline: none; - border-color: var(--primary-color); + outline: none; + border-color: var(--primary-color); } .search-icon { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - color: var(--text-muted); + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); } /* Mobile Responsiveness */ .mobile-menu-button { - display: none; - position: fixed; - top: 1rem; - left: 1rem; - z-index: 40; - background: var(--primary-color); - color: white; - border: none; - border-radius: var(--radius-md); - padding: 0.75rem; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - touch-action: manipulation; - min-height: 48px; - min-width: 48px; - display: flex; - align-items: center; - justify-content: center; + display: none; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 40; + background: var(--primary-color); + color: white; + border: none; + border-radius: var(--radius-md); + padding: 0.75rem; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + touch-action: manipulation; + min-height: 48px; + min-width: 48px; + display: flex; + align-items: center; + justify-content: center; } /* Tablet-specific styles */ @media (min-width: 769px) and (max-width: 1024px) { - body { - font-size: 17px; - } - - .sidebar { - width: 280px; - transform: translateX(-280px); - -webkit-transform: translate3d(-280px, 0, 0); - position: fixed; - left: 0; - top: 0; - z-index: 50; - } - - .sidebar.open { - transform: translateX(0); - -webkit-transform: translate3d(0, 0, 0); - box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); - } - - .main-content { - margin-left: 0; - width: 100%; - position: relative; - z-index: 10; - background-color: var(--background-color); - padding-top: 4rem; - } - - .mobile-menu-button { - display: block; - padding: 1rem; - min-height: 52px; - min-width: 52px; - } - - .container, - .narrow-container { - padding: 2rem 1.5rem; - max-width: 95%; - } - - .page-title { - font-size: 2.5rem; - } - - .chapter-title { - font-size: 2.5rem; - } - - .book-grid { - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - gap: 1rem; - } - - .chapter-grid { - grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); - gap: 1rem; - } - - .chapter-link { - min-height: 60px; - font-size: 1.2rem; - } - - .sidebar-nav a { - padding: 0.75rem 1rem; - font-size: 1rem; - min-height: 52px; - } - - /* Special iPad handling */ - @supports (-webkit-touch-callout: none) { - .layout { - display: block; + body { + font-size: 17px; } - + .sidebar { - -webkit-transform: translate3d(-280px, 0, 0); - transform: translate3d(-280px, 0, 0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + width: 280px; + transform: translateX(-280px); + -webkit-transform: translate3d(-280px, 0, 0); + position: fixed; + left: 0; + top: 0; + z-index: 50; } - + .sidebar.open { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translateX(0); + -webkit-transform: translate3d(0, 0, 0); + box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); } - + .main-content { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - margin-left: 0 !important; - width: 100% !important; + margin-left: 0; + width: 100%; + position: relative; + z-index: 10; + background-color: var(--background-color); + padding-top: 4rem; + } + + .mobile-menu-button { + display: block; + padding: 1rem; + min-height: 52px; + min-width: 52px; + } + + .container, + .narrow-container { + padding: 2rem 1.5rem; + max-width: 95%; + } + + .page-title { + font-size: 2.5rem; + } + + .chapter-title { + font-size: 2.5rem; + } + + .book-grid { + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 1rem; + } + + .chapter-grid { + grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); + gap: 1rem; + } + + .chapter-link { + min-height: 60px; + font-size: 1.2rem; + } + + .sidebar-nav a { + padding: 0.75rem 1rem; + font-size: 1rem; + min-height: 52px; + } + + /* Special iPad handling */ + @supports (-webkit-touch-callout: none) { + .layout { + display: block; + } + + .sidebar { + -webkit-transform: translate3d(-280px, 0, 0); + transform: translate3d(-280px, 0, 0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + } + + .sidebar.open { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + .main-content { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + margin-left: 0 !important; + width: 100% !important; + } } - } } /* Mobile styles */ @media (max-width: 768px) { - body { - font-size: 16px; - } + body { + font-size: 16px; + } - .sidebar { - transform: translateX(-320px); - width: 100%; - max-width: 320px; - -webkit-transform: translate3d(-320px, 0, 0); - } + .sidebar { + transform: translateX(-320px); + width: 100%; + max-width: 320px; + -webkit-transform: translate3d(-320px, 0, 0); + } - .sidebar.open { - transform: translateX(0); - -webkit-transform: translate3d(0, 0, 0); - box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); - } + .sidebar.open { + transform: translateX(0); + -webkit-transform: translate3d(0, 0, 0); + box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); + } - .main-content { - margin-left: 0; - padding-top: 4rem; - position: relative; - z-index: 10; - width: 100%; - } + .main-content { + margin-left: 0; + padding-top: 4rem; + position: relative; + z-index: 10; + width: 100%; + } - .mobile-menu-button { - display: block; - padding: 1rem; - min-height: 48px; - min-width: 48px; - touch-action: manipulation; - } + .mobile-menu-button { + display: block; + padding: 1rem; + min-height: 48px; + min-width: 48px; + touch-action: manipulation; + } - .container, - .narrow-container { - padding: 1.5rem 1rem; - max-width: 100%; - } + .container, + .narrow-container { + padding: 1.5rem 1rem; + max-width: 100%; + } - .page-title { - font-size: 1.75rem; - margin-bottom: 1.5rem; - line-height: 1.3; - padding: 0 0.5rem; - } + .page-title { + font-size: 1.75rem; + margin-bottom: 1.5rem; + line-height: 1.3; + padding: 0 0.5rem; + } - .chapter-title { - font-size: 1.75rem; - margin-bottom: 1.5rem; - line-height: 1.3; - padding: 0 0.5rem; - } + .chapter-title { + font-size: 1.75rem; + margin-bottom: 1.5rem; + line-height: 1.3; + padding: 0 0.5rem; + } - .section-title { - font-size: 1.5rem; - margin-bottom: 1rem; - } + .section-title { + font-size: 1.5rem; + margin-bottom: 1rem; + } - .book-grid { - grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); - gap: 0.75rem; - padding: 0 0.25rem; - } + .book-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 0.75rem; + padding: 0 0.25rem; + } - .book-card { - padding: 1rem 0.75rem; - min-height: 80px; - touch-action: manipulation; - } + .book-card { + padding: 1rem 0.75rem; + min-height: 80px; + touch-action: manipulation; + } - .book-card:active { - transform: scale(0.98); - background: var(--border-light); - } + .book-card:active { + transform: scale(0.98); + background: var(--border-light); + } - .book-title { - font-size: 1.1rem; - line-height: 1.2; - } + .book-title { + font-size: 1.1rem; + line-height: 1.2; + } - .book-meta { - font-size: 0.75rem; - margin-top: 0.5rem; - } + .book-meta { + font-size: 0.75rem; + margin-top: 0.5rem; + } - .chapter-grid { - grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); - gap: 0.5rem; - padding: 0 0.25rem; - } + .chapter-grid { + grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + gap: 0.5rem; + padding: 0 0.25rem; + } - .chapter-link { - padding: 1rem 0.5rem; - font-size: 1rem; - min-height: 56px; - touch-action: manipulation; - } + .chapter-link { + padding: 1rem 0.5rem; + font-size: 1rem; + min-height: 56px; + touch-action: manipulation; + } - .chapter-link:active { - transform: scale(0.95); - background: var(--primary-light); - color: white; - } + .chapter-link:active { + transform: scale(0.95); + background: var(--primary-light); + color: white; + } - .verse { - font-size: 1rem; - padding: 0.25rem 0; - margin-bottom: 0.5rem; - line-height: 1.7; - } + .verse { + font-size: 1rem; + padding: 0.25rem 0; + margin-bottom: 0.5rem; + line-height: 1.7; + } - .verse-number { - font-size: 0.75rem !important; - vertical-align: super !important; - display: inline !important; - } + .verse-number { + font-size: 0.75rem !important; + vertical-align: super !important; + display: inline !important; + } - .verse-text { - font-size: 1rem; - line-height: 1.6; - } + .verse-text { + font-size: 1rem; + line-height: 1.6; + } - .navigation { - flex-direction: column; - gap: 1rem; - margin-top: 3rem; - } + .navigation { + flex-direction: column; + gap: 1rem; + margin-top: 3rem; + } - .nav-button { - padding: 1rem 1.5rem; - font-size: 1rem; - min-height: 48px; - touch-action: manipulation; - text-align: center; - justify-content: center; - } + .nav-button { + padding: 1rem 1.5rem; + font-size: 1rem; + min-height: 48px; + touch-action: manipulation; + text-align: center; + justify-content: center; + } - .nav-button:active { - transform: scale(0.98); - background: var(--primary-dark); - } + .nav-button:active { + transform: scale(0.98); + background: var(--primary-dark); + } - .sidebar-nav { - max-height: calc(100vh - 200px); - overflow-y: auto; - -webkit-overflow-scrolling: touch; - padding: 0 0.5rem; - } + .sidebar-nav { + max-height: calc(100vh - 200px); + overflow-y: auto; + -webkit-overflow-scrolling: touch; + padding: 0 0.5rem; + } - .sidebar-nav a { - padding: 0.75rem 1rem; - font-size: 1rem; - min-height: 48px; - display: flex; - align-items: center; - touch-action: manipulation; - } + .sidebar-nav a { + padding: 0.75rem 1rem; + font-size: 1rem; + min-height: 48px; + display: flex; + align-items: center; + touch-action: manipulation; + } - .sidebar-nav a:active { - background-color: rgba(255, 255, 255, 0.2); - transform: scale(0.98); - } + .sidebar-nav a:active { + background-color: rgba(255, 255, 255, 0.2); + transform: scale(0.98); + } - .breadcrumb { - font-size: 1rem; - margin-bottom: 1.5rem; - flex-wrap: wrap; - gap: 0.25rem 0.5rem; - } + .breadcrumb { + font-size: 1rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; + gap: 0.25rem 0.5rem; + } - .breadcrumb a { - font-size: 1rem; - } + .breadcrumb a { + font-size: 1rem; + } - .search-input { - font-size: 16px; - padding: 1rem; - } + .search-input { + font-size: 16px; + padding: 1rem; + } - /* Better spacing for mobile content */ - .verses-container { - padding: 1rem 0.5rem; - margin: 0 auto; - } + /* Better spacing for mobile content */ + .verses-container { + padding: 1rem 0.5rem; + margin: 0 auto; + } - .chapter-text { - font-size: 1rem; - line-height: 1.7; - padding: 1rem; - text-align: left; - margin: 1rem 0; - } + .chapter-text { + font-size: 1rem; + line-height: 1.7; + padding: 1rem; + text-align: left; + margin: 1rem 0; + } - /* Improve touch targets for all interactive elements */ - a, button, input, select, textarea { - touch-action: manipulation; - } + /* Improve touch targets for all interactive elements */ + a, + button, + input, + select, + textarea { + touch-action: manipulation; + } - /* Prevent zoom on form inputs */ - input[type="text"], - input[type="search"], - textarea { - font-size: 16px; - -webkit-appearance: none; - border-radius: var(--radius-md); - } + /* Prevent zoom on form inputs */ + input[type="text"], + input[type="search"], + textarea { + font-size: 16px; + -webkit-appearance: none; + border-radius: var(--radius-md); + } - /* Improve readability on mobile */ - p, li { - font-size: 1rem; - line-height: 1.65; - } + /* Improve readability on mobile */ + p, + li { + font-size: 1rem; + line-height: 1.65; + } - h1, h2, h3, h4, h5, h6 { - line-height: 1.3; - font-weight: 600; - } + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.3; + font-weight: 600; + } } /* Utilities */ .text-center { - text-align: center; + text-align: center; } .text-muted { - color: var(--text-muted); + color: var(--text-muted); } .mb-4 { - margin-bottom: 2rem; + margin-bottom: 2rem; } .mt-4 { - margin-top: 2rem; + margin-top: 2rem; } .hidden { - display: none; + display: none; } /* Loading and States */ .loading { - display: flex; - align-items: center; - justify-content: center; - padding: 3rem; - color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + padding: 3rem; + color: var(--text-muted); } .spinner { - width: 24px; - height: 24px; - border: 3px solid var(--border-color); - border-top: 3px solid var(--primary-color); - border-radius: 50%; - animation: spin 1s linear infinite; - margin-right: 0.75rem; + width: 24px; + height: 24px; + border: 3px solid var(--border-color); + border-top: 3px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin-right: 0.75rem; } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } /* Fix for background issues in all browsers */ -body, -html, -.layout, +body, +html, +.layout, .main-content { - min-height: 100vh; - background-color: var(--background-color) !important; - position: relative; + min-height: 100vh; + background-color: var(--background-color) !important; + position: relative; } /* Ensure background color extends to the end of the page */ .layout::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 100%; - background-color: var(--background-color) !important; - z-index: -1; + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 100%; + background-color: var(--background-color) !important; + z-index: -1; } .commentary-container, @@ -1023,552 +1055,552 @@ html, .commentary-content, .container, .narrow-container { - background-color: var(--background-color) !important; - position: relative; - z-index: 1; - font-size: 1.2rem; + background-color: var(--background-color) !important; + position: relative; + z-index: 1; + font-size: 1.2rem; } /* Add additional background fixes */ -.verse-card, +.verse-card, .verse-text, .chapter-overview, .commentary-header, .commentary-meta { - position: relative; - z-index: 2; - background-color: var(--surface-color); + position: relative; + z-index: 2; + background-color: var(--surface-color); } .commentary-section { - background-color: var(--surface-color); + background-color: var(--surface-color); } .tab-content { - background-color: var(--surface-color); + background-color: var(--surface-color); } /* Additional mobile optimizations */ @media (max-width: 480px) { - .page-title { - font-size: 1.5rem; - margin-bottom: 1rem; - } + .page-title { + font-size: 1.5rem; + margin-bottom: 1rem; + } - .chapter-title { - font-size: 1.5rem; - margin-bottom: 1rem; - } + .chapter-title { + font-size: 1.5rem; + margin-bottom: 1rem; + } - .container, - .narrow-container { - padding: 1rem 0.75rem; - } + .container, + .narrow-container { + padding: 1rem 0.75rem; + } - .book-grid { - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 0.5rem; - } + .book-grid { + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 0.5rem; + } - .book-card { - padding: 0.75rem 0.5rem; - min-height: 70px; - } + .book-card { + padding: 0.75rem 0.5rem; + min-height: 70px; + } - .book-title { - font-size: 1rem; - } + .book-title { + font-size: 1rem; + } - .chapter-grid { - grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); - gap: 0.5rem; - } + .chapter-grid { + grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); + gap: 0.5rem; + } - .chapter-link { - padding: 0.75rem 0.25rem; - font-size: 0.9rem; - min-height: 48px; - } + .chapter-link { + padding: 0.75rem 0.25rem; + font-size: 0.9rem; + min-height: 48px; + } - .chapter-link:active { - background: var(--primary-color); - color: white; - } + .chapter-link:active { + background: var(--primary-color); + color: white; + } - .verse { - padding: 0.25rem 0; - font-size: 0.95rem; - } + .verse { + padding: 0.25rem 0; + font-size: 0.95rem; + } - .verse-number { - font-size: 0.7rem !important; - vertical-align: super !important; - display: inline !important; - } + .verse-number { + font-size: 0.7rem !important; + vertical-align: super !important; + display: inline !important; + } - .verse-text { - font-size: 0.95rem; - line-height: 1.5; - } + .verse-text { + font-size: 0.95rem; + line-height: 1.5; + } - .sidebar-nav { - padding: 0 0.25rem; - } + .sidebar-nav { + padding: 0 0.25rem; + } - .sidebar-nav a { - padding: 0.6rem 0.75rem; - font-size: 0.95rem; - min-height: 44px; - } + .sidebar-nav a { + padding: 0.6rem 0.75rem; + font-size: 0.95rem; + min-height: 44px; + } - .nav-button { - padding: 0.875rem 1.25rem; - font-size: 0.95rem; - min-height: 44px; - } + .nav-button { + padding: 0.875rem 1.25rem; + font-size: 0.95rem; + min-height: 44px; + } - .nav-button:active { - background: var(--primary-dark); - transform: scale(0.97); - } + .nav-button:active { + background: var(--primary-dark); + transform: scale(0.97); + } } /* Force dark theme always - no media query */ /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } } /* Commentary and Outline Styles */ .commentary-container { - background-color: var(--background-color); - min-height: 100vh; - margin-left: 220px; - width: calc(100% - 220px); - padding: 2rem; - box-sizing: border-box; + background-color: var(--background-color); + min-height: 100vh; + margin-left: 220px; + width: calc(100% - 220px); + padding: 2rem; + box-sizing: border-box; } /* Commentary-specific container overrides */ .commentary-container .container { - margin-left: 0 !important; - width: 100% !important; - max-width: none; + margin-left: 0 !important; + width: 100% !important; + max-width: none; } .commentary-breadcrumb { - margin-left: 220px; - width: calc(100% - 220px); - box-sizing: border-box; + margin-left: 220px; + width: calc(100% - 220px); + box-sizing: border-box; } .commentary-navigation { - margin-left: 220px; - width: calc(100% - 220px); - box-sizing: border-box; + margin-left: 220px; + width: calc(100% - 220px); + box-sizing: border-box; } .commentary-header { - text-align: center; - margin-bottom: 3rem; - padding: 2rem 1rem; - background: var(--surface-color); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - border: 1px solid var(--border-color); + text-align: center; + margin-bottom: 3rem; + padding: 2rem 1rem; + background: var(--surface-color); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); } .commentary-header h1 { - font-family: var(--font-display); - font-size: 2.5rem; - color: var(--primary-color); - margin: 0 0 1rem; + font-family: var(--font-display); + font-size: 2.5rem; + color: var(--primary-color); + margin: 0 0 1rem; } .commentary-header p { - font-size: 1.2rem; - color: var(--text-secondary); - margin: 0 0 1.5rem; + font-size: 1.2rem; + color: var(--text-secondary); + margin: 0 0 1.5rem; } .book-meta { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 1rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; } .book-meta-item { - background: var(--primary-color); - color: white; - padding: 0.5rem 1rem; - border-radius: var(--radius-md); - font-size: 0.9rem; - font-weight: 500; - border: 1px solid var(--primary-light); + background: var(--primary-color); + color: white; + padding: 0.5rem 1rem; + border-radius: var(--radius-md); + font-size: 0.9rem; + font-weight: 500; + border: 1px solid var(--primary-light); } .commentary-section { - background: var(--surface-color); - margin-bottom: 2rem; - padding: 2rem; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - border: 1px solid var(--border-color); + background: var(--surface-color); + margin-bottom: 2rem; + padding: 2rem; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); } .commentary-section h2 { - font-family: var(--font-display); - font-size: 1.8rem; - color: var(--primary-color); - margin: 0 0 1.5rem; - border-bottom: 2px solid var(--border-light); - padding-bottom: 0.5rem; + font-family: var(--font-display); + font-size: 1.8rem; + color: var(--primary-color); + margin: 0 0 1.5rem; + border-bottom: 2px solid var(--border-light); + padding-bottom: 0.5rem; } .outline-section { - margin-bottom: 2rem; + margin-bottom: 2rem; } .outline-title { - font-family: var(--font-display); - font-size: 1.4rem; - color: var(--text-primary); - margin: 0 0 1rem; - padding: 0.75rem 1rem; - background: var(--border-light); - border-radius: var(--radius-md); - border: 1px solid var(--border-color); + font-family: var(--font-display); + font-size: 1.4rem; + color: var(--text-primary); + margin: 0 0 1rem; + padding: 0.75rem 1rem; + background: var(--border-light); + border-radius: var(--radius-md); + border: 1px solid var(--border-color); } .outline-list { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } .outline-item { - padding: 0.75rem 1rem; - margin-bottom: 0.5rem; - background: var(--background-color); - border-radius: var(--radius-sm); - border-left: 4px solid var(--accent-color); - line-height: 1.6; + padding: 0.75rem 1rem; + margin-bottom: 0.5rem; + background: var(--background-color); + border-radius: var(--radius-sm); + border-left: 4px solid var(--accent-color); + line-height: 1.6; } .outline-nested { - list-style: none; - padding: 0; - margin: 1rem 0 0 1rem; + list-style: none; + padding: 0; + margin: 1rem 0 0 1rem; } .outline-nested .outline-item { - border-left-color: var(--text-muted); - font-size: 0.95rem; + border-left-color: var(--text-muted); + font-size: 0.95rem; } .verse-reference { - color: var(--primary-color); - text-decoration: none; - font-weight: 500; - position: relative; + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + position: relative; } .verse-reference:hover { - text-decoration: underline; + text-decoration: underline; } .verse-tooltip { - display: none; - position: absolute; - background: var(--text-primary); - color: white; - padding: 0.75rem 1rem; - border-radius: var(--radius-sm); - font-size: 0.9rem; - max-width: 400px; - min-width: 300px; - z-index: 100; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - line-height: 1.5; - white-space: normal; - word-wrap: break-word; + display: none; + position: absolute; + background: var(--text-primary); + color: white; + padding: 0.75rem 1rem; + border-radius: var(--radius-sm); + font-size: 0.9rem; + max-width: 400px; + min-width: 300px; + z-index: 100; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + line-height: 1.5; + white-space: normal; + word-wrap: break-word; } .verse-reference:hover .verse-tooltip { - display: block; + display: block; } .tags-container { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; } .tag { - background: var(--accent-color); - color: white; - padding: 0.25rem 0.75rem; - border-radius: var(--radius-md); - font-size: 0.85rem; - font-weight: 500; - border: 1px solid rgba(139, 92, 246, 0.3); + background: var(--accent-color); + color: white; + padding: 0.25rem 0.75rem; + border-radius: var(--radius-md); + font-size: 0.85rem; + font-weight: 500; + border: 1px solid rgba(139, 92, 246, 0.3); } .two-column { - display: grid; - grid-template-columns: 1fr 300px; - gap: 2rem; - align-items: start; + display: grid; + grid-template-columns: 1fr 300px; + gap: 2rem; + align-items: start; } .main-content { - min-width: 0; + min-width: 0; } .toc-sidebar { - position: sticky; - top: 2rem; - background: var(--surface-color); - border-radius: var(--radius-lg); - padding: 1.5rem; - box-shadow: var(--shadow-sm); - border: 1px solid var(--border-color); + position: sticky; + top: 2rem; + background: var(--surface-color); + border-radius: var(--radius-lg); + padding: 1.5rem; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); } .toc-title { - font-family: var(--font-display); - font-size: 1.2rem; - color: var(--primary-color); - margin: 0 0 1rem; + font-family: var(--font-display); + font-size: 1.2rem; + color: var(--primary-color); + margin: 0 0 1rem; } .toc-list { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } .toc-item { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } .toc-link { - display: block; - padding: 0.5rem 0.75rem; - color: var(--text-secondary); - text-decoration: none; - border-radius: var(--radius-sm); - transition: all 0.2s ease; + display: block; + padding: 0.5rem 0.75rem; + color: var(--text-secondary); + text-decoration: none; + border-radius: var(--radius-sm); + transition: all 0.2s ease; } .toc-link:hover { - background: var(--border-light); - color: var(--primary-color); - transform: translateX(4px); + background: var(--border-light); + color: var(--primary-color); + transform: translateX(4px); } /* Mobile styles for commentary */ @media (max-width: 768px) { - .commentary-container { - margin-left: 0 !important; - width: 100% !important; - padding: 1rem; - } + .commentary-container { + margin-left: 0 !important; + width: 100% !important; + padding: 1rem; + } - .commentary-breadcrumb, - .commentary-navigation { - margin-left: 0 !important; - width: 100% !important; - } + .commentary-breadcrumb, + .commentary-navigation { + margin-left: 0 !important; + width: 100% !important; + } - .commentary-header { - padding: 1.5rem 1rem; - margin-bottom: 2rem; - } + .commentary-header { + padding: 1.5rem 1rem; + margin-bottom: 2rem; + } - .commentary-header h1 { - font-size: 2rem; - } + .commentary-header h1 { + font-size: 2rem; + } - .commentary-header p { - font-size: 1rem; - } + .commentary-header p { + font-size: 1rem; + } - .book-meta { - gap: 0.5rem; - } + .book-meta { + gap: 0.5rem; + } - .book-meta-item { - font-size: 0.8rem; - padding: 0.4rem 0.8rem; - } + .book-meta-item { + font-size: 0.8rem; + padding: 0.4rem 0.8rem; + } - .commentary-section { - padding: 1.5rem 1rem; - margin-bottom: 1.5rem; - } + .commentary-section { + padding: 1.5rem 1rem; + margin-bottom: 1.5rem; + } - .commentary-section h2 { - font-size: 1.5rem; - margin-bottom: 1rem; - } + .commentary-section h2 { + font-size: 1.5rem; + margin-bottom: 1rem; + } - .outline-title { - font-size: 1.2rem; - padding: 0.6rem 1rem; - } + .outline-title { + font-size: 1.2rem; + padding: 0.6rem 1rem; + } - .outline-item { - padding: 0.6rem 0.8rem; - margin-bottom: 0.4rem; - font-size: 0.95rem; - } + .outline-item { + padding: 0.6rem 0.8rem; + margin-bottom: 0.4rem; + font-size: 0.95rem; + } - .outline-nested { - margin-left: 0.5rem; - } + .outline-nested { + margin-left: 0.5rem; + } - .outline-nested .outline-item { - font-size: 0.9rem; - padding: 0.5rem 0.7rem; - } + .outline-nested .outline-item { + font-size: 0.9rem; + padding: 0.5rem 0.7rem; + } - .two-column { - grid-template-columns: 1fr; - gap: 1.5rem; - } + .two-column { + grid-template-columns: 1fr; + gap: 1.5rem; + } - .toc-sidebar { - order: -1; - position: static; - padding: 1rem; - } + .toc-sidebar { + order: -1; + position: static; + padding: 1rem; + } - .toc-title { - font-size: 1.1rem; - } + .toc-title { + font-size: 1.1rem; + } - .toc-link { - padding: 0.6rem 0.8rem; - font-size: 0.95rem; - } + .toc-link { + padding: 0.6rem 0.8rem; + font-size: 0.95rem; + } - .verse-tooltip { - position: fixed; - bottom: 2rem; - left: 1rem; - right: 1rem; - transform: none; - max-width: none; - min-width: auto; - padding: 1rem; - font-size: 1rem; - z-index: 1001; - } + .verse-tooltip { + position: fixed; + bottom: 2rem; + left: 1rem; + right: 1rem; + transform: none; + max-width: none; + min-width: auto; + padding: 1rem; + font-size: 1rem; + z-index: 1001; + } } /* Tablet responsive tooltips */ @media (min-width: 769px) and (max-width: 1024px) { - .commentary-container { - margin-left: 0 !important; - width: 100% !important; - padding: 1.5rem; - } + .commentary-container { + margin-left: 0 !important; + width: 100% !important; + padding: 1.5rem; + } - .commentary-breadcrumb, - .commentary-navigation { - margin-left: 0 !important; - width: 100% !important; - } + .commentary-breadcrumb, + .commentary-navigation { + margin-left: 0 !important; + width: 100% !important; + } - .verse-tooltip { - max-width: 380px; - min-width: 280px; - font-size: 0.875rem; - } + .verse-tooltip { + max-width: 380px; + min-width: 280px; + font-size: 0.875rem; + } } /* Large screen tooltips */ @media (min-width: 1200px) { - .verse-tooltip { - max-width: 500px; - min-width: 400px; - font-size: 0.95rem; - padding: 1rem 1.25rem; - } + .verse-tooltip { + max-width: 500px; + min-width: 400px; + font-size: 0.95rem; + padding: 1rem 1.25rem; + } - .commentary-container { - margin-left: 240px; - width: calc(100% - 260px); - padding: 3rem; - max-width: 1400px; - } + .commentary-container { + margin-left: 240px; + width: calc(100% - 260px); + padding: 3rem; + max-width: 1400px; + } - .commentary-breadcrumb, - .commentary-navigation { - margin-left: 240px; - width: calc(100% - 260px); - max-width: 1400px; - } + .commentary-breadcrumb, + .commentary-navigation { + margin-left: 240px; + width: calc(100% - 260px); + max-width: 1400px; + } } @media (max-width: 480px) { - .commentary-header { - padding: 1rem 0.75rem; - } + .commentary-header { + padding: 1rem 0.75rem; + } - .commentary-header h1 { - font-size: 1.75rem; - } + .commentary-header h1 { + font-size: 1.75rem; + } - .commentary-section { - padding: 1rem 0.75rem; - } + .commentary-section { + padding: 1rem 0.75rem; + } - .commentary-section h2 { - font-size: 1.3rem; - } + .commentary-section h2 { + font-size: 1.3rem; + } - .outline-title { - font-size: 1.1rem; - padding: 0.5rem 0.75rem; - } + .outline-title { + font-size: 1.1rem; + padding: 0.5rem 0.75rem; + } - .outline-item { - padding: 0.5rem 0.6rem; - font-size: 0.9rem; - } + .outline-item { + padding: 0.5rem 0.6rem; + font-size: 0.9rem; + } - .outline-nested .outline-item { - font-size: 0.85rem; - padding: 0.4rem 0.6rem; - } + .outline-nested .outline-item { + font-size: 0.85rem; + padding: 0.4rem 0.6rem; + } - .book-meta-item { - font-size: 0.75rem; - padding: 0.3rem 0.6rem; - } + .book-meta-item { + font-size: 0.75rem; + padding: 0.3rem 0.6rem; + } - .tag { - font-size: 0.8rem; - padding: 0.2rem 0.6rem; - } + .tag { + font-size: 0.8rem; + padding: 0.2rem 0.6rem; + } } /* High contrast mode support */ @media (prefers-contrast: high) { - :root { - --border-color: #000; - --border-light: #333; - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3); - } -} \ No newline at end of file + :root { + --border-color: #000; + --border-light: #333; + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3); + } +} diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index 70616e6..3912f7c 100644 --- a/kjvstudy_org/templates/base.html +++ b/kjvstudy_org/templates/base.html @@ -1,765 +1,1154 @@ - - - - - - - - - - - - - {% block title %}Authorized King James Version (KJV) Bible Study - KJV Study{% endblock %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% block head %}{% endblock %} - - - - -
- - - - - - View on GitHub - + .github-banner:hover svg { + transform: rotate(360deg); + } -
- - + .github-banner svg { + width: 16px; + height: 16px; + fill: currentColor; + transition: transform 0.3s ease; + } - -
- {% block breadcrumb %}{% endblock %} - -
- {% block content %}{% endblock %} -
- - {% block navigation %}{% endblock %} -
-
- - - - - + + + + + + + + + + + + + + + + + + {% block head %}{% endblock %} + + + + +
+ + + + + + + View on GitHub + + +
+ + + + +
+ {% block breadcrumb %}{% endblock %} + +
+ {% block content %}{% endblock %} +
+ + {% block navigation %}{% endblock %} +
+
+ + + + + - {% block scripts %}{% endblock %} - - \ No newline at end of file + // Handle window resize + window.addEventListener("resize", function () { + if (window.innerWidth > 768) { + const sidebar = document.getElementById("sidebar"); + const overlay = + document.getElementById("sidebarOverlay"); + sidebar.classList.remove("open"); + overlay.classList.remove("open"); + document.body.style.overflow = ""; + } + }); + }); + + // Mobile performance optimizations + document.addEventListener("DOMContentLoaded", function () { + // Add passive event listeners for better scroll performance + let ticking = false; + + function updateScrollPos() { + // Throttle scroll events for better performance + ticking = false; + } + + window.addEventListener( + "scroll", + function () { + if (!ticking) { + requestAnimationFrame(updateScrollPos); + ticking = true; + } + }, + { passive: true }, + ); + + // Add touch feedback for interactive elements on mobile + if ("ontouchstart" in window) { + const interactiveElements = document.querySelectorAll( + ".book-card, .chapter-link, .nav-button, .sidebar-nav a", + ); + + interactiveElements.forEach((element) => { + element.addEventListener( + "touchstart", + function () { + this.style.opacity = "0.8"; + }, + { passive: true }, + ); + + element.addEventListener( + "touchend", + function () { + setTimeout(() => { + this.style.opacity = ""; + }, 150); + }, + { passive: true }, + ); + + element.addEventListener( + "touchcancel", + function () { + this.style.opacity = ""; + }, + { passive: true }, + ); + }); + } + + // Improve mobile menu performance + const sidebar = document.getElementById("sidebar"); + const overlay = document.getElementById("sidebarOverlay"); + + if (sidebar && overlay) { + // Use transform3d for hardware acceleration + sidebar.style.willChange = "transform"; + overlay.style.willChange = "opacity"; + } + }); + + // Smooth scrolling for anchor links + document.addEventListener("DOMContentLoaded", function () { + const links = document.querySelectorAll('a[href^="#"]'); + links.forEach((link) => { + link.addEventListener("click", function (e) { + e.preventDefault(); + const target = document.querySelector( + this.getAttribute("href"), + ); + if (target) { + // Close mobile menu if open when navigating + if (window.innerWidth <= 768) { + const sidebar = + document.getElementById("sidebar"); + if ( + sidebar && + sidebar.classList.contains("open") + ) { + toggleSidebar(); + } + } + + target.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + } + }); + }); + }); + + + {% block scripts %}{% endblock %} + + diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html index f996600..55d8e77 100644 --- a/kjvstudy_org/templates/chapter.html +++ b/kjvstudy_org/templates/chapter.html @@ -56,94 +56,34 @@ border-color: var(--primary-color); } -.verse-number { - /* Complete CSS reset for verse numbers */ - all: unset !important; +sup.verse-number { font-size: 0.8rem !important; font-weight: normal !important; color: var(--text-secondary) !important; - vertical-align: super !important; margin-right: 0.25rem !important; user-select: none !important; cursor: pointer !important; - display: inline !important; font-family: var(--font-sans) !important; - background: transparent !important; - border: none !important; - padding: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; - margin-left: 0 !important; - width: auto !important; - height: auto !important; - text-align: left !important; - min-height: auto !important; - max-height: auto !important; - min-width: auto !important; - max-width: auto !important; - line-height: normal !important; - text-transform: none !important; - text-decoration: none !important; - letter-spacing: normal !important; - word-spacing: normal !important; - white-space: normal !important; - box-sizing: content-box !important; - position: static !important; - top: auto !important; - left: auto !important; - right: auto !important; - bottom: auto !important; - z-index: auto !important; - float: none !important; - clear: none !important; - overflow: visible !important; - clip: auto !important; - opacity: 1 !important; - visibility: visible !important; - transform: none !important; - animation: none !important; - transition: none !important; - box-shadow: none !important; - outline: none !important; - border-radius: 0 !important; -} - -.verse-number::before, -.verse-number::after { - content: none !important; - display: none !important; -} - -/* Prevent any heading styles from applying */ -h1 .verse-number, -h2 .verse-number, -h3 .verse-number, -h4 .verse-number, -h5 .verse-number, -h6 .verse-number { - all: unset !important; - font-size: 0.8rem !important; - font-weight: normal !important; - color: var(--text-secondary) !important; + line-height: 1 !important; vertical-align: super !important; - margin-right: 0.25rem !important; - display: inline !important; - font-family: var(--font-sans) !important; } -.verse-number:hover { - color: var(--text-primary); - text-decoration: none; +sup.verse-number:hover { + color: var(--text-primary) !important; } -.highlight-verse { +.highlight-verse, +.verse-highlight { + background-color: rgba(255, 235, 59, 0.3) !important; + padding: 0.1rem 0.2rem !important; + border-radius: 3px !important; animation: pulse-highlight 2s ease; } @keyframes pulse-highlight { 0% { background-color: transparent; } 30% { background-color: rgba(255, 235, 59, 0.5); } - 100% { background-color: transparent; } + 100% { background-color: rgba(255, 235, 59, 0.3); } } .chapter-navigation { @@ -221,7 +161,7 @@ h6 .verse-number { font-size: 1.5rem; line-height: 1.8; color: var(--text-primary); - font-feature-settings: + font-feature-settings: "liga" 1, "dlig" 1, "kern" 1, @@ -331,7 +271,7 @@ h6 .verse-number { font-size: 1.1rem; line-height: 1.8; } - + .verse-number { font-size: 0.75rem; } @@ -351,32 +291,11 @@ h6 .verse-number { border: 1px solid var(--border-color); } -.chapter-text .verse { - display: inline !important; - position: relative; - margin: 0 !important; - padding: 0 !important; - background: transparent !important; - border: none !important; - font-size: inherit !important; - line-height: inherit !important; -} - -.chapter-text .verse .verse-number { +.chapter-text sup.verse-number { font-size: 0.75rem !important; - vertical-align: super !important; margin-right: 0.2rem !important; } -.chapter-text .verse:hover { - background: rgba(139, 92, 246, 0.1); - border-radius: 3px; -} - -.chapter-text .verse:hover .verse-tools { - opacity: 1; -} - @media (max-width: 768px) { .chapter-text { font-size: 1rem; @@ -384,26 +303,9 @@ h6 .verse-number { padding: 0.75rem; text-align: left; } - - .chapter-text .verse .verse-number { - all: unset !important; + + .chapter-text sup.verse-number { font-size: 0.7rem !important; - font-weight: normal !important; - color: var(--text-secondary) !important; - vertical-align: super !important; - margin-right: 0.2rem !important; - display: inline !important; - font-family: var(--font-sans) !important; - } - - .verse-tools { - display: none; - } - - .verse-tool { - width: 16px; - height: 16px; - font-size: 9px; } } @@ -471,17 +373,7 @@ h6 .verse-number {
{% for verse in verses %} - {{ verse.verse }}{{ verse.text }} - - 🔗 - - - 📝 - - - ✨ - - {% if not loop.last %} {% endif %} + {{ verse.verse }}{{ verse.text }}{% if not loop.last %} {% endif %} {% endfor %}
@@ -506,7 +398,7 @@ h6 .verse-number { Seven Churches

- Explore our detailed verse-by-verse analysis of Revelation 1, featuring historical context from the late first century CE, + Explore our detailed verse-by-verse analysis of Revelation 1, featuring historical context from the late first century CE, theological insights on apocalyptic literature, and cross-references to Old Testament prophetic visions.

@@ -522,7 +414,7 @@ h6 .verse-number {
{% else %}

- Explore verse-by-verse analysis with historical context, theological insights, + Explore verse-by-verse analysis with historical context, theological insights, and cross-references for {{ book }} {{ chapter }} from the Authorized King James Version (KJV).

{% endif %} @@ -541,7 +433,7 @@ h6 .verse-number {

AI Commentary on {{ book }} {{ chapter }}

- +

@@ -551,11 +443,11 @@ h6 .verse-number { {{ chapter_overview|safe if chapter_overview else "Chapter overview is not available." }}

- + {% if commentaries %}

Verse-by-Verse Commentary

- + {% for verse in verses %} {% if verse.verse in commentaries %}
@@ -569,11 +461,11 @@ h6 .verse-number { View in Full Commentary
- +
{{ verse.text }}
- +
- +
{{ commentaries[verse.verse].analysis|safe }} - + {% if commentaries[verse.verse].cross_references %}
Cross References:
@@ -605,11 +497,11 @@ h6 .verse-number {
{% endif %}
- + - + {% endif %} {% endfor %} - + {% else %}

Commentary is still loading or not available for this chapter.

@@ -698,10 +590,9 @@ function addNote(verseNumber) { function highlightVerse(verseNumber) { const verse = document.getElementById('verse-' + verseNumber); - const verseText = verse.querySelector('.verse-text'); - verseText.classList.toggle('verse-highlight'); - - const highlighted = verseText.classList.contains('verse-highlight'); + verse.classList.toggle('verse-highlight'); + + const highlighted = verse.classList.contains('verse-highlight'); showToast(highlighted ? 'Verse ' + verseNumber + ' highlighted!' : 'Highlight removed from Verse ' + verseNumber); } @@ -718,7 +609,7 @@ function switchCommentaryTab(verseNumber, tabName) { // Hide all tabs for this verse const tabContents = document.querySelectorAll(`#commentary-verse-${verseNumber} .tab-content`); tabContents.forEach(tab => tab.style.display = 'none'); - + // Deactivate all tab buttons const tabButtons = document.querySelectorAll(`#commentary-verse-${verseNumber} .tab`); tabButtons.forEach(button => { @@ -726,10 +617,10 @@ function switchCommentaryTab(verseNumber, tabName) { button.style.borderBottom = '2px solid transparent'; button.style.color = 'var(--text-secondary)'; }); - + // Activate the selected tab document.getElementById(`tab-${verseNumber}-${tabName}`).style.display = 'block'; - + // Activate the tab button const activeButton = document.querySelector(`#commentary-verse-${verseNumber} .tab:nth-child(${tabName === 'analysis' ? 1 : tabName === 'historical' ? 2 : 3})`); activeButton.classList.add('active'); @@ -753,7 +644,7 @@ function showToast(message) { font-size: 0.875rem; animation: slideIn 0.3s ease; `; - + document.body.appendChild(toast); setTimeout(() => { toast.style.animation = 'slideOut 0.3s ease'; @@ -768,31 +659,31 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('fontSize').value = savedFontSize; updateFontSize(savedFontSize); } - + const savedLineHeight = localStorage.getItem('kjv-line-height'); if (savedLineHeight) { document.getElementById('lineHeight').value = savedLineHeight; updateLineHeight(savedLineHeight); } - + const savedShowNumbers = localStorage.getItem('kjv-show-verse-numbers'); if (savedShowNumbers === 'false') { document.getElementById('showVerseNumbers').checked = false; toggleVerseNumbers(false); } - + // Highlight verse from URL hash if (window.location.hash) { setTimeout(() => { const target = document.querySelector(window.location.hash); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'center' }); - + // Extract verse number from the hash const verseMatch = window.location.hash.match(/verse-(\d+)/); if (verseMatch && verseMatch[1]) { showToast('Navigated to Verse ' + verseMatch[1]); - + // If the verse has commentary, highlight the commentary card too const commentaryCard = document.getElementById(`commentary-verse-${verseMatch[1]}`); if (commentaryCard) { @@ -804,21 +695,25 @@ document.addEventListener('DOMContentLoaded', function() { }, 3000); } } - + // Apply highlighting - target.classList.add('highlight-verse'); + target.style.backgroundColor = 'rgba(255, 235, 59, 0.3)'; + target.style.padding = '0.1rem 0.2rem'; + target.style.borderRadius = '3px'; setTimeout(() => { - target.classList.remove('highlight-verse'); + target.style.backgroundColor = ''; + target.style.padding = ''; + target.style.borderRadius = ''; }, 2000); } }, 100); } - + // Add cross-links from verses to commentary document.querySelectorAll('.verse').forEach(verse => { const verseNum = verse.id.replace('verse-', ''); const commentaryEl = document.getElementById(`commentary-verse-${verseNum}`); - + if (commentaryEl) { // Mark verses with commentary const verseTools = verse.querySelector('.verse-tools'); @@ -841,7 +736,7 @@ document.addEventListener('DOMContentLoaded', function() { }; verseTools.appendChild(commentaryLink); } - + // Add visual indicator to verses with commentary const verseNumber = verse.querySelector('.verse-number'); if (verseNumber) { @@ -875,4 +770,4 @@ style.textContent = ` `; document.head.appendChild(style); -{% endblock %} \ No newline at end of file +{% endblock %}