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

349 lines
13 KiB
HTML

{% extends "base.html" %}
{% block title %}Biblical Prophets - KJV Study{% endblock %}
{% block description %}Explore the prophets of the Old Testament, from Isaiah to Malachi, their messages and Messianic prophecies.{% endblock %}
{% block head %}
<style>
.prophet-section {
margin: 1.5rem 0;
padding-top: 1rem;
}
.prophet-section:not(:first-of-type) {
border-top: 1px solid var(--border-color);
}
/* Category headings — small caps over a gold-tipped rule */
.prophet-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%;
}
.prophet-section > h2::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 2.75rem;
height: 1px;
background: var(--gold);
}
.prophet-entry {
margin: 1.5rem 0 2rem 0;
}
.prophet-name {
font-size: 1.8rem;
font-weight: 400;
margin-bottom: 0.25rem;
}
.prophet-name a {
color: var(--link-color);
text-decoration: none;
}
.prophet-name a:hover {
color: var(--link-hover);
border-bottom: 1px solid var(--link-hover);
}
.prophet-title {
font-size: 1.1rem;
color: var(--text-secondary);
font-style: italic;
margin-bottom: 1rem;
}
.prophets-actions {
display: flex;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}
.action-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;
cursor: pointer;
transition: all 0.2s;
}
.action-btn:hover {
background: var(--accent-softer);
border-color: var(--accent);
color: var(--accent-strong);
text-decoration: none;
}
.action-btn svg {
width: 16px;
height: 16px;
}
.action-btn.playing {
background: var(--accent-fill);
color: var(--on-accent);
border-color: var(--accent-fill);
}
.prophet-description {
max-width: 60%;
font-size: 1.2rem;
line-height: 1.9;
margin: 1.5rem 0;
}
.verse-list {
margin: 1.5rem 0 0 0;
}
/* Key verses — small scripture plates with a gilt spine */
.verse-item {
margin: 1.25rem 0;
max-width: 60%;
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;
margin-bottom: 0.6rem;
color: var(--bronze);
}
.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;
}
@media (max-width: 768px) {
.prophet-description,
.verse-item,
.intro-text,
.prophet-section > h2 {
max-width: 100%;
}
}
{% include "partials/_toc_styles.html" %}
@media print {
.prophets-actions,
.toc {
display: none !important;
}
.prophet-description,
.verse-item,
.verse-text,
.intro-text {
max-width: 100% !important;
}
.prophet-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 Prophets</h1>
<p class="subtitle">Messengers of the Most High</p>
<div class="prophets-actions">
<button class="action-btn" id="listen-btn">
<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="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
</svg>
Listen
</button>
{% if resource_pdf_available %}
<a class="action-btn" href="/biblical-prophets/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 PDF
</a>
{% endif %}
</div>
<nav class="toc" id="toc">
<h2>Contents</h2>
<ul id="toc-list"></ul>
</nav>
<section>
<p class="intro-text"><span class="newthought">The prophetic ministry</span> represents one of the most extraordinary phenomena in sacred history. These men, called by divine election and empowered by the Holy Spirit, declared "Thus saith the LORD" with absolute authority.<label for="sn-prophets" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-prophets" class="margin-toggle"/>
<span class="sidenote">The Hebrew term נָבִיא (<em>navi</em>) derives from a root meaning "to call" or "to announce," emphasizing the prophet's role as spokesman for God. The Greek προφήτης (<em>prophētēs</em>) carries similar meaning: one who speaks forth divine revelation.</span> They rebuked kings, warned nations, comforted the afflicted, and foretold events centuries before their fulfillment.</p>
<p class="intro-text">The prophets stood in that most solemn office—mediators between heaven and earth, bearing messages of both judgment and mercy. Their words, though often rejected in their own time, have proven unfailingly accurate in their predictions and eternally relevant in their moral and spiritual instruction.<label for="sn-messianic" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-messianic" class="margin-toggle"/>
<span class="sidenote">The prophets provided detailed predictions of Messiah's coming: His birthplace (Micah 5:2), His virgin birth (Isaiah 7:14), His suffering (Isaiah 53), His betrayal price (Zechariah 11:12), and countless other particulars fulfilled in Christ.</span></p>
</section>
{% for category, prophets in prophets_data.items() %}
<section class="prophet-section">
<h2>{{ category }}</h2>
{% for prophet_name, prophet in prophets.items() %}
<article class="prophet-entry">
<h3 class="prophet-name">
<a href="/biblical-prophets/{{ prophet_name|slugify }}">{{ prophet_name }}</a>
</h3>
<p class="prophet-title">{{ prophet.title }}</p>
<div class="prophet-description">
<p>{{ prophet.description | link_verses | link_names | safe }}</p>
</div>
{% if prophet.verses %}
<div class="verse-list">
{% for verse in prophet.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>The Prophetic Office</h2>
<p class="intro-text">The Scriptures reveal several characteristics of the true prophet:</p>
<p class="intro-text"><span class="newthought">Divine calling</span>, not self-appointed but commissioned by God Himself. Isaiah heard the voice asking "Whom shall I send?" Jeremiah was ordained before birth. Amos protested he was no prophet's son, yet the word of the Lord came to him.</p>
<p class="intro-text"><span class="newthought">Forth-telling and fore-telling</span>, both proclaiming God's word to their generation and predicting future events. The immediate fulfillment of near prophecies authenticated their distant predictions concerning Messiah and the end times.<label for="sn-fulfillment" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-fulfillment" class="margin-toggle"/>
<span class="sidenote">Deuteronomy 18:22 provided the test: "When a prophet speaketh in the name of the LORD, if the thing follow not, nor come to pass, that is the thing which the LORD hath not spoken." A single false prophecy disqualified the claimant.</span></p>
<p class="intro-text"><span class="newthought">Suffering for truth</span>, often persecuted for their unpopular messages. Elijah fled from Jezebel. Jeremiah was cast into a dungeon. Zechariah was stoned in the temple court. Christ declared, "O Jerusalem, Jerusalem, thou that killest the prophets."</p>
<p class="intro-text"><span class="newthought">Witnesses to Christ</span>, for the testimony of Jesus is the spirit of prophecy. All their varied ministries pointed forward to the coming Redeemer, who would Himself be the Prophet like unto Moses, speaking the Father's words with ultimate authority.</p>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Listen button handler
var listenBtn = document.getElementById('listen-btn');
var isListening = false;
if (listenBtn) {
listenBtn.addEventListener('click', function() {
if (isListening) {
if (window.KJVSpeech) window.KJVSpeech.stop();
listenBtn.innerHTML = '<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="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg> Listen';
isListening = false;
return;
}
var paragraphs = document.querySelectorAll('.intro-text, .prophet-description p, .verse-text');
var text = Array.from(paragraphs).map(function(p) {
return p.textContent.trim();
}).join(' ');
if (window.KJVSpeech && text) {
window.KJVSpeech.speak(text);
listenBtn.innerHTML = '<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="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" /></svg> Stop';
isListening = true;
}
});
}
// 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('.action-btn, .intro-text, .prophet-name, .prophet-description > p, .verse-item');
});
</script>
{% endblock %}