mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-10-24 14:29:14 +00:00
The nav becomes the binding of the book: deep green leather with a gilt "KJV Study" masthead band between hairlines, parchment-toned links, gold section labels, the current page in bright gilt, an inset search field, and a fleuron-and-changelog tail. Both themes get their own spine tokens (--spine-*), so the treatment is self-contained and easy to revert if it does not grow on us. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1861 lines
60 KiB
HTML
1861 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
|
||
<!-- Apply the saved theme before first paint to avoid a light flash on
|
||
dark mode (this must run in <head>, before the body renders). -->
|
||
<script>
|
||
(function () {
|
||
try {
|
||
document.documentElement.setAttribute(
|
||
'data-theme', localStorage.getItem('theme') || 'light'
|
||
);
|
||
} catch (e) {}
|
||
})();
|
||
</script>
|
||
|
||
<title>{% block title %}Authorized King James Version Bible{% endblock %}</title>
|
||
|
||
<meta name="description" content="{% block description %}Study the Authorized King James Version Bible{% endblock %}"/>
|
||
|
||
<!-- Canonical URL -->
|
||
<link rel="canonical" href="https://kjvstudy.org{% block canonical_path %}{{ request.url.path }}{% endblock %}"/>
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="{% block og_type %}website{% endblock %}"/>
|
||
<meta property="og:url" content="https://kjvstudy.org{{ request.url.path }}"/>
|
||
<meta property="og:title" content="{% block og_title %}{% block title_text %}Authorized King James Version Bible{% endblock %}{% endblock %}"/>
|
||
<meta property="og:description" content="{% block og_description %}{% block description_text %}Study the Authorized King James Version Bible{% endblock %}{% endblock %}"/>
|
||
<meta property="og:site_name" content="KJV Study"/>
|
||
<meta property="og:image" content="{% block og_image %}https://kjvstudy.org/static/og-image.png{% endblock %}"/>
|
||
<meta property="og:image:width" content="1200"/>
|
||
<meta property="og:image:height" content="630"/>
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image"/>
|
||
<meta name="twitter:url" content="https://kjvstudy.org{{ request.url.path }}"/>
|
||
<meta name="twitter:title" content="{% block twitter_title %}{% block title_plain %}Authorized King James Version Bible{% endblock %}{% endblock %}"/>
|
||
<meta name="twitter:description" content="{% block twitter_description %}{% block description_plain %}Study the Authorized King James Version Bible{% endblock %}{% endblock %}"/>
|
||
<meta name="twitter:image" content="{% block twitter_image %}{{ self.og_image() }}{% endblock %}"/>
|
||
|
||
<link rel="stylesheet" href="/static/tufte.css?v={{ static_hash('tufte.css') }}"/>
|
||
<link rel="manifest" href="/static/manifest.json"/>
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%2327503a'/%3E%3Cpath d='M32 12v40M20 26h24' stroke='%23c9a662' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"/>
|
||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fbf8f1"/>
|
||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#191510"/>
|
||
|
||
<!-- Analytics opt-out detection (kr=1 parameter) -->
|
||
<script>
|
||
(function() {
|
||
// Check for ?kr=1 to disable analytics
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const krParam = urlParams.get('kr');
|
||
|
||
if (krParam === '1') {
|
||
// Disable analytics
|
||
localStorage.setItem('analytics_disabled', 'true');
|
||
document.cookie = 'analytics_disabled=1; max-age=315360000; path=/; SameSite=Lax';
|
||
// Redirect to clean URL
|
||
window.location.href = window.location.pathname;
|
||
} else if (krParam === '0') {
|
||
// Re-enable analytics
|
||
localStorage.removeItem('analytics_disabled');
|
||
document.cookie = 'analytics_disabled=0; max-age=0; path=/; SameSite=Lax';
|
||
// Redirect to clean URL
|
||
window.location.href = window.location.pathname;
|
||
}
|
||
|
||
// Store analytics status for template use
|
||
window.analyticsDisabled = localStorage.getItem('analytics_disabled') === 'true'
|
||
|| document.cookie.includes('analytics_disabled=1');
|
||
})();
|
||
</script>
|
||
|
||
{% block head %}{% endblock %}
|
||
|
||
<!-- Structured Data (Schema.org) -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "WebSite",
|
||
"name": "KJV Study",
|
||
"url": "https://kjvstudy.org",
|
||
"description": "Study the Authorized King James Version Bible with commentary, study guides, and biblical resources",
|
||
"potentialAction": {
|
||
"@type": "SearchAction",
|
||
"target": "https://kjvstudy.org/search?q={search_term_string}",
|
||
"query-input": "required name=search_term_string"
|
||
}
|
||
}
|
||
</script>
|
||
{% block structured_data %}{% endblock %}
|
||
|
||
<style>
|
||
/* ————————————————————————————————————————————————————————————
|
||
Design tokens — "a finely printed Bible"
|
||
Warm paper & ink, deep forest green, bronze-gilt details.
|
||
Red is reserved for the words of Christ (rubrication).
|
||
———————————————————————————————————————————————————————————— */
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
/* Paper */
|
||
--bg-color: #fbf8f1; /* warm laid paper */
|
||
--bg-elevated: #fffdf7; /* cards, popovers */
|
||
--bg-inset: #f4f0e5; /* sidebar, wells */
|
||
--code-bg: #f3efe4;
|
||
|
||
/* Ink — warm blacks, AA on paper */
|
||
--text-color: #211d16;
|
||
--text-strong: #191610;
|
||
--text-secondary: #56503f;
|
||
--text-tertiary: #6d6650; /* ≥4.5:1 on paper */
|
||
--text-quaternary: #6d6650;
|
||
|
||
/* Hairlines */
|
||
--border-color: #e7e1d1;
|
||
--border-color-dark: #d8d0ba;
|
||
--border-color-darker: #c2b899;
|
||
|
||
/* Binding green (accent) */
|
||
--accent: #34614a;
|
||
--accent-strong: #27503a;
|
||
--accent-soft: rgba(52, 97, 74, 0.09);
|
||
--accent-softer: rgba(52, 97, 74, 0.05);
|
||
|
||
/* Gilt */
|
||
--bronze: #8a6c28; /* legible bronze for text details */
|
||
--gold: #b99745; /* decorative rules & ornament */
|
||
--gold-soft: rgba(185, 151, 69, 0.16);
|
||
|
||
/* Rubric — words of Christ */
|
||
--rubric: #b3202f;
|
||
|
||
--link-color: #2d2921;
|
||
--link-hover: var(--accent-strong);
|
||
--underline: rgba(138, 108, 40, 0.44);
|
||
|
||
/* Filled controls (buttons, badges) — deep green with cream text */
|
||
--accent-fill: #2e5a41;
|
||
--accent-fill-hover: #38684c;
|
||
--on-accent: #f6f2e6;
|
||
|
||
--shadow-soft: 0 1px 2px rgba(57, 45, 22, 0.05), 0 6px 18px -8px rgba(57, 45, 22, 0.18);
|
||
--shadow-pop: 0 2px 6px rgba(57, 45, 22, 0.08), 0 16px 36px -14px rgba(57, 45, 22, 0.28);
|
||
--star: #b98a1e;
|
||
|
||
/* The spine — the sidebar as the book's binding */
|
||
--spine-bg: #2c523d;
|
||
--spine-bg-deep: #26472f;
|
||
--spine-text: #cfc8ae;
|
||
--spine-text-strong: #f0ead6;
|
||
--spine-label: #ccab66;
|
||
--spine-current: #e7c87c;
|
||
--spine-hover-bg: rgba(255, 255, 255, 0.07);
|
||
--spine-hairline: rgba(240, 234, 214, 0.16);
|
||
|
||
/* Book genres — muted, bookish inks (shared by sidebar + /books) */
|
||
--cat-law: #5a7a9f;
|
||
--cat-historical: #6a8a5e;
|
||
--cat-wisdom: #8b6d9c;
|
||
--cat-major-prophets: #b07845;
|
||
--cat-minor-prophets: #a05a4a;
|
||
--cat-gospels: #b9973f;
|
||
--cat-acts: #5f8f87;
|
||
--cat-pauline: #64708f;
|
||
--cat-general: #a06478;
|
||
--cat-apocalyptic: #953d3d;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
|
||
/* Candlelit study, not server-room gray */
|
||
--bg-color: #191510;
|
||
--bg-elevated: #211c15;
|
||
--bg-inset: #14110c;
|
||
--code-bg: #262019;
|
||
|
||
--text-color: #e9e1cf;
|
||
--text-strong: #f5efdf;
|
||
--text-secondary: #baaf94;
|
||
--text-tertiary: #9d937a;
|
||
--text-quaternary: #9d937a;
|
||
|
||
--border-color: #2e281e;
|
||
--border-color-dark: #3b3427;
|
||
--border-color-darker: #4d4433;
|
||
|
||
--accent: #8db99b;
|
||
--accent-strong: #a4cdb1;
|
||
--accent-soft: rgba(141, 185, 155, 0.13);
|
||
--accent-softer: rgba(141, 185, 155, 0.07);
|
||
|
||
--bronze: #c8a75a;
|
||
--gold: #c8a75a;
|
||
--gold-soft: rgba(200, 167, 90, 0.14);
|
||
|
||
--rubric: #e57a6f;
|
||
|
||
--link-color: #ded5c0;
|
||
--link-hover: var(--accent-strong);
|
||
--underline: rgba(200, 167, 90, 0.4);
|
||
|
||
--accent-fill: #2c5740;
|
||
--accent-fill-hover: #356a4e;
|
||
--on-accent: #eee7d3;
|
||
|
||
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -8px rgba(0, 0, 0, 0.55);
|
||
--shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 40px -14px rgba(0, 0, 0, 0.65);
|
||
--star: #d9b34a;
|
||
|
||
--spine-bg: #1e3527;
|
||
--spine-bg-deep: #192c20;
|
||
--spine-text: #b7ae95;
|
||
--spine-text-strong: #e6dfc9;
|
||
--spine-label: #b3944f;
|
||
--spine-current: #d9ba6b;
|
||
--spine-hover-bg: rgba(255, 255, 255, 0.06);
|
||
--spine-hairline: rgba(230, 223, 201, 0.13);
|
||
|
||
--cat-law: #7d9cbf;
|
||
--cat-historical: #8aab7c;
|
||
--cat-wisdom: #ab8dbc;
|
||
--cat-major-prophets: #c99763;
|
||
--cat-minor-prophets: #bf7a68;
|
||
--cat-gospels: #cfae56;
|
||
--cat-acts: #7dada4;
|
||
--cat-pauline: #8b97b8;
|
||
--cat-general: #bd8398;
|
||
--cat-apocalyptic: #b55f5f;
|
||
}
|
||
|
||
/* Text selection — a wash of gilt */
|
||
::selection {
|
||
background: rgba(185, 151, 69, 0.28);
|
||
color: inherit;
|
||
}
|
||
|
||
/* Keyboard focus — one consistent, visible ring */
|
||
:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* Skip link - visible only when focused */
|
||
.skip-link {
|
||
position: absolute;
|
||
top: -100px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--text-color);
|
||
color: var(--bg-color);
|
||
padding: 0.75rem 1.5rem;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
z-index: 10000;
|
||
border-radius: 0 0 4px 4px;
|
||
transition: top 0.2s;
|
||
}
|
||
|
||
.skip-link:focus {
|
||
top: 0;
|
||
outline: 2px solid var(--gold);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Red letter toggle - hide red letters when disabled */
|
||
[data-red-letters="disabled"] .words-of-christ {
|
||
color: inherit !important;
|
||
}
|
||
|
||
/* Override Tufte CSS sidenote constraints */
|
||
.sidenote,
|
||
.marginnote {
|
||
max-height: none !important;
|
||
}
|
||
|
||
label.sidenote-number {
|
||
max-height: none !important;
|
||
}
|
||
|
||
/* Mobile: hide sidenotes by default, show on click */
|
||
@media (max-width: 760px) {
|
||
.sidenote,
|
||
.marginnote {
|
||
display: none !important;
|
||
}
|
||
|
||
.margin-toggle:checked + .sidenote,
|
||
.margin-toggle:checked + .marginnote {
|
||
display: block !important;
|
||
float: left !important;
|
||
left: 1rem !important;
|
||
clear: both !important;
|
||
width: 95% !important;
|
||
margin: 1rem 2.5% !important;
|
||
vertical-align: baseline !important;
|
||
position: relative !important;
|
||
background-color: var(--code-bg);
|
||
padding: 1rem;
|
||
border-radius: 4px;
|
||
border-left: 3px solid var(--border-color-darker);
|
||
}
|
||
|
||
label.sidenote-number {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
/* Ensure sidenotes respect explicit theme (override OS dark prefs from tufte.css) */
|
||
.sidenote,
|
||
.marginnote {
|
||
background-color: transparent !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.margin-toggle:checked + .sidenote,
|
||
.margin-toggle:checked + .marginnote {
|
||
background-color: var(--code-bg) !important;
|
||
}
|
||
}
|
||
|
||
[data-theme="dark"] .sidenote,
|
||
[data-theme="dark"] .marginnote {
|
||
background-color: var(--bg-color) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
/* Verse tooltip styles */
|
||
/* Links to verses get normal pointer cursor (tooltips shown on hover) */
|
||
a {
|
||
color: var(--link-color) !important;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--link-hover) !important;
|
||
}
|
||
|
||
/* Words of Christ — rubricated, in the manner of red-letter editions */
|
||
.words-of-christ {
|
||
color: var(--rubric);
|
||
}
|
||
|
||
/* Links inside red letter text should stay red */
|
||
.words-of-christ a {
|
||
color: var(--rubric) !important;
|
||
}
|
||
|
||
/* But sidenote links should use normal link color (more specific selector wins) */
|
||
.words-of-christ .sidenote a,
|
||
.words-of-christ .marginnote a {
|
||
color: var(--link-color) !important;
|
||
}
|
||
|
||
[data-theme="dark"] .words-of-christ a {
|
||
color: var(--rubric) !important;
|
||
}
|
||
|
||
[data-theme="dark"] .words-of-christ .sidenote a,
|
||
[data-theme="dark"] .words-of-christ .marginnote a {
|
||
color: var(--link-color) !important;
|
||
}
|
||
|
||
a[href*="/book/"][href*="/chapter/"][href*="/verse/"]:not(.verse-number-link),
|
||
a[href*="/book/"][href*="/chapter/"][href*="#verse-"]:not(.verse-number-link) {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Verse numbers get normal pointer cursor */
|
||
.verse-number-link {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* But not in search dropdowns */
|
||
.search-results-dropdown a,
|
||
.search-results-dropdown a[href*="/book/"],
|
||
.search-dropdown a,
|
||
.search-dropdown a[href*="/book/"],
|
||
.lookup-results-dropdown a,
|
||
.lookup-results-dropdown a[href*="/book/"],
|
||
.story-search-dropdown a,
|
||
.story-search-dropdown a[href*="/book/"] {
|
||
cursor: pointer !important;
|
||
}
|
||
|
||
.verse-tooltip {
|
||
position: absolute;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-color-dark);
|
||
border-top: 2px solid var(--gold);
|
||
border-radius: 6px;
|
||
padding: 0.85rem 1.1rem;
|
||
min-width: 300px;
|
||
max-width: 450px;
|
||
box-shadow: var(--shadow-pop);
|
||
z-index: 9999;
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
color: var(--text-color);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease-in-out;
|
||
}
|
||
|
||
.verse-tooltip.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
.verse-tooltip-reference {
|
||
font-weight: 600;
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--bronze);
|
||
margin-bottom: 0.5rem;
|
||
display: block;
|
||
}
|
||
|
||
.verse-tooltip-text {
|
||
font-style: italic;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
.verse-tooltip-loading {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
/* Disable tooltips on mobile */
|
||
@media (max-width: 768px) {
|
||
.verse-tooltip {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* Enhanced typography and spacing */
|
||
body {
|
||
counter-reset: sidenote-counter;
|
||
background-color: var(--bg-color) !important;
|
||
color: var(--text-color) !important;
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
article {
|
||
padding: 2rem 5%;
|
||
margin-left: 30px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* At narrow tablet widths, add extra margin to clear sidebar */
|
||
@media (min-width: 769px) and (max-width: 950px) {
|
||
article {
|
||
margin-left: 85px;
|
||
}
|
||
.breadcrumb {
|
||
margin-left: -85px;
|
||
padding-left: 85px;
|
||
}
|
||
}
|
||
|
||
/* Remove margin on mobile when sidebar is hidden */
|
||
@media (max-width: 768px) {
|
||
article {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: var(--text-strong) !important;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.9rem;
|
||
line-height: 1.15;
|
||
margin-top: 3rem;
|
||
margin-bottom: 1.5rem;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2rem;
|
||
line-height: 1.3;
|
||
margin-top: 3rem;
|
||
margin-bottom: 1rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
p.subtitle {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
p {
|
||
font-size: 1.4rem;
|
||
line-height: 2;
|
||
margin-top: 1.4rem;
|
||
}
|
||
|
||
/* Drop cap for opening paragraphs */
|
||
.newthought {
|
||
font-variant: small-caps;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* Shared intro paragraph styling for resource/study pages
|
||
(mobile full-width override lives in the max-width:760px @media block below).
|
||
Intentional per-template variants remain inline: resources.html (65%),
|
||
resource_detail.html and family-tree pages (55%/1.1rem). */
|
||
.intro-text {
|
||
max-width: 60%;
|
||
font-size: 1.2rem;
|
||
line-height: 1.9;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
/* Refined breadcrumb navigation — quiet small caps, like a running head */
|
||
.breadcrumb {
|
||
margin: 2rem 0 3rem -30px;
|
||
padding-left: 30px;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--text-tertiary);
|
||
font-style: normal;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding-bottom: 0.9rem;
|
||
}
|
||
|
||
/* Sticky breadcrumb on scroll */
|
||
.breadcrumb {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--bg-color);
|
||
z-index: 99;
|
||
transition: box-shadow 0.2s, padding 0.2s;
|
||
}
|
||
|
||
.breadcrumb.stuck {
|
||
box-shadow: 0 10px 18px -14px rgba(57, 45, 22, 0.28);
|
||
padding-top: 0.75rem;
|
||
margin-top: 0;
|
||
}
|
||
|
||
[data-theme="dark"] .breadcrumb.stuck {
|
||
box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
.breadcrumb-actions {
|
||
float: right;
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
align-items: center;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.breadcrumb.stuck .breadcrumb-actions {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.breadcrumb-action-btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
cursor: pointer;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-color-dark);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
transition: all 0.15s;
|
||
font-family: inherit;
|
||
letter-spacing: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.breadcrumb-action-btn:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent-strong);
|
||
background: var(--accent-softer);
|
||
}
|
||
|
||
.breadcrumb-action-btn.font-toggle {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
[data-font-size="large"] .breadcrumb-action-btn.font-toggle {
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.breadcrumb-action-btn.dark-toggle::before {
|
||
content: '☀';
|
||
}
|
||
|
||
[data-theme="dark"] .breadcrumb-action-btn.dark-toggle::before {
|
||
content: '☾';
|
||
}
|
||
|
||
.breadcrumb-action-btn.speech-toggle::before {
|
||
content: '▶';
|
||
}
|
||
|
||
.breadcrumb-action-btn.speech-toggle.speaking::before {
|
||
content: '⏹';
|
||
}
|
||
|
||
.breadcrumb-action-btn.bookmark-btn::before {
|
||
content: '☆';
|
||
}
|
||
|
||
.breadcrumb-action-btn.bookmark-btn.bookmarked::before {
|
||
content: '★';
|
||
color: var(--star);
|
||
}
|
||
|
||
.bookmark-toast {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(100px);
|
||
background: var(--accent-strong);
|
||
color: #f6f2e6;
|
||
padding: 0.75rem 1.25rem;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
box-shadow: var(--shadow-pop);
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
z-index: 1000;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bookmark-toast.show {
|
||
transform: translateX(-50%) translateY(0);
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
[data-theme="dark"] .bookmark-toast {
|
||
background: #2c5740;
|
||
color: #eee7d3;
|
||
}
|
||
|
||
.bookmark-toast a {
|
||
color: #f6f2e6 !important;
|
||
margin-left: 0.5rem;
|
||
text-decoration: underline;
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.bookmark-toast a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Large font size */
|
||
[data-font-size="large"] article {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
[data-font-size="large"] article p,
|
||
[data-font-size="large"] article li {
|
||
font-size: 1.7rem;
|
||
line-height: 2;
|
||
}
|
||
|
||
[data-font-size="large"] article h1 {
|
||
font-size: 3.2rem;
|
||
}
|
||
|
||
[data-font-size="large"] article h2 {
|
||
font-size: 2.4rem;
|
||
}
|
||
|
||
/* Auto-enable large font on mobile */
|
||
@media (max-width: 768px) {
|
||
article {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
article p,
|
||
article li {
|
||
font-size: 1.4rem;
|
||
line-height: 1.9;
|
||
}
|
||
|
||
article h1 {
|
||
font-size: 2.4rem;
|
||
}
|
||
|
||
article h2 {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
article h3 {
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
/* Sidebar links bigger for tap */
|
||
.nav-sidebar a {
|
||
font-size: 1rem;
|
||
padding: 0.5rem 0.6rem;
|
||
}
|
||
|
||
.nav-sidebar .book-list a {
|
||
font-size: 0.95rem;
|
||
padding: 0.4rem 0.5rem;
|
||
}
|
||
|
||
.nav-sidebar summary {
|
||
font-size: 0.8rem;
|
||
padding: 0.5rem 0;
|
||
}
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
margin: 0 0.6rem;
|
||
color: var(--gold);
|
||
}
|
||
|
||
/* Enhanced link styling — hairline gilt underline, green on hover */
|
||
a {
|
||
color: var(--link-color);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid var(--underline);
|
||
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--link-hover);
|
||
border-bottom-color: currentColor;
|
||
}
|
||
|
||
/* Section dividers */
|
||
section {
|
||
margin-top: 3rem;
|
||
padding-top: 2rem;
|
||
}
|
||
|
||
/* Ornamental breaks */
|
||
.ornament {
|
||
text-align: center;
|
||
margin: 3rem 0;
|
||
color: var(--gold);
|
||
font-size: 1.3rem;
|
||
letter-spacing: 1rem;
|
||
}
|
||
|
||
/* Small-caps kicker line above page titles */
|
||
.page-kicker {
|
||
display: block;
|
||
font-size: 0.78rem;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.28em;
|
||
color: var(--bronze);
|
||
margin: 0 0 0.9rem 0.1em;
|
||
}
|
||
|
||
.page-kicker + h1,
|
||
.page-kicker + .workspace-title {
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
/* Gilt rule with centred fleuron: ——— ❦ ——— */
|
||
.rule-fleuron {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
border: none;
|
||
margin: 2.25rem 0;
|
||
color: var(--gold);
|
||
}
|
||
|
||
.rule-fleuron::before,
|
||
.rule-fleuron::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: linear-gradient(to right, transparent, var(--border-color-dark));
|
||
}
|
||
|
||
.rule-fleuron::after {
|
||
background: linear-gradient(to left, transparent, var(--border-color-dark));
|
||
}
|
||
|
||
/* Floating Navigation Sidebar — the book's spine */
|
||
.nav-sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 140px;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
background: linear-gradient(to right, var(--spine-bg-deep), var(--spine-bg) 45%);
|
||
padding: 1rem 0.85rem 1.5rem 0.85rem;
|
||
font-size: 0.8rem;
|
||
line-height: 1.4;
|
||
z-index: 100;
|
||
border-right: 1px solid rgba(185, 151, 69, 0.35);
|
||
direction: rtl;
|
||
}
|
||
|
||
/* Gilt masthead — the title band on the spine */
|
||
.sidebar-masthead {
|
||
display: block;
|
||
text-align: center;
|
||
margin: 0.15rem 0 1rem;
|
||
padding: 0.65rem 0;
|
||
color: var(--spine-current) !important;
|
||
font-weight: 600;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.3em;
|
||
text-indent: 0.3em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
border-top: 1px solid var(--spine-hairline);
|
||
border-bottom: 1px solid var(--spine-hairline);
|
||
}
|
||
|
||
.sidebar-masthead:hover {
|
||
color: var(--spine-text-strong) !important;
|
||
}
|
||
|
||
.nav-sidebar > * {
|
||
direction: ltr;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-thumb {
|
||
background: rgba(240, 234, 214, 0.18);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(240, 234, 214, 0.32);
|
||
}
|
||
|
||
/* Section headers */
|
||
.nav-sidebar h3 {
|
||
font-size: 0.6rem;
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
margin: 1.4rem 0 0.5rem 0;
|
||
padding: 0;
|
||
color: var(--spine-label) !important;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
border: none;
|
||
}
|
||
|
||
.nav-sidebar h3:first-of-type {
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* Lists */
|
||
.nav-sidebar ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.nav-sidebar li {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Links — parchment lettering on the binding */
|
||
.nav-sidebar a {
|
||
color: var(--spine-text) !important;
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
display: block;
|
||
padding: 0.25rem 0.4rem;
|
||
margin: 0 -0.4rem;
|
||
border-radius: 4px;
|
||
transition: all 0.15s ease;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.nav-sidebar a:hover {
|
||
color: var(--spine-text-strong) !important;
|
||
background: var(--spine-hover-bg);
|
||
}
|
||
|
||
/* Current page — bright gilt lettering */
|
||
.nav-sidebar a.current {
|
||
color: var(--spine-current) !important;
|
||
background: transparent;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.nav-sidebar a.current:hover {
|
||
color: var(--spine-current) !important;
|
||
}
|
||
|
||
/* Book type color indicators in sidebar */
|
||
.nav-sidebar .book-list a {
|
||
border-left: 2px solid transparent;
|
||
padding-left: 0.5rem;
|
||
margin-left: 0;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
|
||
.nav-sidebar .book-list a.law { border-left-color: var(--cat-law); }
|
||
.nav-sidebar .book-list a.historical { border-left-color: var(--cat-historical); }
|
||
.nav-sidebar .book-list a.wisdom { border-left-color: var(--cat-wisdom); }
|
||
.nav-sidebar .book-list a.major-prophets { border-left-color: var(--cat-major-prophets); }
|
||
.nav-sidebar .book-list a.minor-prophets { border-left-color: var(--cat-minor-prophets); }
|
||
.nav-sidebar .book-list a.gospels { border-left-color: var(--cat-gospels); }
|
||
.nav-sidebar .book-list a.acts { border-left-color: var(--cat-acts); }
|
||
.nav-sidebar .book-list a.pauline { border-left-color: var(--cat-pauline); }
|
||
.nav-sidebar .book-list a.general { border-left-color: var(--cat-general); }
|
||
.nav-sidebar .book-list a.apocalyptic { border-left-color: var(--cat-apocalyptic); }
|
||
|
||
.nav-sidebar .book-list {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.nav-sidebar .book-list a {
|
||
padding: 0.2rem 0.4rem 0.2rem 0.5rem;
|
||
}
|
||
|
||
/* Collapsible sections */
|
||
.nav-sidebar details {
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
|
||
.nav-sidebar summary {
|
||
cursor: pointer;
|
||
font-size: 0.6rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
color: var(--spine-label);
|
||
padding: 0.35rem 0;
|
||
font-weight: 600;
|
||
list-style: none;
|
||
user-select: none;
|
||
transition: color 0.15s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.nav-sidebar summary:hover {
|
||
color: var(--spine-text-strong);
|
||
}
|
||
|
||
.nav-sidebar summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.nav-sidebar summary::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 4px solid currentColor;
|
||
border-top: 3px solid transparent;
|
||
border-bottom: 3px solid transparent;
|
||
transition: transform 0.2s ease;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.nav-sidebar details[open] summary::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* Smooth expand/collapse animation */
|
||
.nav-sidebar details > ul {
|
||
animation: navSlideDown 0.15s ease-out;
|
||
padding-left: 0.15rem;
|
||
}
|
||
|
||
@keyframes navSlideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-4px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Resource group sections */
|
||
.nav-sidebar .resource-group {
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.nav-sidebar .resource-group ul {
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
/* Smooth scrolling */
|
||
.nav-sidebar {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* Divider between Bible books and resources */
|
||
.nav-sidebar details#new-testament {
|
||
margin-bottom: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
border-bottom: 1px solid var(--spine-hairline);
|
||
}
|
||
|
||
/* Nav footer */
|
||
.nav-footer {
|
||
margin-top: 0.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-footer a {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
color: var(--spine-text) !important;
|
||
text-decoration: none;
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: 4px;
|
||
transition: all 0.15s ease;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.nav-footer a:hover {
|
||
color: var(--spine-text-strong) !important;
|
||
background: var(--spine-hover-bg);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Nav badge for counts */
|
||
.nav-badge {
|
||
display: inline-block;
|
||
font-size: 0.7rem;
|
||
font-weight: 500;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
color: var(--spine-text);
|
||
padding: 0.1rem 0.4rem;
|
||
border-radius: 8px;
|
||
margin-left: 0.35rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.nav-badge:empty {
|
||
display: none;
|
||
}
|
||
|
||
/* Sidebar search box */
|
||
.sidebar-search {
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-search input {
|
||
width: 100%;
|
||
padding: 0.5rem 0.55rem;
|
||
border: 1px solid var(--spine-hairline);
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
font-family: inherit;
|
||
background: rgba(0, 0, 0, 0.18);
|
||
color: var(--spine-text-strong);
|
||
transition: all 0.15s ease;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sidebar-search input::placeholder {
|
||
color: var(--spine-text);
|
||
opacity: 0.75;
|
||
font-size: 0.7rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.sidebar-search input:focus {
|
||
outline: none;
|
||
border-color: var(--spine-current);
|
||
box-shadow: 0 0 0 3px rgba(231, 200, 124, 0.15);
|
||
}
|
||
|
||
/* Universal search dropdown */
|
||
.search-results-dropdown {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-color-dark);
|
||
border-top: none;
|
||
border-radius: 0 0 6px 6px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
z-index: 1000;
|
||
box-shadow: var(--shadow-pop);
|
||
display: none;
|
||
}
|
||
|
||
.search-results-dropdown.show {
|
||
display: block;
|
||
}
|
||
|
||
.search-results-category {
|
||
padding: 0.5rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.search-results-category:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.search-results-category-title {
|
||
font-size: 0.6rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--bronze);
|
||
margin-bottom: 0.3rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.search-result-item {
|
||
display: block;
|
||
padding: 0.3rem 0.4rem;
|
||
font-size: 0.75rem;
|
||
color: var(--text-color);
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
border-radius: 2px;
|
||
transition: background-color 0.15s;
|
||
}
|
||
|
||
.search-result-item:hover,
|
||
.search-result-item.selected {
|
||
background: var(--accent-soft);
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
.search-result-item .result-title {
|
||
display: block;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.search-result-item .result-meta {
|
||
font-size: 0.65rem;
|
||
color: var(--text-tertiary);
|
||
display: block;
|
||
margin-top: 0.1rem;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.search-no-results {
|
||
padding: 0.75rem;
|
||
text-align: center;
|
||
color: var(--text-tertiary);
|
||
font-size: 0.75rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.search-loading {
|
||
padding: 0.75rem;
|
||
text-align: center;
|
||
color: var(--text-tertiary);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.search-view-all {
|
||
display: block;
|
||
padding: 0.5rem;
|
||
text-align: center;
|
||
font-size: 0.7rem;
|
||
background: var(--border-color);
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.search-view-all:hover {
|
||
background: var(--border-color-dark);
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
[data-theme="dark"] .search-results-dropdown {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
/* Resource grouping */
|
||
.resource-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.resource-group summary {
|
||
cursor: pointer;
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-tertiary);
|
||
font-weight: 600;
|
||
margin: 1rem 0 0.5rem 0;
|
||
padding-top: 0.5rem;
|
||
border-top: 1px solid var(--border-color);
|
||
user-select: none;
|
||
}
|
||
|
||
.resource-group:first-of-type summary {
|
||
border-top: none;
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.resource-group summary:hover {
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Sidebar flourish */
|
||
.sidebar-flourish {
|
||
text-align: center;
|
||
margin: 2rem 0 0.25rem 0;
|
||
padding-top: 1.25rem;
|
||
border-top: 1px solid var(--spine-hairline);
|
||
color: var(--spine-label);
|
||
font-size: 1rem;
|
||
letter-spacing: 0.5em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Dark mode toggle */
|
||
.dark-mode-toggle {
|
||
position: fixed;
|
||
top: 2rem;
|
||
right: 2rem;
|
||
z-index: 101;
|
||
margin: -25px 0 0 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.dark-mode-btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
cursor: pointer;
|
||
background: var(--bg-elevated);
|
||
border: 1px solid var(--border-color-dark);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.dark-mode-btn:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent-strong);
|
||
background: var(--accent-softer);
|
||
}
|
||
|
||
.dark-mode-btn::before {
|
||
content: '☀';
|
||
}
|
||
|
||
[data-theme="dark"] .dark-mode-btn::before {
|
||
content: '☾';
|
||
}
|
||
|
||
/* Hide sidebar toggle on desktop - sidebar always visible */
|
||
.sidebar-toggle-container {
|
||
display: none;
|
||
}
|
||
|
||
#sidebar-toggle {
|
||
display: none;
|
||
}
|
||
|
||
/* Responsive design for mobile only */
|
||
@media (max-width: 768px) {
|
||
.nav-sidebar {
|
||
width: 140px;
|
||
left: -165px;
|
||
top: 0;
|
||
bottom: 0;
|
||
max-height: 100vh;
|
||
border-radius: 0;
|
||
border-left: none;
|
||
padding-top: 4rem;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .nav-sidebar {
|
||
left: 0;
|
||
}
|
||
|
||
.sidebar-toggle-container {
|
||
display: block;
|
||
position: fixed;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
z-index: 101;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.sidebar-toggle-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
font-size: 1.2rem;
|
||
background: var(--bg-color);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
border: 1px solid var(--border-color-darker);
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-secondary);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.sidebar-toggle-btn::before {
|
||
content: '☰';
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .sidebar-toggle-container .sidebar-toggle-btn::before {
|
||
content: '×';
|
||
}
|
||
|
||
/* iOS-specific optimizations */
|
||
body {
|
||
-webkit-text-size-adjust: 100%;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Keep dark mode toggle on mobile, just reposition */
|
||
.dark-mode-toggle {
|
||
top: 1rem;
|
||
right: 1rem;
|
||
margin: 0;
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
}
|
||
|
||
/* Adjust article width for mobile */
|
||
article {
|
||
width: 95%;
|
||
padding: 1rem;
|
||
}
|
||
|
||
/* Optimize typography for mobile with better contrast */
|
||
body {
|
||
font-size: 16px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.2rem;
|
||
line-height: 2.4rem;
|
||
font-weight: 800;
|
||
color: var(--text-strong);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.65rem;
|
||
line-height: 1.85rem;
|
||
font-weight: 700;
|
||
color: var(--text-strong);
|
||
font-style: normal;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: var(--text-strong);
|
||
}
|
||
|
||
p {
|
||
font-size: 1rem;
|
||
line-height: 1.8;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Enhanced link visibility for mobile - strong contrast */
|
||
a {
|
||
border-bottom: 2px solid var(--underline);
|
||
padding-bottom: 1px;
|
||
color: var(--text-strong);
|
||
font-weight: 500;
|
||
}
|
||
|
||
a:hover, a:active {
|
||
border-bottom-color: currentColor;
|
||
}
|
||
|
||
/* Touch target sizing only for interactive elements, not inline text links */
|
||
button, .btn, input[type="submit"], .quick-link-btn {
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
}
|
||
|
||
/* 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 with strong contrast */
|
||
.sidenote,
|
||
.marginnote {
|
||
display: block;
|
||
float: none;
|
||
width: 100%;
|
||
margin: 1rem 0 1rem 1.5rem;
|
||
padding: 0.75rem 0 0.75rem 1rem;
|
||
border-left: 4px solid var(--border-color-darker);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
color: var(--text-color) !important;
|
||
background-color: var(--code-bg) !important;
|
||
font-weight: 400;
|
||
}
|
||
|
||
[data-theme="dark"] .sidenote,
|
||
[data-theme="dark"] .marginnote {
|
||
border-left-color: var(--border-color-darker);
|
||
color: var(--text-color) !important;
|
||
background-color: var(--bg-color) !important;
|
||
}
|
||
|
||
.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 for mobile - disable sticky, hide actions */
|
||
.breadcrumb {
|
||
position: static;
|
||
font-size: 0.9rem;
|
||
flex-wrap: wrap;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding-bottom: 0.75rem;
|
||
padding-left: 1rem;
|
||
margin: 1rem 0 1.5rem 0;
|
||
background: transparent;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.breadcrumb.stuck {
|
||
box-shadow: none;
|
||
padding-top: 0;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
/* Hide most breadcrumb action buttons on mobile, but show font toggle */
|
||
.breadcrumb-actions {
|
||
display: flex !important;
|
||
}
|
||
|
||
.breadcrumb-actions .breadcrumb-action-btn {
|
||
display: none;
|
||
}
|
||
|
||
.breadcrumb-actions .breadcrumb-action-btn.font-toggle {
|
||
display: flex;
|
||
}
|
||
|
||
[data-theme="dark"] .breadcrumb {
|
||
border-bottom-color: var(--border-color);
|
||
}
|
||
|
||
.breadcrumb a {
|
||
font-weight: 500;
|
||
border-bottom: none;
|
||
color: var(--link-color);
|
||
}
|
||
|
||
[data-theme="dark"] .breadcrumb a {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
margin: 0 0.4rem;
|
||
}
|
||
|
||
/* Improve button visibility on mobile with strong contrast */
|
||
button, .btn, input[type="submit"] {
|
||
min-height: 44px;
|
||
min-width: 44px;
|
||
padding: 0.75rem 1.25rem;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
border: 3px solid var(--accent-strong);
|
||
background: var(--accent-strong);
|
||
color: #f6f2e6;
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
[data-theme="dark"] button,
|
||
[data-theme="dark"] .btn,
|
||
[data-theme="dark"] input[type="submit"] {
|
||
border-color: #2c5740;
|
||
background: #2c5740;
|
||
color: #eee7d3;
|
||
}
|
||
|
||
/* Improve section dividers with strong contrast */
|
||
/* 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;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ article {
|
||
transform: translateX(140px);
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .dark-mode-toggle {
|
||
transform: translateX(140px);
|
||
}
|
||
}
|
||
|
||
/* Print styles for beautiful printed pages */
|
||
@media print {
|
||
/* Use light colors for print */
|
||
:root {
|
||
--bg-color: white;
|
||
--text-color: black;
|
||
--text-secondary: #333;
|
||
--border-color: #ccc;
|
||
}
|
||
|
||
body {
|
||
background: white;
|
||
color: black;
|
||
font-size: 12pt;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Hide navigation elements */
|
||
.nav-sidebar,
|
||
.sidebar-toggle-container,
|
||
.dark-mode-toggle,
|
||
.breadcrumb {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Expand article to full width */
|
||
article {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Optimize typography for print */
|
||
h1 {
|
||
font-size: 24pt;
|
||
margin-top: 0;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 18pt;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 14pt;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
p {
|
||
font-size: 12pt;
|
||
orphans: 3;
|
||
widows: 3;
|
||
}
|
||
|
||
/* Avoid breaking inside elements */
|
||
section,
|
||
.verse-item,
|
||
.angel-entry,
|
||
.prophet-entry,
|
||
.name-entry,
|
||
.parable-entry,
|
||
.covenant-entry,
|
||
.apostle-entry,
|
||
.woman-entry,
|
||
.festival-entry {
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
/* Make sidenotes visible in print */
|
||
.sidenote,
|
||
.marginnote {
|
||
display: block !important;
|
||
float: none !important;
|
||
width: 100% !important;
|
||
margin: 0.5rem 0 0.5rem 2rem !important;
|
||
padding: 0.5rem;
|
||
border-left: 2px solid #ccc;
|
||
font-size: 10pt;
|
||
color: #333;
|
||
}
|
||
|
||
/* Hide sidenote toggles */
|
||
.margin-toggle {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Show URLs for links */
|
||
a[href^="http"]:after {
|
||
content: " (" attr(href) ")";
|
||
font-size: 10pt;
|
||
color: #666;
|
||
}
|
||
|
||
/* Don't show URLs for internal links */
|
||
a[href^="/"]:after {
|
||
content: "";
|
||
}
|
||
|
||
/* Optimize verse display */
|
||
.verse-item {
|
||
margin: 0.5rem 0;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.verse-ref {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.verse-text {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Remove link underlines for cleaner print */
|
||
a {
|
||
color: black;
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* Page breaks */
|
||
h1, h2 {
|
||
page-break-before: auto;
|
||
}
|
||
|
||
/* Add chapter/verse numbers in margin for reference */
|
||
@page {
|
||
margin: 2cm;
|
||
}
|
||
}
|
||
</style>
|
||
{% if not disable_analytics %}<script defer src="https://analytics.kennethreitz.org/script.js" data-website-id="b8877828-28c8-4fa1-8179-7e2cd5aca1bc"></script>{% endif %}
|
||
</head>
|
||
<body>
|
||
<a href="#main-content" class="skip-link" tabindex="0">Skip to main content</a>
|
||
<input type="checkbox" id="sidebar-toggle" aria-hidden="true">
|
||
<p class="sidebar-toggle-container">
|
||
<label for="sidebar-toggle" class="sidebar-toggle-btn" title="Toggle sidebar" aria-label="Toggle navigation sidebar"></label>
|
||
</p>
|
||
{% if not breadcrumbs %}
|
||
<p class="dark-mode-toggle">
|
||
<button class="dark-mode-btn" title="Toggle dark mode" onclick="toggleDarkMode()" aria-label="Toggle dark mode"></button>
|
||
</p>
|
||
{% endif %}
|
||
|
||
<div class="bookmark-toast" id="bookmark-toast"></div>
|
||
|
||
<article role="main" id="main-content">
|
||
{% if breadcrumbs %}
|
||
<nav class="breadcrumb" aria-label="Breadcrumb" id="breadcrumb">
|
||
<span class="breadcrumb-actions">
|
||
<button class="breadcrumb-action-btn font-toggle" title="Toggle large text" onclick="toggleFontSize()" aria-label="Toggle large text">A</button>
|
||
<button class="breadcrumb-action-btn speech-toggle" id="speech-toggle-btn" title="Read aloud" onclick="togglePageSpeech()" aria-label="Read page aloud"></button>
|
||
<button class="breadcrumb-action-btn bookmark-btn" id="bookmark-btn" title="Bookmark this page" onclick="toggleBookmark()" aria-label="Bookmark this page"></button>
|
||
<button class="breadcrumb-action-btn dark-toggle" title="Toggle dark mode" onclick="toggleDarkMode()" aria-label="Toggle dark mode"></button>
|
||
</span>
|
||
{% for crumb in breadcrumbs %}
|
||
{% if not loop.last %}
|
||
<a href="{{ crumb.url }}">{{ crumb.text }}</a>
|
||
<span class="breadcrumb-separator">·</span>
|
||
{% else %}
|
||
<span>{{ crumb.text }}</span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</nav>
|
||
{% endif %}
|
||
|
||
{% block content %}{% endblock %}
|
||
</article>
|
||
|
||
<!-- Floating Navigation Sidebar -->
|
||
<nav class="nav-sidebar" role="navigation" aria-label="Primary navigation">
|
||
<a href="/" class="sidebar-masthead">KJV Study</a>
|
||
|
||
<!-- Universal Search Box -->
|
||
<div class="sidebar-search" role="search">
|
||
<input type="text" id="sidebar-search-input" placeholder="Search everything..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-label="Search Bible, topics, and resources">
|
||
<div id="search-results-dropdown" class="search-results-dropdown" role="listbox" aria-live="polite"></div>
|
||
</div>
|
||
|
||
<!-- Quick Access -->
|
||
<h3>Quick Access</h3>
|
||
<ul>
|
||
<li><a href="/" {% if request.url.path == "/" %}class="current"{% endif %}>Home</a></li>
|
||
<li><a href="/books" {% if request.url.path == "/books" or request.url.path.startswith("/book/") %}class="current"{% endif %}>Books</a></li>
|
||
</ul>
|
||
|
||
|
||
<!-- Study -->
|
||
<h3>Study</h3>
|
||
<ul>
|
||
<li><a href="/verse-of-the-day" {% if request.url.path == "/verse-of-the-day" %}class="current"{% endif %}>Verse of the Day</a></li>
|
||
<li><a href="/study" {% if request.url.path == "/study" or request.url.path.startswith("/study/") %}class="current"{% endif %}>Passage Workspace <span class="nav-badge" id="study-notes-badge"></span></a></li>
|
||
<li><a href="/study-guides" {% if request.url.path.startswith("/study-guides") %}class="current"{% endif %}>Study Guides</a></li>
|
||
<li><a href="/topics" {% if request.url.path.startswith("/topics") %}class="current"{% endif %}>Topics</a></li>
|
||
<li><a href="/stories" {% if request.url.path == "/stories" or request.url.path.startswith("/stories/") %}class="current"{% endif %}>Bible Stories</a></li>
|
||
<li><a href="/reading-plans" {% if request.url.path.startswith("/reading-plans") %}class="current"{% endif %}>Reading Plans <span class="nav-badge" id="reading-plans-badge"></span></a></li>
|
||
<li><a href="/stars" {% if request.url.path == "/stars" %}class="current"{% endif %}>Starred Pages <span class="nav-badge" id="stars-badge"></span></a></li>
|
||
<li><a href="/resources" {% if request.url.path == "/resources" or request.url.path.startswith("/biblical-") or request.url.path.startswith("/names-of-") or request.url.path.startswith("/parables") or request.url.path.startswith("/the-twelve-apostles") or request.url.path.startswith("/women-of-the-bible") or request.url.path.startswith("/fruits-of-the-spirit") or request.url.path.startswith("/miracles-of-jesus") or request.url.path.startswith("/prayers-of-the-bible") or request.url.path.startswith("/beatitudes") or request.url.path.startswith("/ten-commandments") or request.url.path.startswith("/armor-of-god") or request.url.path.startswith("/i-am-statements") or request.url.path.startswith("/trinity") or request.url.path.startswith("/christology") or request.url.path.startswith("/soteriology") or request.url.path.startswith("/pneumatology") or request.url.path.startswith("/eschatology") or request.url.path.startswith("/ecclesiology") or request.url.path.startswith("/types-and-shadows") or request.url.path.startswith("/messianic-prophecies") or request.url.path.startswith("/blood-in-scripture") or request.url.path.startswith("/kingdom-of-god") or request.url.path.startswith("/spirits-and-demons") or request.url.path.startswith("/personifications") or request.url.path.startswith("/bibliology") or request.url.path.startswith("/theology-proper") or request.url.path.startswith("/anthropology") or request.url.path.startswith("/hamartiology") or request.url.path.startswith("/providence") or request.url.path.startswith("/grace") or request.url.path.startswith("/justification") or request.url.path.startswith("/sanctification") or request.url.path.startswith("/law-and-gospel") or request.url.path.startswith("/worship") or request.url.path.startswith("/tetragrammaton") %}class="current"{% endif %}>Resources</a></li>
|
||
</ul>
|
||
|
||
<!-- Tools -->
|
||
<h3>Tools</h3>
|
||
<ul>
|
||
<li><a href="/strongs" {% if request.url.path.startswith("/strongs") %}class="current"{% endif %}>Strong's Concordance</a></li>
|
||
<li><a href="/interlinear" {% if request.url.path.startswith("/interlinear") %}class="current"{% endif %}>Interlinear</a></li>
|
||
<li><a href="/family-tree" {% if request.url.path.startswith("/family-tree") %}class="current"{% endif %}>Family Tree</a></li>
|
||
<li><a href="/biblical-timeline" {% if request.url.path.startswith("/biblical-timeline") %}class="current"{% endif %}>Timeline</a></li>
|
||
<li><a href="/biblical-maps" {% if request.url.path.startswith("/biblical-maps") %}class="current"{% endif %}>Maps</a></li>
|
||
<li><a href="/red-letter" {% if request.url.path.startswith("/red-letter") %}class="current"{% endif %}>Red Letter</a></li>
|
||
</ul>
|
||
|
||
<div class="sidebar-flourish" aria-hidden="true">❦</div>
|
||
<div class="nav-footer">
|
||
<a href="/changelog" {% if request.url.path == "/changelog" %}class="current"{% endif %}>Changelog</a>
|
||
</div>
|
||
|
||
</nav>
|
||
|
||
|
||
<script src="/static/base.js?v={{ static_hash('base.js') }}"></script>
|
||
</body>
|
||
</html>
|