Files
kennethreitzandClaude Fable 5 127fe74f9f Experiment: the sidebar as the book's spine
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>
2026-07-08 01:16:34 -04:00

1861 lines
60 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>