mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
c42d01d4f4
1. Sticky header on scroll - Shows current page title and breadcrumb navigation - Appears when scrolling past the main breadcrumb - Smooth slide-down animation 2. Font size controls (A/A buttons) - Small, normal, large, x-large sizes - Persisted to localStorage - Positioned next to dark mode toggle 3. Prefetch next/prev pages - Uses requestIdleCallback for non-blocking prefetch - Prefetches chapter/verse/book navigation links - Makes page-to-page navigation feel instant 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1603 lines
49 KiB
HTML
1603 lines
49 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
|
||
<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 %}https://kjvstudy.org/static/og-image.png{% endblock %}"/>
|
||
|
||
<link rel="stylesheet" href="/static/tufte.css"/>
|
||
<link rel="manifest" href="/static/manifest.json"/>
|
||
|
||
<!-- 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>
|
||
/* Color scheme variables */
|
||
:root {
|
||
color-scheme: light;
|
||
--bg-color: #fffff8;
|
||
--text-color: #111;
|
||
--text-secondary: #666;
|
||
--text-tertiary: #888;
|
||
--text-quaternary: #999;
|
||
--border-color: #eee;
|
||
--border-color-dark: #ddd;
|
||
--border-color-darker: #ccc;
|
||
--link-color: #333;
|
||
--link-hover: #000;
|
||
--code-bg: #f5f5f5;
|
||
--text-strong: #111;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
--bg-color: #1a1a1a;
|
||
--text-color: #e0e0e0;
|
||
--text-secondary: #b0b0b0;
|
||
--text-tertiary: #909090;
|
||
--text-quaternary: #707070;
|
||
--border-color: #333;
|
||
--border-color-dark: #444;
|
||
--border-color-darker: #555;
|
||
--link-color: #d0d0d0;
|
||
--link-hover: #fff;
|
||
--code-bg: #2a2a2a;
|
||
--text-strong: #e0e0e0;
|
||
}
|
||
|
||
/* 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 #4a7c59;
|
||
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;
|
||
}
|
||
|
||
/* Links inside red letter text should stay red */
|
||
.words-of-christ a {
|
||
color: #c41e3a !important;
|
||
}
|
||
|
||
[data-theme="dark"] .words-of-christ a {
|
||
color: #ff6b6b !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-color);
|
||
border: 1px solid var(--border-color-darker);
|
||
border-radius: 6px;
|
||
padding: 0.75rem 1rem;
|
||
min-width: 300px;
|
||
max-width: 400px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
z-index: 9999;
|
||
font-size: 0.9rem;
|
||
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;
|
||
color: var(--link-color);
|
||
margin-bottom: 0.5rem;
|
||
display: block;
|
||
}
|
||
|
||
.verse-tooltip-text {
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.verse-tooltip-loading {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
[data-theme="dark"] .verse-tooltip {
|
||
background: #2a2a2a;
|
||
border-color: #444;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
html:not([data-theme="light"]) .verse-tooltip {
|
||
background: #2a2a2a;
|
||
border-color: #444;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||
}
|
||
}
|
||
|
||
/* 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%;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2.8rem;
|
||
line-height: 1.2;
|
||
margin-top: 3rem;
|
||
margin-bottom: 1.5rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2rem;
|
||
line-height: 1.3;
|
||
margin-top: 3rem;
|
||
margin-bottom: 1rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
/* Refined breadcrumb navigation */
|
||
.breadcrumb {
|
||
margin: 2rem 0 3rem 0;
|
||
font-size: 0.95rem;
|
||
color: var(--text-secondary);
|
||
font-style: italic;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
/* Sticky header on scroll */
|
||
.sticky-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 140px;
|
||
right: 0;
|
||
background: var(--bg-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 0.6rem 2rem;
|
||
z-index: 99;
|
||
transform: translateY(-100%);
|
||
transition: transform 0.2s ease;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.sticky-header.visible {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.sticky-header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
max-width: 800px;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.sticky-header-title {
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
color: var(--text-color);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.sticky-header-breadcrumb {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.sticky-header-breadcrumb a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.sticky-header-breadcrumb a:hover {
|
||
color: var(--link-color);
|
||
}
|
||
|
||
.sticky-header-breadcrumb .sep {
|
||
color: var(--text-quaternary);
|
||
}
|
||
|
||
[data-theme="dark"] .sticky-header {
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.sticky-header {
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
/* Font size controls */
|
||
.font-size-controls {
|
||
position: fixed;
|
||
top: 2rem;
|
||
right: 4rem;
|
||
z-index: 101;
|
||
margin: -25px 0 0 0;
|
||
display: flex;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.font-size-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
border: 1px solid var(--border-color-darker);
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
transition: all 0.2s;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.font-size-btn:hover {
|
||
border-color: var(--text-tertiary);
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
.font-size-btn.decrease {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.font-size-btn.increase {
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* Font size scale classes */
|
||
[data-font-size="small"] article {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
[data-font-size="small"] article p,
|
||
[data-font-size="small"] article li {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
[data-font-size="small"] article h1 {
|
||
font-size: 2.4rem;
|
||
}
|
||
|
||
[data-font-size="small"] article h2 {
|
||
font-size: 1.7rem;
|
||
}
|
||
|
||
[data-font-size="large"] article {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
[data-font-size="large"] article p,
|
||
[data-font-size="large"] article li {
|
||
font-size: 1.6rem;
|
||
line-height: 2.2;
|
||
}
|
||
|
||
[data-font-size="large"] article h1 {
|
||
font-size: 3.2rem;
|
||
}
|
||
|
||
[data-font-size="large"] article h2 {
|
||
font-size: 2.3rem;
|
||
}
|
||
|
||
[data-font-size="x-large"] article {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
[data-font-size="x-large"] article p,
|
||
[data-font-size="x-large"] article li {
|
||
font-size: 1.8rem;
|
||
line-height: 2.4;
|
||
}
|
||
|
||
[data-font-size="x-large"] article h1 {
|
||
font-size: 3.5rem;
|
||
}
|
||
|
||
[data-font-size="x-large"] article h2 {
|
||
font-size: 2.6rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.font-size-controls {
|
||
top: 1rem;
|
||
right: 3.5rem;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.font-size-controls {
|
||
top: 0.5rem;
|
||
right: 3rem;
|
||
}
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: var(--link-color);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
margin: 0 0.75rem;
|
||
color: var(--text-quaternary);
|
||
}
|
||
|
||
/* Enhanced link styling */
|
||
a {
|
||
color: var(--link-color);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid var(--border-color-dark);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--link-hover);
|
||
border-bottom-color: var(--link-hover);
|
||
}
|
||
|
||
/* Section dividers */
|
||
section {
|
||
margin-top: 3rem;
|
||
padding-top: 2rem;
|
||
}
|
||
|
||
/* Ornamental breaks */
|
||
.ornament {
|
||
text-align: center;
|
||
margin: 3rem 0;
|
||
color: var(--text-quaternary);
|
||
font-size: 1.5rem;
|
||
letter-spacing: 1rem;
|
||
}
|
||
|
||
/* Floating Navigation Sidebar */
|
||
.nav-sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 140px;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
background: var(--bg-color);
|
||
padding: 1.25rem 0.85rem 1.5rem 0.85rem;
|
||
font-size: 0.8rem;
|
||
line-height: 1.4;
|
||
z-index: 100;
|
||
border-right: 1px solid var(--border-color);
|
||
direction: rtl;
|
||
}
|
||
|
||
.nav-sidebar > * {
|
||
direction: ltr;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-thumb {
|
||
background: var(--border-color);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-thumb:hover {
|
||
background: var(--text-tertiary);
|
||
}
|
||
|
||
/* Section headers */
|
||
.nav-sidebar h3 {
|
||
font-size: 0.6rem;
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
margin: 1.25rem 0 0.5rem 0;
|
||
padding: 0;
|
||
color: var(--text-tertiary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
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 */
|
||
.nav-sidebar a {
|
||
color: var(--text-secondary);
|
||
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(--text-color);
|
||
background: rgba(74, 124, 89, 0.08);
|
||
}
|
||
|
||
.nav-sidebar a.current {
|
||
color: #4a7c59;
|
||
background: rgba(74, 124, 89, 0.1);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 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: #3b82f6; }
|
||
.nav-sidebar .book-list a.historical { border-left-color: #22c55e; }
|
||
.nav-sidebar .book-list a.wisdom { border-left-color: #a855f7; }
|
||
.nav-sidebar .book-list a.major-prophets { border-left-color: #f97316; }
|
||
.nav-sidebar .book-list a.minor-prophets { border-left-color: #ef4444; }
|
||
.nav-sidebar .book-list a.gospels { border-left-color: #eab308; }
|
||
.nav-sidebar .book-list a.acts { border-left-color: #14b8a6; }
|
||
.nav-sidebar .book-list a.pauline { border-left-color: #6366f1; }
|
||
.nav-sidebar .book-list a.general { border-left-color: #ec4899; }
|
||
.nav-sidebar .book-list a.apocalyptic { border-left-color: #dc2626; }
|
||
|
||
.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.1em;
|
||
color: var(--text-tertiary);
|
||
padding: 0.35rem 0;
|
||
font-weight: 500;
|
||
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(--text-secondary);
|
||
}
|
||
|
||
.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(--border-color);
|
||
}
|
||
|
||
/* Nav footer */
|
||
.nav-footer {
|
||
margin-top: 1.5rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--border-color);
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-footer a {
|
||
font-size: 0.75rem;
|
||
color: var(--text-tertiary);
|
||
text-decoration: none;
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: 4px;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.nav-footer a:hover {
|
||
color: var(--text-secondary);
|
||
background: rgba(74, 124, 89, 0.08);
|
||
}
|
||
|
||
/* Sidebar search box */
|
||
.sidebar-search {
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-search input {
|
||
width: 100%;
|
||
padding: 0.45rem 0.5rem;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 5px;
|
||
font-size: 0.75rem;
|
||
background: var(--bg-color);
|
||
color: var(--text-color);
|
||
transition: all 0.15s ease;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sidebar-search input::placeholder {
|
||
color: var(--text-tertiary);
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.sidebar-search input:focus {
|
||
outline: none;
|
||
border-color: #4a7c59;
|
||
box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.1);
|
||
}
|
||
|
||
/* Universal search dropdown */
|
||
.search-results-dropdown {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg-color);
|
||
border: 1px solid var(--border-color-dark);
|
||
border-top: none;
|
||
border-radius: 0 0 3px 3px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
z-index: 1000;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
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.08em;
|
||
color: var(--text-tertiary);
|
||
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(--border-color);
|
||
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 1rem 0;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid var(--border-color);
|
||
color: var(--text-tertiary);
|
||
font-size: 1rem;
|
||
letter-spacing: 0.5em;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 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: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
border: 1px solid var(--border-color-darker);
|
||
border-radius: 3px;
|
||
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(--text-tertiary);
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
.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 tablets and mobile */
|
||
@media (max-width: 1200px) {
|
||
.nav-sidebar {
|
||
width: 140px;
|
||
left: -140px;
|
||
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: '×';
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
/* iOS-specific optimizations */
|
||
body {
|
||
-webkit-text-size-adjust: 100%;
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Keep dark mode toggle on mobile, just reposition */
|
||
.dark-mode-toggle {
|
||
top: 1rem;
|
||
right: 1rem;
|
||
margin: 0;
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
}
|
||
|
||
/* Adjust article width for mobile */
|
||
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: #000;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
[data-theme="dark"] h1 {
|
||
color: #fff;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.65rem;
|
||
line-height: 1.85rem;
|
||
font-weight: 700;
|
||
color: #000;
|
||
font-style: normal;
|
||
}
|
||
|
||
[data-theme="dark"] h2 {
|
||
color: #fff;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
color: #000;
|
||
}
|
||
|
||
[data-theme="dark"] h3 {
|
||
color: #fff;
|
||
}
|
||
|
||
p {
|
||
font-size: 1rem;
|
||
line-height: 1.8;
|
||
color: var(--text-color);
|
||
}
|
||
|
||
/* Enhanced link visibility for mobile - strong contrast */
|
||
a {
|
||
border-bottom: 2px solid #999;
|
||
padding-bottom: 1px;
|
||
color: #000;
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-theme="dark"] a {
|
||
border-bottom-color: #666;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
a:hover, a:active {
|
||
border-bottom-color: #333;
|
||
}
|
||
|
||
[data-theme="dark"] a:hover,
|
||
[data-theme="dark"] a:active {
|
||
border-bottom-color: #999;
|
||
}
|
||
|
||
/* 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 with strong contrast */
|
||
.breadcrumb {
|
||
font-size: 0.95rem;
|
||
flex-wrap: wrap;
|
||
border-bottom: 3px solid #999;
|
||
padding-bottom: 0.75rem;
|
||
}
|
||
|
||
[data-theme="dark"] .breadcrumb {
|
||
border-bottom-color: #666;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
font-weight: 600;
|
||
border-bottom: 2px solid #999;
|
||
color: #000;
|
||
}
|
||
|
||
[data-theme="dark"] .breadcrumb a {
|
||
border-bottom-color: #666;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
/* 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 #111;
|
||
background: #111;
|
||
color: #fff;
|
||
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: #ddd;
|
||
background: #ddd;
|
||
color: #111;
|
||
}
|
||
|
||
/* 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>
|
||
</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" checked>
|
||
<p class="sidebar-toggle-container">
|
||
<label for="sidebar-toggle" class="sidebar-toggle-btn" title="Toggle sidebar" aria-label="Toggle navigation sidebar"></label>
|
||
</p>
|
||
<div class="font-size-controls">
|
||
<button class="font-size-btn decrease" title="Decrease font size" onclick="changeFontSize(-1)" aria-label="Decrease font size">A</button>
|
||
<button class="font-size-btn increase" title="Increase font size" onclick="changeFontSize(1)" aria-label="Increase font size">A</button>
|
||
</div>
|
||
<p class="dark-mode-toggle">
|
||
<button class="dark-mode-btn" title="Toggle dark mode" onclick="toggleDarkMode()" aria-label="Toggle dark mode"></button>
|
||
</p>
|
||
|
||
<!-- Sticky header (appears on scroll) -->
|
||
{% if breadcrumbs %}
|
||
<header class="sticky-header" id="sticky-header" aria-hidden="true">
|
||
<div class="sticky-header-content">
|
||
<span class="sticky-header-title">{{ breadcrumbs[-1].text if breadcrumbs else '' }}</span>
|
||
<nav class="sticky-header-breadcrumb">
|
||
{% for crumb in breadcrumbs[:-1] %}
|
||
<a href="{{ crumb.url }}">{{ crumb.text }}</a>
|
||
{% if not loop.last %}<span class="sep">›</span>{% endif %}
|
||
{% endfor %}
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
{% endif %}
|
||
|
||
<article role="main" id="main-content">
|
||
{% if breadcrumbs %}
|
||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||
{% 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">
|
||
<!-- 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>
|
||
<li><a href="/search">Search</a></li>
|
||
</ul>
|
||
|
||
|
||
<!-- Daily Reading -->
|
||
<details class="resource-group" open aria-label="Daily reading resources">
|
||
<summary aria-expanded="true">Daily Reading</summary>
|
||
<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="/random-verse" {% if request.url.path == "/random-verse" %}class="current"{% endif %}>Random Verse</a></li>
|
||
<li><a href="/reading-plans" {% if request.url.path.startswith("/reading-plans") %}class="current"{% endif %}>Reading Plans</a></li>
|
||
</ul>
|
||
</details>
|
||
|
||
<!-- Study Resources -->
|
||
<details class="resource-group" open aria-label="Study resources">
|
||
<summary aria-expanded="true">Study Resources</summary>
|
||
<ul>
|
||
<li><a href="/study-guides" {% if request.url.path.startswith("/study-guides") %}class="current"{% endif %}>Study Guides</a></li>
|
||
<li><a href="/stories" {% if request.url.path.startswith("/stories") %}class="current"{% endif %}>Bible Stories</a></li>
|
||
<li><a href="/topics" {% if request.url.path.startswith("/topics") %}class="current"{% endif %}>Topics</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>
|
||
</details>
|
||
|
||
<!-- Reference Tools -->
|
||
<details class="resource-group" open aria-label="Reference tools">
|
||
<summary aria-expanded="true">Reference Tools</summary>
|
||
<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>
|
||
</ul>
|
||
</details>
|
||
|
||
<!-- About -->
|
||
<div class="nav-footer">
|
||
<a href="/about" {% if request.url.path == "/about" %}class="current"{% endif %}>About</a>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<script src="/static/base.js"></script>
|
||
<script type="text/javascript">
|
||
{% if not disable_analytics %}
|
||
// Gauges analytics (respects kr=1 opt-out)
|
||
if (!window.analyticsDisabled) {
|
||
var _gauges = _gauges || [];
|
||
(function() {
|
||
var t = document.createElement('script');
|
||
t.type = 'text/javascript';
|
||
t.async = true;
|
||
t.id = 'gauges-tracker';
|
||
t.setAttribute('data-site-id', '6834bd650d851064ae28dc13');
|
||
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
|
||
t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js';
|
||
var s = document.getElementsByTagName('script')[0];
|
||
s.parentNode.insertBefore(t, s);
|
||
})();
|
||
}
|
||
{% endif %}
|
||
</script>
|
||
</body>
|
||
</html>
|