Files
kennethreitzandClaude Fable 5 94472e053a Site-wide design sweep: every remaining page on the system
Soup up the book landing pages (Joel et al.): Old/New Testament kicker,
letterspaced-caps book title matching the chapter pages, gold-tipped
Chapters heading, and key verses as gilt scripture plates with bronze
references and quiet significance notes.

Then a full sweep of the 32 remaining templates, applying the shared
patterns (gold-tipped small-caps apparatus headings, elevated cards,
chip buttons, gilt scripture plates, bronze micro-labels, token-only
colors, dark mode from tokens alone):

- about, about_claude, accessibility (system TOC cards, gilt CTA plate)
- resources, resource_index (elevated cards, bronze counts; fixed a
  featured-card style built on raw gold hex)
- names_of_god, tetragrammaton (scripture plates, chip actions)
- biblical_angels, biblical_covenants, biblical_festivals
- biblical_prophets, twelve_apostles, women_of_the_bible,
  fruits_of_spirit
- parables, interlinear_landing
- family_tree_person, family_tree_search (muted gender inks, gold for
  the messianic line)
- family_tree_ancestors, _descendants, _generation, _lineage
- search (scripture-plate results, gold-washed <mark> highlights),
  stars (star/gilt tokens), stats (stat-card grids in old-style
  numerals)
- commentary_index, cross_references_index (in-place TOC variants),
  error (404/500 rebuilt as a framed plate with the lost-sheep parable
  rubricated — Luke 15:4)
- reading_plan_detail (accent progress UI), topic_detail (scripture
  plates), strongs_language_index, stories_kids_index (~190 lines of
  purple dark-mode CSS removed)

Also fixed the last stragglers the sweep verifier found: raw #4a7c59
JS outlines in story_detail and the shared tree keyboard-nav partial,
and an undefined --border-color-light variable in stories_index.

All 976 tests pass; data validation 9/9; every template compiles.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-08 00:58:22 -04:00

305 lines
11 KiB
HTML

