Files
kjvstudy.org/kjvstudy_org/templates/base.html
T
kennethreitz cf362ce890 Elevate site with classical typography and literary prose
Enhance base.html with refined typography:
- Larger, more elegant heading sizes with proper spacing
- Improved paragraph leading and font sizing
- Enhanced link styling with subtle underlines
- Refined breadcrumb navigation with italic styling
- Elegant verse lookup with gradient background
- Section dividers and ornamental breaks

Rewrite homepage with scholarly, classical prose:
- Expanded introduction with historical context and literary detail
- Quote from the translators' original preface
- Hebrew and Greek terms in sidenotes (Torah, Ḥokhmah, Nevi'im, ἀποκάλυψις)
- More elevated descriptions of all biblical sections
- Classical references (Cruden's Concordance, etc.)
- Longer, more flowing sentences in period style
- Proper theological and scholarly terminology throughout

Transform the entire aesthetic to feel like a proper work of biblical
scholarship from a classical literary tradition.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 18:02:33 -05:00

266 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{% block title %}Authorized King James Version Bible{% endblock %}</title>
<meta name="description" content="{% block description %}Study the Authorized King James Version Bible{% endblock %}"/>
<link rel="stylesheet" href="/static/tufte.css"/>
{% block head %}{% endblock %}
<style>
/* Enhanced typography and spacing */
body {
counter-reset: sidenote-counter;
}
article {
padding: 2rem 5%;
}
h1, h2, h3 {
font-weight: 400;
font-style: normal;
}
h1 {
font-size: 2.8rem;
line-height: 1.2;
margin-top: 3rem;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
h2 {
font-size: 2rem;
line-height: 1.3;
margin-top: 3rem;
margin-bottom: 1rem;
font-style: italic;
}
p {
font-size: 1.4rem;
line-height: 2;
margin-top: 1.4rem;
}
/* Drop cap for opening paragraphs */
.newthought {
font-variant: small-caps;
letter-spacing: 0.05em;
}
/* Refined breadcrumb navigation */
.breadcrumb {
margin: 2rem 0 3rem 0;
font-size: 0.95rem;
color: #666;
font-style: italic;
border-bottom: 1px solid #eee;
padding-bottom: 1rem;
}
.breadcrumb a {
color: #333;
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover {
color: #000;
}
.breadcrumb-separator {
margin: 0 0.75rem;
color: #999;
}
/* Elegant verse lookup */
.verse-lookup {
margin: 1.5rem 0 3rem 0;
padding: 1.5rem;
background: linear-gradient(to bottom, #fafafa 0%, #f5f5f5 100%);
border: 1px solid #e5e5e5;
border-radius: 2px;
width: 55%;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}
.verse-lookup-input {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1.1rem;
border: 1px solid #d0d0d0;
border-radius: 2px;
font-family: et-book, Palatino, "Palatino Linotype", Georgia, serif;
background: white;
transition: all 0.2s;
}
.verse-lookup-input:focus {
outline: none;
border-color: #888;
box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.verse-lookup-label {
display: block;
margin-bottom: 0.75rem;
font-size: 0.95rem;
color: #555;
font-style: italic;
letter-spacing: 0.02em;
}
.verse-lookup-error {
display: none;
margin-top: 0.75rem;
color: #a33;
font-size: 0.9rem;
font-style: italic;
}
/* Enhanced link styling */
a {
color: #333;
text-decoration: none;
border-bottom: 1px solid #ddd;
transition: all 0.2s;
}
a:hover {
color: #000;
border-bottom-color: #000;
}
/* Section dividers */
section {
margin-top: 3rem;
padding-top: 2rem;
}
section:not(:first-of-type) {
border-top: 1px solid #eee;
}
/* Ornamental breaks */
.ornament {
text-align: center;
margin: 3rem 0;
color: #999;
font-size: 1.5rem;
letter-spacing: 1rem;
}
</style>
</head>
<body>
<article>
<div class="verse-lookup">
<label class="verse-lookup-label" for="verse-search">Quick Verse Lookup</label>
<input
type="text"
id="verse-search"
class="verse-lookup-input"
placeholder="e.g., John 3:16 or Genesis 1:1"
autocomplete="off"
/>
<div id="verse-lookup-error" class="verse-lookup-error"></div>
</div>
{% if breadcrumbs %}
<nav class="breadcrumb">
{% for crumb in breadcrumbs %}
{% if not loop.last %}
<a href="{{ crumb.url }}">{{ crumb.text }}</a>
<span class="breadcrumb-separator">&gt;</span>
{% else %}
<span>{{ crumb.text }}</span>
{% endif %}
{% endfor %}
</nav>
{% endif %}
{% block content %}{% endblock %}
</article>
<script type="text/javascript">
// Quick verse lookup functionality
(function() {
var input = document.getElementById('verse-search');
var errorDiv = document.getElementById('verse-lookup-error');
function parseVerseReference(text) {
// Match patterns like "John 3:16" or "1 John 3:16" or "Genesis 1:1"
var pattern = /^(\d?\s*[a-z]+)\s+(\d+):(\d+)$/i;
var match = text.trim().match(pattern);
if (!match) {
return null;
}
var book = match[1].trim();
var chapter = match[2];
var verse = match[3];
// Capitalize book name properly
book = book.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ');
return {
book: book,
chapter: chapter,
verse: verse
};
}
function showError(message) {
errorDiv.textContent = message;
errorDiv.style.display = 'block';
}
function hideError() {
errorDiv.style.display = 'none';
}
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
hideError();
var ref = parseVerseReference(input.value);
if (ref) {
// Navigate to the verse
window.location.href = '/book/' + ref.book + '/chapter/' + ref.chapter + '/verse/' + ref.verse;
} else {
showError('Invalid format. Please use format like "John 3:16" or "Genesis 1:1"');
}
}
});
// Hide error when user starts typing
input.addEventListener('input', hideError);
})();
// Gauges analytics
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '6834bd650d851064ae28dc13');
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
t.src = 'https://d2fuc4clr7gvcn.cloudfront.net/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>