kjvstudy.org/kjvstudy_org/templates/resources.html

{% extends "base.html" %}

{% block title %}Theological Resources - KJV Study{% endblock %}
{% block description %}Explore comprehensive biblical resources including people, theology, history, and study tools{% endblock %}

{% block head %}
<style>
p.intro-text {
    max-width: 65%;
    font-size: 1.2rem;
    line-height: 1.9;
    margin: 1.5rem 0 3rem 0;
}

.resource-category {
    margin-bottom: 3rem;
}

/* Category headings — small caps over a gold-tipped rule */
.category-title,
#additional-tools 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);
}

#additional-tools h2 {
    margin-top: 3rem;
}

.category-title::after,
#additional-tools h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.75rem;
    height: 1px;
    background: var(--gold);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.resource-card {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    background: var(--bg-elevated);
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-color);
}

.resource-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

.resource-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    transition: color 0.15s ease;
}

.resource-card:hover h3 {
    color: var(--accent-strong);
}

.resource-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    color: var(--bronze);
    font-weight: 600;
}

.resource-card.featured {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold-soft), var(--bg-elevated));
}

.resource-card.featured:hover {
    border-color: var(--gold);
}

.resource-count {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bronze);
    margin-bottom: 0.75rem;
}

.resource-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .intro-text {
        max-width: 100%;
        font-size: 1.1rem;
        line-height: 1.8;
    }

    .resource-card {
        padding: 1.25rem;
    }

    .resource-card h3 {
        font-size: 1.15rem;
        margin-bottom: 0.6rem;
    }

    .resource-category {
        margin-bottom: 2.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<h1>Theological Resources</h1>
<p class="subtitle">A Curated Collection of Biblical Study Materials</p>

<div>
    <p class="intro-text"><span class="newthought">These resources</span> provide comprehensive explorations of biblical people, theological concepts, historical contexts, and study tools. Each section offers detailed treatments grounded in the Authorized King James Version, with careful attention to scriptural accuracy and theological precision.</p>
</div>

{% for category, items in resources.items() %}
<div id="{{ category | lower | replace(' ', '-') }}" class="resource-category">
    <h2 class="category-title">{{ category }}</h2>
    <div class="resource-grid">
        {% for resource in items %}
        <a href="{{ resource.url }}" class="resource-card{% if resource.badge %} featured{% endif %}">
            <h3>
                {{ resource.name }}
                {% if resource.badge %}
                <span class="resource-badge">{{ resource.badge }}</span>
                {% endif %}
            </h3>
            <div class="resource-count">{{ resource.count }}</div>
            <p class="resource-description">{{ resource.description }}</p>
        </a>
        {% endfor %}
    </div>
</div>
{% endfor %}

<div id="additional-tools">
    <h2>Additional Tools</h2>
    <p>Beyond these theological resources, explore our <a href="/reading-plans">Reading Plans</a> for structured Bible study, browse the <a href="/topics">Topical Index</a> for thematic studies, or use the <a href="/search">Search</a> to find specific passages.</p>
</div>

<script>
// Use standardized grid navigation from base.js
KJVNav.initGridNav('.resource-card', { gridSelector: '.resource-grid' });
</script>
{% endblock %}