kjvstudy.org/kjvstudy_org/templates/twelve_apostles.html

{% extends "base.html" %}

{% block title %}The Twelve Apostles - KJV Study{% endblock %}
{% block description %}Explore the lives, ministries, and legacies of the twelve apostles chosen by Jesus Christ.{% endblock %}

{% block head %}
<style>
.apostle-section {
    margin: 1.5rem 0;
    padding-top: 1rem;
}

.apostle-section:not(:first-of-type) {
    border-top: 1px solid var(--border-color);
}

/* Category headings — small caps over a gold-tipped rule */
.apostle-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%;
}

.apostle-section > h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.75rem;
    height: 1px;
    background: var(--gold);
}

.apostle-entry {
    margin: 1.5rem 0 2rem 0;
}

.apostles-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);
}

.apostle-name {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.apostle-name a {
    color: var(--link-color);
    text-decoration: none;
}

.apostle-name a:hover {
    color: var(--link-hover);
    border-bottom: 1px solid var(--link-hover);
}

.apostle-title {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 1rem;
}

.apostle-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) {
    .apostle-description,
    .verse-item,
    .intro-text,
    .apostle-section > h2 {
        max-width: 100%;
    }
}

{% include "partials/_toc_styles.html" %}

@media print {
    .apostles-actions,
    .toc {
        display: none !important;
    }

    .apostle-description,
    .verse-item,
    .verse-text,
    .intro-text {
        max-width: 100% !important;
    }

    .apostle-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>The Twelve Apostles</h1>
<p class="subtitle">Those Whom He Chose to Be With Him</p>

<div class="apostles-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 pdf_available %}
    <a class="action-btn" href="/the-twelve-apostles/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 calling of the Twelve</span> marked a pivotal moment in Christ's ministry. After a night of prayer, He summoned His disciples and chose twelve whom He named apostles (Greek ἀπόστολοι, <em>apostoloi</em>, meaning "sent ones")—men who would be with Him, witness His works, and carry His message to the world.<label for="sn-apostles" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-apostles" class="margin-toggle"/>
    <span class="sidenote">Mark's account emphasizes Christ's purpose: 'that they should be with him, and that he might send them forth to preach' (Mark 3:14). Apostleship required both intimate companionship with Christ and authoritative commission. The term distinguished them from the broader group of disciples.</span> These ordinary men—fishermen, a tax collector, a political zealot—would turn the world upside down.</p>

    <p class="intro-text">The apostolic office carried unique authority. They served as Christ's authorized representatives, eyewitnesses of His resurrection, and foundation stones of the church (Ephesians 2:20). Their teaching, preserved in the New Testament, provides the authoritative doctrinal standard for all subsequent generations.<label for="sn-authority" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-authority" class="margin-toggle"/>
    <span class="sidenote">Paul's insistence on his apostolic credentials (Galatians 1:1, 1 Corinthians 9:1) demonstrates the office's significance. True apostles had seen the risen Christ and received direct commission from Him. The signs of an apostle included miraculous authentication (2 Corinthians 12:12) and doctrinal authority.</span></p>
</section>

{% for category, apostles in apostles_data.items() %}
<section class="apostle-section">
    <h2>{{ category }}</h2>

    {% for apostle_name, apostle in apostles.items() %}
    <article class="apostle-entry">
        <h3 class="apostle-name">
          <a href="/the-twelve-apostles/{{ apostle_name|slugify }}">{{ apostle_name }}</a>
        </h3>
        <p class="apostle-title">{{ apostle.title }}</p>

        <div class="apostle-description">
            <p>{{ apostle.description | safe }}</p>
        </div>

        {% if apostle.verses %}
        <div class="verse-list">
            {% for verse in apostle.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 Apostolic Ministry</h2>
    <p class="intro-text">Understanding the Twelve's role illuminates the church's foundation and mission:</p>

    <p class="intro-text"><span class="newthought">Chosen, not volunteers</span>, for Christ selected them according to His sovereign purpose, not their merit. Their diverse backgrounds—educated and uneducated, zealous and cautious, wealthy and poor—demonstrated that apostleship rested on divine calling, not human qualification.</p>

    <p class="intro-text"><span class="newthought">Transformed by companionship</span>, as three years with Christ converted these ordinary men into pillars of the faith. Peter's transformation from impulsive denier to bold proclaimer, John's development from 'son of thunder' to apostle of love, and Thomas's progression from skeptic to confessor exemplify grace's sanctifying work.<label for="sn-transformation" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-transformation" class="margin-toggle"/>
    <span class="sidenote">Acts' portrayal of the apostles—particularly Peter's Pentecost sermon and the boldness before the Sanhedrin—shows marked contrast with their fearful desertion at Gethsemane. The resurrection and Pentecost's empowerment account for this dramatic transformation.</span></p>

    <p class="intro-text"><span class="newthought">Commissioned and sent</span>, for after the resurrection Christ gave the Great Commission, empowering the apostles to make disciples of all nations. Church tradition records their subsequent ministries spanning from Spain to India, from Ethiopia to Scythia—carrying the gospel to the known world.</p>

    <p class="intro-text"><span class="newthought">Martyred for witness</span>, as all save John sealed their testimony with blood. Their willingness to suffer and die for proclaiming Christ's resurrection provides powerful evidence of its reality. Men do not die for what they know to be false.<label for="sn-martyrdom" class="margin-toggle sidenote-number"></label>
    <input type="checkbox" id="sn-martyrdom" class="margin-toggle"/>
    <span class="sidenote">Early church tradition records Peter crucified upside down in Rome, Andrew on an X-shaped cross in Achaia, James beheaded in Jerusalem, and Thomas speared in India. While some details remain uncertain, the apostles' martyrdom testifies to their unwavering conviction in Christ's resurrection.</span></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, .apostle-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, .apostle-name, .apostle-description > p, .verse-item');
});
</script>
{% endblock %}