mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Fix background color issues and reduce sidebar width
This commit is contained in:
@@ -539,4 +539,42 @@ function toggleSidebar() {
|
||||
mainContent.style.width = '100%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix background color issues
|
||||
fixBackgroundColors();
|
||||
}
|
||||
|
||||
// Fix background color issues in browsers
|
||||
function fixBackgroundColors() {
|
||||
const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
|
||||
const surfaceColor = getComputedStyle(document.documentElement).getPropertyValue('--surface-color').trim();
|
||||
|
||||
// Apply background color to main elements
|
||||
document.body.style.backgroundColor = bgColor;
|
||||
|
||||
// Apply to main content areas
|
||||
const mainContent = document.querySelector('.main-content');
|
||||
if (mainContent) {
|
||||
mainContent.style.backgroundColor = bgColor;
|
||||
}
|
||||
|
||||
// Apply to containers
|
||||
const containers = document.querySelectorAll('.container, .narrow-container, .commentary-container');
|
||||
containers.forEach(container => {
|
||||
container.style.backgroundColor = bgColor;
|
||||
});
|
||||
|
||||
// Apply to cards and content areas
|
||||
const surfaceElements = document.querySelectorAll('.verse-card, .commentary-section, .chapter-overview, .verse-text');
|
||||
surfaceElements.forEach(element => {
|
||||
element.style.backgroundColor = surfaceColor;
|
||||
});
|
||||
}
|
||||
|
||||
// Run background fix on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
fixBackgroundColors();
|
||||
|
||||
// Run again after a slight delay to catch any dynamic content
|
||||
setTimeout(fixBackgroundColors, 100);
|
||||
});
|
||||
@@ -59,11 +59,11 @@ body {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
width: 220px;
|
||||
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
padding: 2rem 0;
|
||||
padding: 1.5rem 0;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
@@ -79,14 +79,14 @@ body {
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 0 1.5rem 2rem;
|
||||
padding: 0 1rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: white;
|
||||
@@ -103,27 +103,27 @@ body {
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 0 1rem;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar-nav h3 {
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 1.5rem 0.5rem 0.75rem;
|
||||
margin: 1.25rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 0.625rem 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.15rem;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.sidebar-nav a:hover {
|
||||
@@ -173,7 +173,7 @@ body {
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
margin-left: 280px;
|
||||
margin-left: 220px;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
@@ -182,7 +182,7 @@ body {
|
||||
backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
transition: opacity 0.3s ease;
|
||||
width: calc(100% - 280px);
|
||||
width: calc(100% - 220px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -501,9 +501,9 @@ body {
|
||||
/* Tablet-specific styles */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
transform: translateX(-240px);
|
||||
-webkit-transform: translate3d(-240px, 0, 0);
|
||||
width: 200px;
|
||||
transform: translateX(-200px);
|
||||
-webkit-transform: translate3d(-200px, 0, 0);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -690,7 +690,7 @@ html,
|
||||
.layout,
|
||||
.main-content {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--background-color) !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -702,7 +702,7 @@ html,
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--background-color) !important;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@@ -711,7 +711,7 @@ html,
|
||||
.commentary-content,
|
||||
.container,
|
||||
.narrow-container {
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--background-color) !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -50,34 +50,50 @@
|
||||
<style>
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color);
|
||||
background-color: var(--background-color) !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--background-color) !important;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
transform: translateX(-240px);
|
||||
width: 200px;
|
||||
transform: translateX(-200px);
|
||||
}
|
||||
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--background-color) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color);
|
||||
|
||||
.container, .narrow-container {
|
||||
background-color: var(--background-color) !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: var(--background-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -293,9 +309,8 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div id="background-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--background-color); z-index: -1;"></div>
|
||||
<div id="background-overlay" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--background-color); z-index: -1;"></div>
|
||||
|
||||
<div class="layout" style="overflow-x: hidden;">
|
||||
<div class="layout" style="overflow-x: hidden; background-color: var(--background-color) !important; position: relative; z-index: 0;">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
@@ -303,7 +318,7 @@
|
||||
<span>📖</span>
|
||||
KJV Study
|
||||
</h1>
|
||||
<p class="sidebar-subtitle">Authorized King James Version</p>
|
||||
<p class="sidebar-subtitle" style="font-size: 0.8rem;">Authorized King James Version</p>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
@@ -316,12 +331,12 @@
|
||||
<h3 style="color: var(--torah-color); margin-bottom: 0.5rem;">Old Testament</h3>
|
||||
|
||||
<!-- Torah/Pentateuch -->
|
||||
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--torah-color); text-transform: uppercase; letter-spacing: 0.5px;">Torah/Pentateuch</h4>
|
||||
<h4 style="font-size: 0.7rem; margin: 0.4rem 0; color: var(--torah-color); text-transform: uppercase; letter-spacing: 0.5px;">Torah/Pentateuch</h4>
|
||||
{% set torah = ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy'] %}
|
||||
{% for book in books %}
|
||||
{% if book in torah %}
|
||||
<a href="/book/{{ book }}"
|
||||
class="bible-book torah {% if request.url and book in request.url.path %}active{% endif %}">
|
||||
class="bible-book torah {% if request.url and book in request.url.path %}active{% endif %}" style="padding: 0.35rem 0.5rem; font-size: 0.75rem; margin-bottom: 0.1rem;">
|
||||
{{ book }}
|
||||
</a>
|
||||
{% endif %}
|
||||
@@ -457,10 +472,10 @@
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<main class="main-content" style="background-color: var(--background-color) !important;">
|
||||
{% block breadcrumb %}{% endblock %}
|
||||
|
||||
<div class="{% block container_class %}container{% endblock %}" style="background-color: var(--background-color);">
|
||||
<div class="{% block container_class %}container{% endblock %}" style="background-color: var(--background-color) !important; position: relative; z-index: 1;">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
@@ -483,8 +498,9 @@
|
||||
sidebar.classList.remove('open');
|
||||
overlay.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
sidebar.style.transform = 'translateX(-240px)';
|
||||
sidebar.style.webkitTransform = 'translate3d(-240px, 0, 0)';
|
||||
sidebar.style.transform = 'translateX(-200px)';
|
||||
sidebar.style.webkitTransform = 'translate3d(-200px, 0, 0)';
|
||||
document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
|
||||
// For iPad/tablet
|
||||
if (window.innerWidth >= 768 && window.innerWidth <= 1024) {
|
||||
@@ -514,8 +530,13 @@
|
||||
if (isIPad || (window.innerWidth >= 768 && window.innerWidth <= 1024)) {
|
||||
document.querySelector('.main-content').style.marginLeft = '0';
|
||||
document.querySelector('.main-content').style.width = '100%';
|
||||
document.getElementById('sidebar').style.transform = 'translateX(-240px)';
|
||||
document.getElementById('sidebar').style.transform = 'translateX(-200px)';
|
||||
}
|
||||
|
||||
// Fix for black background in some browsers
|
||||
document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
document.querySelector('.main-content').style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
document.querySelector('.container') && (document.querySelector('.container').style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color'));
|
||||
});
|
||||
|
||||
// Close sidebar when clicking on links (mobile)
|
||||
|
||||
@@ -35,6 +35,8 @@
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
background-color: var(--background-color);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.verse-card {
|
||||
@@ -45,7 +47,7 @@
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--surface-color);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.verse-header {
|
||||
@@ -76,6 +78,8 @@
|
||||
.commentary-section {
|
||||
padding: 1.25rem;
|
||||
background-color: var(--surface-color);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.commentary-title {
|
||||
@@ -140,6 +144,8 @@
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.commentary-header h1 {
|
||||
@@ -240,16 +246,44 @@
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
background-color: var(--background-color);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Fix for black background in some browsers */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--background-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.container, .commentary-container, .verse-card, .commentary-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
/* Ensure background color consistency */
|
||||
.commentary-header, .commentary-meta, .chapter-overview, .verse-card {
|
||||
background-color: var(--surface-color);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Additional black background fix */
|
||||
.commentary-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100vw;
|
||||
width: 300vw;
|
||||
height: 100%;
|
||||
background-color: var(--background-color);
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -273,9 +307,9 @@ html, body {
|
||||
<h1>AI Commentary: {{ book }} {{ chapter }}</h1>
|
||||
<p>Verse-by-verse analysis and insights from the Authorized King James Version (KJV)</p>
|
||||
</header>
|
||||
<div style="background-color: var(--background-color); min-height: 20px;"></div>
|
||||
<div style="background-color: var(--background-color); min-height: 20px; position: relative; z-index: 1;"></div>
|
||||
|
||||
<div class="commentary-container">
|
||||
<div class="commentary-container" style="background-color: var(--background-color); position: relative; z-index: 1;">
|
||||
<div class="commentary-meta">
|
||||
<p><strong>Note:</strong> This AI-powered commentary is generated based on historical, theological, and scholarly sources. It's designed to assist your study but should not replace personal reflection and traditional commentaries.</p>
|
||||
</div>
|
||||
@@ -377,6 +411,12 @@ html, body {
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Fix for black background in some browsers
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
document.querySelector('.commentary-container').style.backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
|
||||
});
|
||||
|
||||
function copyVerseLink(verseNumber) {
|
||||
const url = window.location.origin + window.location.pathname + '#verse-' + verseNumber;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
|
||||
Reference in New Issue
Block a user