mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
4f2e698f2b
Visual Improvements: - Added border, background, and subtle shadow to sidebar - Increased width from 160px to 200px for better readability - Added icons to navigation items (🏠📖✨🎲📅🏷️🔍) - Organized resources into logical groups: People, Theology, History & Culture, Study Tools - Better spacing and typography New Functionality: - Sidebar search box with live filtering of links - Recently viewed pages tracking (localStorage, max 5 items) - Search on Enter key press redirects to full search - Auto-tracking of page views (excludes home and search pages) Mobile Responsiveness: - Sidebar slides in from left on mobile (280px width) - Full-height overlay behavior on tablets/mobile - Larger toggle button (36px) with better shadows - Toggle button now says "Sidebar" when collapsed, "×" when expanded - Smooth transitions and proper z-indexing All features use localStorage for persistence across sessions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1155 lines
33 KiB
HTML
1155 lines
33 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 %}"/>
|
||
|
||
<link rel="stylesheet" href="/static/tufte.css"/>
|
||
|
||
{% block head %}{% endblock %}
|
||
|
||
<style>
|
||
/* Color scheme variables */
|
||
:root {
|
||
--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;
|
||
}
|
||
|
||
[data-theme="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;
|
||
}
|
||
|
||
/* Enhanced typography and spacing */
|
||
body {
|
||
counter-reset: sidenote-counter;
|
||
background-color: var(--bg-color);
|
||
color: var(--text-color);
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
article {
|
||
padding: 2rem 5%;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
section:not(:first-of-type) {
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
/* 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: 2rem;
|
||
left: 2rem;
|
||
width: 200px;
|
||
max-height: calc(100vh - 4rem);
|
||
overflow-y: auto;
|
||
background: var(--bg-color);
|
||
padding: 1rem;
|
||
font-size: 0.8rem;
|
||
line-height: 1.5;
|
||
z-index: 100;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.nav-sidebar::-webkit-scrollbar-thumb {
|
||
background: #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.nav-sidebar h3 {
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
margin: 0 0 0.5rem 0;
|
||
padding-bottom: 0.4rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.nav-sidebar ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 1.5rem 0;
|
||
}
|
||
|
||
.nav-sidebar li {
|
||
margin: 0.35rem 0;
|
||
}
|
||
|
||
.nav-sidebar a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
display: block;
|
||
padding: 0.2rem 0;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nav-sidebar a:hover {
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
.nav-sidebar a.current {
|
||
color: var(--link-hover);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-sidebar .testament-section {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.nav-sidebar .testament-title {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-tertiary);
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-sidebar details {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.nav-sidebar summary {
|
||
cursor: pointer;
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-tertiary);
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
list-style: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.nav-sidebar summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.nav-sidebar summary::before {
|
||
content: '▸ ';
|
||
display: inline-block;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.nav-sidebar details[open] summary::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.nav-sidebar .book-list {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
/* Sidebar search box */
|
||
.sidebar-search {
|
||
margin-bottom: 1.5rem;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-search input {
|
||
width: 100%;
|
||
padding: 0.5rem 0.5rem 0.5rem 1.8rem;
|
||
border: 1px solid var(--border-color-dark);
|
||
border-radius: 3px;
|
||
font-size: 0.75rem;
|
||
background: var(--bg-color);
|
||
color: var(--text-color);
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.sidebar-search input:focus {
|
||
outline: none;
|
||
border-color: var(--text-tertiary);
|
||
}
|
||
|
||
.sidebar-search::before {
|
||
content: '🔍';
|
||
position: absolute;
|
||
left: 0.5rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 0.8rem;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Recently viewed section */
|
||
.recently-viewed {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.recently-viewed h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.recently-viewed h3::before {
|
||
content: '🕐';
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.recently-viewed ul {
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.recently-viewed li {
|
||
font-size: 0.75rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.recently-viewed .empty-state {
|
||
font-size: 0.7rem;
|
||
color: var(--text-tertiary);
|
||
font-style: italic;
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
/* Navigation section icons */
|
||
.nav-sidebar .nav-icon {
|
||
display: inline-block;
|
||
width: 1.2rem;
|
||
font-size: 0.9rem;
|
||
margin-right: 0.3rem;
|
||
}
|
||
|
||
/* Resource grouping */
|
||
.resource-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.resource-group h4 {
|
||
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);
|
||
}
|
||
|
||
.resource-group:first-of-type h4 {
|
||
border-top: none;
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
|
||
/* Sidebar collapse functionality */
|
||
#sidebar-toggle {
|
||
display: none;
|
||
}
|
||
|
||
.sidebar-toggle-container {
|
||
position: fixed;
|
||
top: 2rem;
|
||
left: 2rem;
|
||
z-index: 101;
|
||
margin: -25px 0 0 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.sidebar-toggle-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;
|
||
}
|
||
|
||
.sidebar-toggle-btn:hover {
|
||
border-color: var(--text-tertiary);
|
||
color: var(--link-hover);
|
||
}
|
||
|
||
/* 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: '☾';
|
||
}
|
||
|
||
.nav-sidebar {
|
||
transform: translateX(-100%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.sidebar-toggle-container {
|
||
left: 0.5rem;
|
||
}
|
||
|
||
.sidebar-toggle-btn::before {
|
||
content: 'Sidebar';
|
||
font-size: 0.65rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .nav-sidebar {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .sidebar-toggle-container {
|
||
left: 2rem;
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .sidebar-toggle-container .sidebar-toggle-btn::before {
|
||
content: '×';
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
/* Responsive design for tablets and mobile */
|
||
@media (max-width: 1200px) {
|
||
.nav-sidebar {
|
||
width: 280px;
|
||
left: -280px;
|
||
top: 0;
|
||
bottom: 0;
|
||
max-height: 100vh;
|
||
border-radius: 0;
|
||
border-left: none;
|
||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
|
||
padding-top: 4rem;
|
||
}
|
||
|
||
#sidebar-toggle:checked ~ .nav-sidebar {
|
||
left: 0;
|
||
}
|
||
|
||
.sidebar-toggle-container {
|
||
display: block;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
/* Keep dark mode toggle on mobile, just reposition */
|
||
.dark-mode-toggle {
|
||
top: 1rem;
|
||
right: 1rem;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Adjust article width for mobile */
|
||
article {
|
||
width: 95%;
|
||
padding: 1rem;
|
||
}
|
||
|
||
/* Optimize typography for mobile */
|
||
body {
|
||
font-size: 16px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 2rem;
|
||
line-height: 2.2rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.5rem;
|
||
line-height: 1.7rem;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
p {
|
||
font-size: 1rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* Make max-width sections full width on mobile */
|
||
section p[style*="max-width"],
|
||
section div[style*="max-width"],
|
||
.intro-text,
|
||
.plan-overview,
|
||
.topic-overview,
|
||
.verse-lookup,
|
||
.share-container,
|
||
.sample-days,
|
||
.subtopics-container,
|
||
.plan-stats {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
/* Optimize sidenotes for mobile */
|
||
.sidenote,
|
||
.marginnote {
|
||
display: block;
|
||
float: none;
|
||
width: 100%;
|
||
margin: 1rem 0 1rem 2rem;
|
||
padding-left: 1rem;
|
||
border-left: 2px solid var(--border-color);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.sidenote-number,
|
||
.margin-toggle {
|
||
display: inline;
|
||
}
|
||
|
||
/* Stack plan stats vertically */
|
||
.plan-stats {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
/* Optimize grids for mobile */
|
||
.book-grid,
|
||
.plan-grid,
|
||
.topic-grid {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 1rem;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
/* Optimize verse lookup form */
|
||
.lookup-form {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.lookup-input,
|
||
.lookup-btn {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Optimize share buttons */
|
||
.share-buttons {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.share-btn {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Optimize breadcrumbs */
|
||
.breadcrumb {
|
||
font-size: 0.85rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Optimize verse text */
|
||
.verse-text {
|
||
font-size: 1.4rem;
|
||
line-height: 2rem;
|
||
}
|
||
|
||
/* Make tables responsive */
|
||
table {
|
||
display: block;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Optimize epigraph */
|
||
.epigraph {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.epigraph blockquote {
|
||
padding: 1rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
}
|
||
|
||
/* Extra small screens (phones in portrait) */
|
||
@media (max-width: 480px) {
|
||
article {
|
||
width: 100%;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.verse-text {
|
||
font-size: 1.2rem;
|
||
line-height: 1.8rem;
|
||
}
|
||
|
||
.dark-mode-toggle,
|
||
.sidebar-toggle-container {
|
||
top: 0.5rem;
|
||
}
|
||
|
||
.dark-mode-toggle {
|
||
right: 0.5rem;
|
||
}
|
||
}
|
||
|
||
/* 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: "";
|
||
}
|
||
|
||
/* Clean borders */
|
||
section:not(:first-of-type) {
|
||
border-top: 1px solid #ccc;
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
/* 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>
|
||
<input type="checkbox" id="sidebar-toggle">
|
||
<p class="sidebar-toggle-container">
|
||
<label for="sidebar-toggle" class="sidebar-toggle-btn" title="Toggle sidebar"></label>
|
||
</p>
|
||
<p class="dark-mode-toggle">
|
||
<button class="dark-mode-btn" title="Toggle dark mode" onclick="toggleDarkMode()"></button>
|
||
</p>
|
||
<article>
|
||
{% if breadcrumbs %}
|
||
<nav class="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">
|
||
<!-- Search Box -->
|
||
<div class="sidebar-search">
|
||
<input type="text" id="sidebar-search-input" placeholder="Search..." autocomplete="off">
|
||
</div>
|
||
|
||
<!-- Recently Viewed -->
|
||
<div class="recently-viewed">
|
||
<h3>Recent</h3>
|
||
<ul id="recently-viewed-list">
|
||
<div class="empty-state">No recent pages</div>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Bible Books -->
|
||
{% if books %}
|
||
<details>
|
||
<summary>Old Testament</summary>
|
||
<ul class="book-list">
|
||
{% for book in ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy', 'Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther', 'Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon', 'Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel', 'Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
|
||
{% if book in books %}
|
||
<li><a href="/book/{{ book }}" {% if current_book == book %}class="current"{% endif %}>{{ book }}</a></li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</ul>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>New Testament</summary>
|
||
<ul class="book-list">
|
||
{% for book in ['Matthew', 'Mark', 'Luke', 'John', 'Acts', 'Romans', '1 Corinthians', '2 Corinthians', 'Galatians', 'Ephesians', 'Philippians', 'Colossians', '1 Thessalonians', '2 Thessalonians', '1 Timothy', '2 Timothy', 'Titus', 'Philemon', 'Hebrews', 'James', '1 Peter', '2 Peter', '1 John', '2 John', '3 John', 'Jude', 'Revelation'] %}
|
||
{% if book in books %}
|
||
<li><a href="/book/{{ book }}" {% if current_book == book %}class="current"{% endif %}>{{ book }}</a></li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</ul>
|
||
</details>
|
||
{% endif %}
|
||
|
||
<!-- Navigation -->
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li><a href="/" {% if request.url.path == "/" %}class="current"{% endif %}><span class="nav-icon">🏠</span>Home</a></li>
|
||
<li><a href="/books"><span class="nav-icon">📖</span>Books</a></li>
|
||
<li><a href="/verse-of-the-day"><span class="nav-icon">✨</span>Verse of the Day</a></li>
|
||
<li><a href="/random-verse"><span class="nav-icon">🎲</span>Random Verse</a></li>
|
||
<li><a href="/reading-plans"><span class="nav-icon">📅</span>Reading Plans</a></li>
|
||
<li><a href="/topics"><span class="nav-icon">🏷️</span>Topics</a></li>
|
||
<li><a href="/search"><span class="nav-icon">🔍</span>Search</a></li>
|
||
</ul>
|
||
|
||
<!-- Resources organized by category -->
|
||
<div class="resource-group">
|
||
<h4>People</h4>
|
||
<ul>
|
||
<li><a href="/biblical-prophets">Biblical Prophets</a></li>
|
||
<li><a href="/the-twelve-apostles">The Twelve Apostles</a></li>
|
||
<li><a href="/women-of-the-bible">Women of the Bible</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="resource-group">
|
||
<h4>Theology</h4>
|
||
<ul>
|
||
<li><a href="/biblical-angels">Biblical Angels</a></li>
|
||
<li><a href="/names-of-god">Names of God</a></li>
|
||
<li><a href="/parables">Parables of Jesus</a></li>
|
||
<li><a href="/biblical-covenants">Biblical Covenants</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="resource-group">
|
||
<h4>History & Culture</h4>
|
||
<ul>
|
||
<li><a href="/biblical-festivals">Biblical Festivals</a></li>
|
||
<li><a href="/biblical-maps">Biblical Geography</a></li>
|
||
<li><a href="/biblical-timeline">Timeline</a></li>
|
||
<li><a href="/family-tree">Genealogies</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="resource-group">
|
||
<h4>Study Tools</h4>
|
||
<ul>
|
||
<li><a href="/study-guides">Study Guides</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<script type="text/javascript">
|
||
// Dark mode functionality
|
||
(function() {
|
||
// Check for saved theme preference or default to light mode
|
||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||
})();
|
||
|
||
function toggleDarkMode() {
|
||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', newTheme);
|
||
localStorage.setItem('theme', newTheme);
|
||
}
|
||
|
||
// Sidebar collapse state persistence
|
||
(function() {
|
||
var toggle = document.getElementById('sidebar-toggle');
|
||
var expanded = localStorage.getItem('sidebarExpanded') === 'true';
|
||
if (expanded) {
|
||
toggle.checked = true;
|
||
}
|
||
toggle.addEventListener('change', function() {
|
||
localStorage.setItem('sidebarExpanded', toggle.checked);
|
||
});
|
||
})();
|
||
|
||
// Sidebar search functionality
|
||
(function() {
|
||
var searchInput = document.getElementById('sidebar-search-input');
|
||
if (!searchInput) return;
|
||
|
||
searchInput.addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter' && this.value.trim()) {
|
||
window.location.href = '/search?q=' + encodeURIComponent(this.value.trim());
|
||
}
|
||
});
|
||
|
||
// Filter sidebar items as user types
|
||
searchInput.addEventListener('input', function() {
|
||
var query = this.value.toLowerCase();
|
||
var sidebar = document.querySelector('.nav-sidebar');
|
||
var links = sidebar.querySelectorAll('a');
|
||
|
||
links.forEach(function(link) {
|
||
var text = link.textContent.toLowerCase();
|
||
var listItem = link.closest('li');
|
||
if (listItem) {
|
||
if (query === '' || text.includes(query)) {
|
||
listItem.style.display = '';
|
||
} else {
|
||
listItem.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
});
|
||
})();
|
||
|
||
// Recently viewed tracking
|
||
(function() {
|
||
var MAX_RECENT = 5;
|
||
|
||
function getRecentPages() {
|
||
var recent = localStorage.getItem('recentPages');
|
||
return recent ? JSON.parse(recent) : [];
|
||
}
|
||
|
||
function saveRecentPages(pages) {
|
||
localStorage.setItem('recentPages', JSON.stringify(pages));
|
||
}
|
||
|
||
function addRecentPage(url, title) {
|
||
var pages = getRecentPages();
|
||
|
||
// Remove if already exists
|
||
pages = pages.filter(function(p) { return p.url !== url; });
|
||
|
||
// Add to beginning
|
||
pages.unshift({ url: url, title: title });
|
||
|
||
// Keep only MAX_RECENT
|
||
if (pages.length > MAX_RECENT) {
|
||
pages = pages.slice(0, MAX_RECENT);
|
||
}
|
||
|
||
saveRecentPages(pages);
|
||
}
|
||
|
||
function displayRecentPages() {
|
||
var list = document.getElementById('recently-viewed-list');
|
||
if (!list) return;
|
||
|
||
var pages = getRecentPages();
|
||
|
||
if (pages.length === 0) {
|
||
list.innerHTML = '<div class="empty-state">No recent pages</div>';
|
||
return;
|
||
}
|
||
|
||
list.innerHTML = '';
|
||
pages.forEach(function(page) {
|
||
var li = document.createElement('li');
|
||
var a = document.createElement('a');
|
||
a.href = page.url;
|
||
a.textContent = page.title;
|
||
a.title = page.title;
|
||
li.appendChild(a);
|
||
list.appendChild(li);
|
||
});
|
||
}
|
||
|
||
// Track current page
|
||
var currentPath = window.location.pathname;
|
||
var currentTitle = document.title.replace(' - KJV Study', '').replace('Authorized King James Version Bible', 'Home');
|
||
|
||
// Don't track search pages or the home page
|
||
if (currentPath !== '/' && !currentPath.startsWith('/search')) {
|
||
addRecentPage(currentPath, currentTitle);
|
||
}
|
||
|
||
// Display recent pages
|
||
displayRecentPages();
|
||
})();
|
||
|
||
// Keyboard shortcuts
|
||
document.addEventListener('keydown', function(e) {
|
||
// Don't trigger if user is typing in an input field
|
||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
|
||
// Allow Escape to clear focus
|
||
if (e.key === 'Escape') {
|
||
e.target.blur();
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Cmd/Ctrl + D: Toggle dark mode
|
||
if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
|
||
e.preventDefault();
|
||
toggleDarkMode();
|
||
}
|
||
|
||
// Cmd/Ctrl + B: Toggle sidebar
|
||
if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
|
||
e.preventDefault();
|
||
var toggle = document.getElementById('sidebar-toggle');
|
||
if (toggle) {
|
||
toggle.checked = !toggle.checked;
|
||
toggle.dispatchEvent(new Event('change'));
|
||
}
|
||
}
|
||
|
||
// Cmd/Ctrl + K or /: Focus search
|
||
if (((e.metaKey || e.ctrlKey) && e.key === 'k') || e.key === '/') {
|
||
e.preventDefault();
|
||
window.location.href = '/search';
|
||
}
|
||
|
||
// g: Quick verse lookup
|
||
if (e.key === 'g') {
|
||
e.preventDefault();
|
||
showVerseLookup();
|
||
}
|
||
|
||
// r: Random verse
|
||
if (e.key === 'r') {
|
||
e.preventDefault();
|
||
window.location.href = '/random-verse';
|
||
}
|
||
|
||
// ?: Show keyboard shortcuts help
|
||
if (e.key === '?' && !e.shiftKey) {
|
||
showKeyboardHelp();
|
||
}
|
||
});
|
||
|
||
// Quick verse lookup
|
||
function showVerseLookup() {
|
||
var reference = prompt('Enter verse reference (e.g., John 3:16, Psalm 23, Genesis 1):');
|
||
if (!reference) return;
|
||
|
||
reference = reference.trim();
|
||
|
||
// Try to match: Book Chapter:Verse
|
||
var match = reference.match(/^(.+?)\s+(\d+):(\d+)$/i);
|
||
if (match) {
|
||
var book = match[1].trim();
|
||
var chapter = match[2];
|
||
var verse = match[3];
|
||
window.location.href = '/book/' + encodeURIComponent(book) + '/chapter/' + chapter + '/verse/' + verse;
|
||
return;
|
||
}
|
||
|
||
// Try to match: Book Chapter
|
||
match = reference.match(/^(.+?)\s+(\d+)$/i);
|
||
if (match) {
|
||
var book = match[1].trim();
|
||
var chapter = match[2];
|
||
window.location.href = '/book/' + encodeURIComponent(book) + '/chapter/' + chapter;
|
||
return;
|
||
}
|
||
|
||
// Try to match: Book
|
||
match = reference.match(/^(.+)$/i);
|
||
if (match) {
|
||
var book = match[1].trim();
|
||
window.location.href = '/book/' + encodeURIComponent(book);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Keyboard shortcuts help modal
|
||
function showKeyboardHelp() {
|
||
var helpText = 'Keyboard Shortcuts:\\n\\n' +
|
||
'g - Quick verse lookup\\n' +
|
||
'r - Random verse\\n' +
|
||
'Cmd/Ctrl + D - Toggle dark mode\\n' +
|
||
'Cmd/Ctrl + B - Toggle sidebar\\n' +
|
||
'Cmd/Ctrl + K - Go to search\\n' +
|
||
'/ - Go to search\\n' +
|
||
'? - Show this help\\n' +
|
||
'Esc - Clear focus';
|
||
alert(helpText);
|
||
}
|
||
|
||
// Gauges analytics
|
||
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);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|