Files
kjvstudy.org/kjvstudy_org/templates/resources.html
T
kennethreitz 4d1b222923 Make entire resource card clickable
Wrap card in anchor tag instead of just the title, improving UX.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 13:37:21 -05:00

163 lines
4.1 KiB
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>
.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-title {
font-size: 1.4rem;
font-weight: 400;
font-style: italic;
margin-bottom: 1.5rem;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
}
.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);
border-radius: 4px;
background: var(--bg-color);
transition: all 0.2s;
text-decoration: none;
color: var(--text-color);
}
.resource-card:hover {
border-color: var(--border-color-darker);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.resource-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
color: var(--text-color);
}
.resource-card:hover h3 {
color: var(--link-hover);
}
.resource-count {
font-size: 0.8rem;
color: var(--text-tertiary);
font-style: italic;
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;
}
.category-title {
font-size: 1.3rem;
color: var(--text-color);
border-bottom: 2px solid var(--border-color-darker);
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
.resource-card {
padding: 1.25rem;
border: 2px solid var(--border-color-darker);
border-radius: 6px;
background: var(--bg-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.resource-card h3 {
font-size: 1.15rem;
margin-bottom: 0.6rem;
color: var(--text-color);
font-weight: 600;
border-bottom: 2px solid var(--border-color-darker);
padding-bottom: 2px;
}
.resource-count {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 0.65rem;
}
.resource-description {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-color);
}
.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 class="resource-category">
<h2 class="category-title">{{ category }}</h2>
<div class="resource-grid">
{% for resource in items %}
<a href="{{ resource.url }}" class="resource-card">
<h3>{{ resource.name }}</h3>
<div class="resource-count">{{ resource.count }}</div>
<p class="resource-description">{{ resource.description }}</p>
</a>
{% endfor %}
</div>
</div>
{% endfor %}
<div>
<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>
{% endblock %}