diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css index 09c8b80..e2974a0 100644 --- a/kjvstudy_org/static/style.css +++ b/kjvstudy_org/static/style.css @@ -1,40 +1,24 @@ :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: #1f1f1f; + --primary-light: #333333; + --primary-dark: #000000; + --accent-color: #666666; + --background-color: #fefefe; + --surface-color: #ffffff; + --text-primary: #1a1a1a; + --text-secondary: #666666; + --text-muted: #999999; + --border-color: #e0e0e0; + --border-light: #f0f0f0; + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-md: 0 2px 4px 0 rgb(0 0 0 / 0.1); + --shadow-lg: 0 4px 8px 0 rgb(0 0 0 / 0.1); + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --font-serif: 'Crimson Text', 'Times New Roman', 'Times', serif; + --font-sans: 'Crimson Text', 'Times New Roman', 'Times', serif; + --font-display: 'Crimson Text', 'Times New Roman', 'Times', serif; } * { @@ -46,19 +30,20 @@ html { } 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: 'Crimson Text', 'Times New Roman', serif; +margin: 0; +padding: 0; +background-color: var(--background-color); +color: var(--text-primary); +line-height: 1.7; +font-size: 16px; +overflow-x: hidden; +-webkit-text-size-adjust: 100%; +-ms-text-size-adjust: 100%; +} + +* { + font-family: 'Crimson Text', 'Times New Roman', serif !important; } /* Global text selection styling */ @@ -106,15 +91,12 @@ div { .sidebar { width: 220px; - background: linear-gradient( - 135deg, - var(--primary-dark) 0%, - var(--primary-color) 100% - ); - color: white; + background: var(--surface-color); + color: var(--text-primary); overflow-y: auto; padding: 1.5rem 0; - box-shadow: var(--shadow-lg); + box-shadow: var(--shadow-md); + border-right: 1px solid var(--border-color); position: fixed; height: 100vh; z-index: 30; @@ -129,27 +111,27 @@ div { } .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 var(--border-light); + 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: 'Crimson Text', 'Times New Roman', serif; + font-size: 1.2rem; + font-weight: normal; + margin: 0; + color: var(--text-primary); + 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: 0.875rem; + color: var(--text-secondary); + margin: 0.25rem 0 0; + font-weight: normal; } .sidebar-nav { @@ -157,68 +139,65 @@ div { } .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-family: 'Crimson Text', 'Times New Roman', serif; + font-size: 0.8rem; + font-weight: normal; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); + 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: var(--text-secondary); + padding: 0.4rem 0.75rem; + text-decoration: none; + margin-bottom: 0.1rem; + transition: color 0.2s ease; + font-size: 0.9rem; + font-family: 'Crimson Text', 'Times New Roman', serif; } .sidebar-nav a:hover { - background-color: rgba(255, 255, 255, 0.1); - color: white; - transform: translateX(4px); + color: var(--text-primary); } .sidebar-nav a.active { - background-color: rgba(255, 255, 255, 0.15); - color: white; - font-weight: 500; + color: var(--text-primary); + font-weight: normal; } .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: var(--text-muted); + margin-top: 0.25rem; + font-family: 'Crimson Text', 'Times New Roman', serif; } .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.3); + z-index: 35; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; } .sidebar-overlay.open { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } .main-content { @@ -254,32 +233,32 @@ div { /* 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: 'Crimson Text', 'Times New Roman', serif; + font-size: 2rem; + font-weight: normal; + color: var(--text-primary); + text-align: center; + margin: 0 0 2rem; + line-height: 1.3; } .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: 'Crimson Text', 'Times New Roman', serif; + font-size: 1.5rem; + font-weight: normal; + color: var(--text-primary); + margin: 0 0 1rem; + 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: 'Crimson Text', 'Times New Roman', serif; + font-size: 1.75rem; + font-weight: normal; + color: var(--text-primary); + text-align: center; + margin: 0 0 1rem; + line-height: 1.3; } /* Cards and Components */ @@ -304,9 +283,9 @@ div { /* Book Grid */ .book-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); - gap: 0.75rem; - margin-top: 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 1rem; + margin-top: 1rem; } .book-card { @@ -325,9 +304,8 @@ div { } .book-card:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md); - border-color: var(--primary-color); + box-shadow: var(--shadow-sm); + border-color: var(--border-color); } /* Testament Divider */ @@ -373,82 +351,77 @@ div { } .book-title { - font-family: var(--font-display); - font-size: 1.25rem; - font-weight: 600; - color: var(--primary-color); + font-family: 'Crimson Text', 'Times New Roman', serif; + font-size: 1.1rem; + font-weight: normal; + color: var(--text-primary); 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; + font-size: 0.75rem; + color: var(--text-muted); + font-style: normal; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.1em; + font-family: 'Crimson Text', 'Times New Roman', serif; } /* 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(60px, 1fr)); + gap: 0.5rem; + margin-top: 1rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; } .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; -} - -.chapter-link:active { - transform: scale(0.95); + display: flex; + align-items: center; + justify-content: center; + padding: 0.75rem 0.5rem; + background: var(--surface-color); + color: var(--text-primary); + text-decoration: none; + font-weight: normal; + font-size: 1rem; + border: 1px solid var(--border-light); + transition: all 0.15s ease; + min-height: 44px; } .chapter-link:hover { - background: var(--primary-color); - color: white; - transform: translateY(-2px); - box-shadow: var(--shadow-md); - border-color: var(--primary-light); + background: var(--border-light); + color: var(--text-primary); } /* Verses */ .verses-container { - max-width: 900px; - margin: 0 auto; - padding: 2rem 1rem; - background: var(--background-color); + max-width: 600px; + margin: 0 auto; + padding: 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: 'Crimson Text', 'Times New Roman', serif; + font-size: 1.2rem; + line-height: 1.9; + color: var(--text-primary); + text-align: left; + margin: 1rem 0; + padding: 2rem 1rem; + background: var(--surface-color); + max-width: 600px; + margin-left: auto; + margin-right: auto; + font-weight: 400; + letter-spacing: 0.01em; } .chapter-text .verse { @@ -481,39 +454,30 @@ div { } .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; -} - -.verse-number::before, -.verse-number::after { - content: none !important; - display: none !important; + font-size: 0.75rem !important; + color: var(--text-muted) !important; + font-weight: normal !important; + font-family: 'Crimson Text', 'Times New Roman', serif !important; + vertical-align: super !important; + margin-right: 0.2rem !important; + position: static !important; + display: inline !important; + background: none !important; + border: none !important; + padding: 0 !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: 'Crimson Text', 'Times New Roman', serif; + font-size: 1.2rem; + line-height: 1.9; + font-weight: 400; + letter-spacing: 0.01em; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; } .verse-text::selection { @@ -528,124 +492,129 @@ div { /* 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: 1rem; + font-size: 0.85rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.1em; + font-family: 'Crimson Text', 'Times New Roman', serif; } .breadcrumb a { - color: var(--primary-light); - text-decoration: none; - font-size: 1.2rem; + color: var(--text-secondary); + text-decoration: none; + font-size: 0.85rem; + font-family: 'Crimson Text', 'Times New Roman', serif; } .breadcrumb a:hover { - text-decoration: underline; + color: var(--text-primary); } .breadcrumb-separator { - color: var(--text-secondary); + color: var(--text-muted); } .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: 2rem; + padding-top: 1rem; + border-top: 1px solid var(--border-light); } .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.6rem 1rem; + background: var(--surface-color); + color: var(--text-primary); + text-decoration: none; + border: 1px solid var(--border-light); + font-weight: normal; + transition: all 0.15s ease; + font-size: 0.9rem; + font-family: 'Crimson Text', 'Times New Roman', serif; } .nav-button:hover { - background: var(--primary-light); - color: white; - border-color: var(--primary-light); + background: var(--border-light); + color: var(--text-primary); } .nav-button-primary { - background: var(--primary-light); - color: white; - border-color: var(--primary-light); + background: var(--text-primary); + color: var(--surface-color); + border-color: var(--text-primary); } .nav-button-primary:hover { - background: var(--primary-dark); - border-color: var(--primary-dark); + background: var(--text-secondary); + border-color: var(--text-secondary); } /* Search */ .search-container { - position: relative; - margin-bottom: 2rem; + position: relative; + margin-bottom: 1rem; } .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: 0.75rem 0.75rem 0.75rem 2.5rem; + font-size: 1rem; + border: 1px solid var(--border-light); + background: var(--surface-color); + color: var(--text-primary); + transition: border-color 0.15s ease; + font-family: 'Crimson Text', 'Times New Roman', serif; } .search-input::placeholder { - color: var(--text-muted); + color: var(--text-muted); + font-style: italic; + font-family: 'Crimson Text', 'Times New Roman', serif; } .search-input:focus { - outline: none; - border-color: var(--primary-color); + outline: none; + border-color: var(--border-color); } .search-icon { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - color: var(--text-muted); + position: absolute; + left: 0.75rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + font-size: 0.9rem; } /* 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(--surface-color); + color: var(--text-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: 0.75rem; + cursor: pointer; + box-shadow: var(--shadow-sm); + touch-action: manipulation; + min-height: 48px; + min-width: 48px; + display: flex; + align-items: center; + justify-content: center; } /* Tablet-specific styles */ @@ -868,8 +837,18 @@ div { } .verse-text { - font-size: 1rem; - line-height: 1.6; + font-size: 1.1rem; + line-height: 1.8; + font-family: 'Crimson Text', 'Times New Roman', serif; + font-weight: 400; + letter-spacing: 0.01em; + } + + .chapter-text { + font-size: 1.1rem; + line-height: 1.8; + padding: 1rem; + font-family: 'Crimson Text', 'Times New Roman', serif; } .navigation { @@ -1127,21 +1106,77 @@ html, color: white; } - .verse { - padding: 0.25rem 0; - font-size: 0.95rem; - } +@media (max-width: 480px) { + .page-title { + font-size: 1.5rem; + margin-bottom: 1rem; + } - .verse-number { - font-size: 0.7rem !important; - vertical-align: super !important; - display: inline !important; - } + .chapter-title { + font-size: 1.5rem; + margin-bottom: 1rem; + } - .verse-text { - font-size: 0.95rem; - line-height: 1.5; - } + .container, + .narrow-container { + padding: 1rem 0.75rem; + } + + .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-title { + font-size: 1rem; + } + + .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:active { + background: var(--primary-color); + color: white; + } + + .verse { + padding: 0.25rem 0; + font-size: 0.95rem; + } + + .verse-number { + font-size: 0.7rem !important; + vertical-align: super !important; + display: inline !important; + } + + .verse-text { + font-size: 1rem; + line-height: 1.7; + font-family: 'Crimson Text', 'Times New Roman', serif; + font-weight: 400; + letter-spacing: 0.01em; + } + + .chapter-text { + font-size: 1rem; + line-height: 1.7; + padding: 0.75rem; + font-family: 'Crimson Text', 'Times New Roman', serif; + } .sidebar-nav { padding: 0 0.25rem; diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index 8e04223..d2451f0 100644 --- a/kjvstudy_org/templates/base.html +++ b/kjvstudy_org/templates/base.html @@ -86,12 +86,9 @@ - - - + + + @@ -313,7 +305,7 @@ sup.verse-number:hover {

{{ book }} {{ chapter }}

-

+

Authorized King James Version (1769) with AI Commentary