{% extends "base.html" %}
{% block title %}Biblical Covenants - KJV Study{% endblock %}
{% block description %}Explore God's covenants throughout redemptive history—from Noah to the New Covenant in Christ's blood.{% endblock %}
{% block head %}
<style>
.covenant-section {
margin: 1.5rem 0;
padding-top: 1rem;
}
.covenant-section:not(:first-of-type) {
border-top: 1px solid var(--border-color);
}
/* Category headings — small caps over a gold-tipped rule */
.covenant-section > h2 {
position: relative;
font-size: 0.95rem !important;
font-weight: 600;
font-style: normal !important;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-secondary) !important;
margin: 0 0 1.25rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--border-color);
max-width: 60%;
}
.covenant-section > h2::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 2.75rem;
height: 1px;
background: var(--gold);
}
.covenant-entry {
margin: 1.5rem 0 2rem 0;
}
.covenant-name {
font-size: 1.8rem;
font-weight: 400;
margin-bottom: 0.25rem;
}
.covenant-name a {
color: var(--link-color);
text-decoration: none;
}
.covenant-name a:hover {
color: var(--link-hover);
border-bottom: 1px solid var(--link-hover);
}
.covenant-title {
font-size: 1.1rem;
color: var(--text-secondary);
font-style: italic;
margin-bottom: 1rem;
}
.covenant-description {
max-width: 60%;
font-size: 1.2rem;
line-height: 1.9;
margin: 1.5rem 0;
}
.verse-list {
margin: 1.5rem 0 0 0;
max-width: 60%;
}
/* Key verses — scripture plates with a gilt spine */
.verse-item {
margin: 1.25rem 0;
padding: 1.25rem 1.5rem;
background: var(--bg-elevated);
border: 1px solid var(--border-color-dark);
border-left: 3px solid var(--gold);
border-radius: 0 8px 8px 0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.verse-item:hover {
border-top-color: var(--accent);
border-right-color: var(--accent);
border-bottom-color: var(--accent);
box-shadow: var(--shadow-soft);
}
.verse-ref {
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--bronze);
margin-bottom: 0.6rem;
}
.verse-ref a {
color: var(--bronze) !important;
text-decoration: none;
border-bottom: none;
}
.verse-ref a:hover {
color: var(--accent-strong) !important;
border-bottom: 1px solid currentColor;
}
.verse-text {
font-style: italic;
color: var(--text-strong);
line-height: 1.85;
font-size: 1.15rem;
}
.covenants-actions {
margin: 1rem 0 1.5rem;
}
.covenants-download-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.9rem;
font-size: 0.9rem;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border-color-dark);
border-radius: 6px;
text-decoration: none;
transition: all 0.2s;
}
.covenants-download-btn:hover {
background: var(--accent-softer);
border-color: var(--accent);
color: var(--accent-strong);
text-decoration: none;
}
.covenants-download-btn svg {
width: 16px;
height: 16px;
}
{% include "partials/_toc_styles.html" %}
@media print {
.covenants-actions,
.covenants-download-btn,
.toc {
display: none !important;
}
.covenant-description,
.verse-list,
.verse-text,
.intro-text {
max-width: 100% !important;
}
.covenant-entry {
page-break-inside: avoid;
}
.sidenote,
.marginnote {
display: block;
float: none;
width: 100%;
margin: 0.5rem 0;
font-size: 0.9rem;
color: var(--text-secondary);
}
}
</style>
{% endblock %}
<script>
document.body.dataset.resourceReader = 'true';
</script>
{% block content %}
<h1>Biblical Covenants</h1>
<p class="subtitle">God's Covenantal Framework Throughout Redemptive History</p>
{% if pdf_available %}
<div class="covenants-actions">
<a class="covenants-download-btn" href="/biblical-covenants/pdf">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Download All Covenants (PDF)
</a>
</div>
{% endif %}
<nav class="toc" id="toc">
<h2>Contents</h2>
<ul id="toc-list"></ul>
</nav>
<section>
<p class="intro-text"><span class="newthought">The covenant concept</span> provides the structural framework for understanding God's dealings with humanity throughout Scripture. A covenant (Hebrew בְּרִית, <em>berith</em>; Greek διαθήκη, <em>diathēkē</em>) represents a solemn, binding agreement between parties, establishing relationship and defining obligations.<label for="sn-covenants" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-covenants" class="margin-toggle"/>
<span class="sidenote">Ancient Near Eastern covenants followed established patterns: preamble, historical prologue, stipulations, witnesses, and blessings/curses. Biblical covenants often echo these structures while maintaining unique theological characteristics—particularly in their unilateral nature and gracious provisions.</span> These divine compacts reveal God's sovereignty, faithfulness, and redemptive purposes across the ages.</p>
<p class="intro-text">Scripture distinguishes between conditional and unconditional covenants. Conditional covenants tie blessing to human obedience (as with the Mosaic covenant), while unconditional covenants rest entirely upon divine promise and performance (as with the Abrahamic and New Covenants).<label for="sn-types" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-types" class="margin-toggle"/>
<span class="sidenote">The theological debate between covenant theology and dispensationalism centers largely on how these various covenants relate to one another and to the church. Both traditions affirm the covenants' reality and significance, differing primarily in their understanding of continuity and fulfillment.</span> Together, these covenants trace the unfolding drama of redemption from creation's curse to glorification's crown.</p>
</section>
{% for category, covenants in covenants_data.items() %}
<section class="covenant-section">
<h2>{{ category }}</h2>
{% for covenant_name, covenant in covenants.items() %}
<article class="covenant-entry">
<h3 class="covenant-name">
<a href="/biblical-covenants/{{ covenant_name|slugify }}">{{ covenant_name }}</a>
</h3>
<p class="covenant-title">{{ covenant.title }}</p>
<div class="covenant-description">
<p>{{ covenant.description | link_verses | link_names | safe }}</p>
</div>
{% if covenant.verses %}
<div class="verse-list">
{% for verse in covenant.verses %}
<div class="verse-item">
<div class="verse-ref">
{% set ref_parts = verse.reference.split(' ') %}
{% if ref_parts|length >= 2 %}
{% set chapter_verse = ref_parts[-1] %}
{% if ':' in chapter_verse %}
{% set chapter = chapter_verse.split(':')[0] %}
{% set verse_num = chapter_verse.split(':')[1] %}
{% set book = ' '.join(ref_parts[:-1]) %}
<a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse_num }}">{{ verse.reference }}</a>
{% endif %}
{% endif %}
</div>
<div class="verse-text">{{ verse.text | link_names | safe }}</div>
</div>
{% endfor %}
</div>
{% endif %}
</article>
{% endfor %}
</section>
{% endfor %}
<section>
<h2>Covenantal Theology</h2>
<p class="intro-text">Understanding the biblical covenants illuminates numerous theological truths:</p>
<p class="intro-text"><span class="newthought">Progressive revelation</span>, wherein each covenant builds upon previous ones, moving from universal scope (Noahic) to national focus (Mosaic, Davidic) to universal fulfillment (New Covenant). This progression demonstrates God's orderly unfolding of His redemptive plan across the ages.</p>
<p class="intro-text"><span class="newthought">Grace and Law</span>, for even conditional covenants presuppose grace—Israel's election preceded Sinai's demands. The Law revealed sin and pointed to the need for a Savior, never offering salvation by works but always requiring faith in God's promise.<label for="sn-grace" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-grace" class="margin-toggle"/>
<span class="sidenote">Paul's argument in Galatians hinges on recognizing that the Abrahamic covenant of promise (Genesis 15) preceded the Mosaic covenant of law (Exodus 19-20) by 430 years. The Law could not annul the promise, nor substitute works for faith as the means of justification.</span></p>
<p class="intro-text"><span class="newthought">Christological fulfillment</span>, as every covenant finds its ultimate realization in Christ. He is the seed of Abraham, the prophet like Moses, the Son of David, and the mediator of the New Covenant. In Him, all God's promises find their 'Yes and Amen.'</p>
<p class="intro-text"><span class="newthought">Covenantal faithfulness</span>, for God's unwavering commitment to His covenant promises demonstrates His character. Though Israel repeatedly violated the covenant, God remained faithful to His word—a truth providing assurance to all who trust in His covenantal commitments through Christ.<label for="sn-faithfulness" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-faithfulness" class="margin-toggle"/>
<span class="sidenote">The Hebrew word חֶסֶד (<em>chesed</em>)—often translated "lovingkindness" or "steadfast love"—specifically describes covenant loyalty. It appears repeatedly in contexts emphasizing God's unwavering commitment to His covenantal obligations despite human unfaithfulness.</span></p>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Generate TOC from h2 and h3 headings
const tocList = document.getElementById('toc-list');
const headings = document.querySelectorAll('section h2, section h3, section article h3');
headings.forEach((heading) => {
if (!heading.id) {
heading.id = 'section-' + heading.textContent.toLowerCase().replace(/[^a-z0-9]+/g, '-');
}
const li = document.createElement('li');
if (heading.tagName === 'H3') li.classList.add('toc-h3');
const a = document.createElement('a');
a.href = '#' + heading.id;
a.textContent = heading.textContent;
li.appendChild(a);
tocList.appendChild(li);
});
// Simple keyboard navigation
KJVNav.initSimpleNav('.covenants-download-btn, .intro-text, .covenant-name, .covenant-description > p, .verse-item');
});
</script>
{% endblock %}