From ea71c9c2aa9d52a16e72f29086cb1f82aeb7f5bc Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Mon, 26 May 2025 21:03:24 -0400 Subject: [PATCH] Add Bible book category color coding and enhanced hover effects Introduces color-coded styling for different Bible book categories (Torah, Historical, Wisdom, Prophets, Gospels, etc.) with distinct left borders and hover states. Also improves book card hover animations with animated top border and enhanced shadows. --- kjvstudy_org/static/style.css | 163 ++++++++++++++++++++++++++++++++-- 1 file changed, 158 insertions(+), 5 deletions(-) diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css index b88411e..16cb0f0 100644 --- a/kjvstudy_org/static/style.css +++ b/kjvstudy_org/static/style.css @@ -19,6 +19,18 @@ --font-serif: 'Crimson Text', 'Times New Roman', 'Times', serif; --font-sans: 'Crimson Text', 'Times New Roman', 'Times', serif; --font-display: 'Crimson Text', 'Times New Roman', 'Times', serif; + + /* Bible Book Category Colors */ + --torah-color: #8B4513; + --historical-color: #CD853F; + --wisdom-color: #DAA520; + --major-prophets-color: #A0522D; + --minor-prophets-color: #A52A2A; + --gospels-color: #4169E1; + --acts-color: #6495ED; + --pauline-color: #1E90FF; + --general-epistles-color: #4682B4; + --apocalyptic-color: #191970; } * { @@ -297,18 +309,33 @@ div { padding: 0.75rem; text-decoration: none; box-shadow: var(--shadow-sm); - transition: - transform 0.2s ease, - box-shadow 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--border-color); color: var(--text-primary); position: relative; -webkit-tap-highlight-color: transparent; } +.book-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); + transform: scaleX(0); + transition: transform 0.3s ease; +} + .book-card:hover { - box-shadow: var(--shadow-sm); - border-color: var(--border-color); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + border-color: var(--primary-color); +} + +.book-card:hover::before { + transform: scaleX(1); } /* Testament Divider */ @@ -1691,3 +1718,129 @@ label, table, th, td, blockquote, pre, code { font-family: 'Crimson Text', 'Times New Roman', serif !important; } + +/* Bible Book Category Styles */ +.bible-book { + border-left: 4px solid var(--border-color); + transition: border-left-color 0.2s ease; +} + +.bible-book.torah { + border-left-color: var(--torah-color); +} +.bible-book.torah:hover { + border-left-color: var(--torah-color); + box-shadow: 0 4px 8px rgba(139, 69, 19, 0.2); +} +.bible-book.active.torah { + border-left-color: var(--torah-color); + background: rgba(139, 69, 19, 0.1); +} + +.bible-book.historical { + border-left-color: var(--historical-color); +} +.bible-book.historical:hover { + border-left-color: var(--historical-color); + box-shadow: 0 4px 8px rgba(205, 133, 63, 0.2); +} +.bible-book.active.historical { + border-left-color: var(--historical-color); + background: rgba(205, 133, 63, 0.1); +} + +.bible-book.wisdom { + border-left-color: var(--wisdom-color); +} +.bible-book.wisdom:hover { + border-left-color: var(--wisdom-color); + box-shadow: 0 4px 8px rgba(218, 165, 32, 0.2); +} +.bible-book.active.wisdom { + border-left-color: var(--wisdom-color); + background: rgba(218, 165, 32, 0.1); +} + +.bible-book.major-prophets { + border-left-color: var(--major-prophets-color); +} +.bible-book.major-prophets:hover { + border-left-color: var(--major-prophets-color); + box-shadow: 0 4px 8px rgba(160, 82, 45, 0.2); +} +.bible-book.active.major-prophets { + border-left-color: var(--major-prophets-color); + background: rgba(160, 82, 45, 0.1); +} + +.bible-book.minor-prophets { + border-left-color: var(--minor-prophets-color); +} +.bible-book.minor-prophets:hover { + border-left-color: var(--minor-prophets-color); + box-shadow: 0 4px 8px rgba(165, 42, 42, 0.2); +} +.bible-book.active.minor-prophets { + border-left-color: var(--minor-prophets-color); + background: rgba(165, 42, 42, 0.1); +} + +.bible-book.gospels { + border-left-color: var(--gospels-color); +} +.bible-book.gospels:hover { + border-left-color: var(--gospels-color); + box-shadow: 0 4px 8px rgba(65, 105, 225, 0.2); +} +.bible-book.active.gospels { + border-left-color: var(--gospels-color); + background: rgba(65, 105, 225, 0.1); +} + +.bible-book.acts { + border-left-color: var(--acts-color); +} +.bible-book.acts:hover { + border-left-color: var(--acts-color); + box-shadow: 0 4px 8px rgba(100, 149, 237, 0.2); +} +.bible-book.active.acts { + border-left-color: var(--acts-color); + background: rgba(100, 149, 237, 0.1); +} + +.bible-book.pauline { + border-left-color: var(--pauline-color); +} +.bible-book.pauline:hover { + border-left-color: var(--pauline-color); + box-shadow: 0 4px 8px rgba(30, 144, 255, 0.2); +} +.bible-book.active.pauline { + border-left-color: var(--pauline-color); + background: rgba(30, 144, 255, 0.1); +} + +.bible-book.general-epistles { + border-left-color: var(--general-epistles-color); +} +.bible-book.general-epistles:hover { + border-left-color: var(--general-epistles-color); + box-shadow: 0 4px 8px rgba(70, 130, 180, 0.2); +} +.bible-book.active.general-epistles { + border-left-color: var(--general-epistles-color); + background: rgba(70, 130, 180, 0.1); +} + +.bible-book.apocalyptic { + border-left-color: var(--apocalyptic-color); +} +.bible-book.apocalyptic:hover { + border-left-color: var(--apocalyptic-color); + box-shadow: 0 4px 8px rgba(25, 25, 112, 0.2); +} +.bible-book.active.apocalyptic { + border-left-color: var(--apocalyptic-color); + background: rgba(25, 25, 112, 0.1); +}