kjvstudy.org/kjvstudy_org/templates/tetragrammaton.html

{% extends "base.html" %}

{% block title %}{{ content.title }} - KJV Study{% endblock %}
{% block description %}The sacred four-letter name of God (YHWH) - its meaning, pronunciation, and theological significance{% endblock %}

{% block head %}
<style>
/* "Key Scripture" — small caps over a gold-tipped rule (apparatus heading) */
section > h3 {
    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: 2rem 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
    max-width: 55%;
}

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

/* Scripture plates — quoted verses with a gilt spine */
.verse-plate {
    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;
    max-width: 55%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.verse-plate:hover {
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: var(--shadow-soft);
}

.verse-plate strong a {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--bronze) !important;
    text-decoration: none;
    border-bottom: none;
}

.verse-plate strong a:hover {
    color: var(--accent-strong) !important;
    border-bottom: 1px solid currentColor;
}

.verse-text {
    color: var(--text-strong);
    font-style: italic;
    line-height: 1.85;
    font-size: 1.15rem;
}

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

.tetragrammaton-actions {
    margin: 1rem 0 1.5rem;
}

.tetragrammaton-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    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;
}

.tetragrammaton-download-btn:hover {
    background: var(--accent-softer);
    border-color: var(--accent);
    color: var(--accent-strong);
}

.tetragrammaton-download-btn svg {
    width: 14px;
    height: 14px;
}

.back-link {
    display: inline-block;
    padding: 0.45rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-dark) !important;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.back-link:hover {
    border-color: var(--accent) !important;
    color: var(--accent-strong);
    background: var(--accent-softer);
}

@media (max-width: 768px) {
    section > h3,
    .verse-plate {
        max-width: 100%;
    }
}

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

    section {
        page-break-inside: avoid;
    }

    section > h3,
    .verse-plate {
        max-width: 100% !important;
    }

    .sidenote,
    .marginnote {
        display: block;
        float: none;
        width: 100%;
        margin: 0.5rem 0;
        font-size: 0.9rem;
        color: var(--text-secondary);
    }
}
</style>
{% endblock %}

{% block content %}
<h1>{{ content.title }}</h1>
<p class="subtitle">{{ content.subtitle }}</p>

{% if pdf_available %}
<div class="tetragrammaton-actions">
    <a class="tetragrammaton-download-btn" href="/tetragrammaton/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 Study (PDF)
    </a>
</div>
{% endif %}

<nav class="toc" id="toc">
    <h2>Contents</h2>
    <ul id="toc-list"></ul>
</nav>

<section>
    <p>{{ content.introduction | safe }}</p>
</section>

{% for section in content.sections %}
<section>
    <h2>{{ section.heading }}</h2>

    <p>{{ section.content | safe }}</p>

    {% if section.verses %}
    <h3>Key Scripture</h3>
    {% for verse in section.verses %}
    <p class="verse-plate">
        <strong><a href="/book/{{ verse.reference.rsplit(' ', 1)[0] }}/chapter/{{ verse.reference.rsplit(' ', 1)[1].split(':')[0] }}/verse/{{ verse.reference.rsplit(' ', 1)[1].split(':')[1] if ':' in verse.reference else '1' }}">{{ verse.reference }}</a></strong><br/>
        <em class="verse-text">{{ verse.text }}</em>
    </p>
    {% endfor %}
    {% endif %}
</section>
{% endfor %}

<section>
    <h2>Conclusion</h2>
    <p>{{ content.conclusion | safe }}</p>
</section>

<section>
    <p><a href="/resources" class="back-link">← Back to Resources</a></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');

    headings.forEach((heading, index) => {
        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('.tetragrammaton-download-btn, section > p, section h2, section h3');
});
</script>
{% endblock %}