From b0ac14fff039770f86d78ada6ebbb196b514d2b9 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Thu, 20 Nov 2025 18:10:35 -0500 Subject: [PATCH] Remove sidebar background for clean text-only design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Simplify sidebar to pure typography with no background: - Remove gradient background, border, shadow, border-radius - Set background to transparent throughout - Remove padding backgrounds from all elements - Simplify link hover (no background, just color change) - Minimal current indicator (bold only, no background/border) - Lighter, more minimal scrollbar - Reduce heading emphasis and border weight - Make context-path italic with subtle left border Creates an elegant, minimal sidebar that's just smart text positioned on the page, matching the literary aesthetic. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/base.html | 53 +++++++++++++++----------------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index 50153e0..36f3655 100644 --- a/kjvstudy_org/templates/base.html +++ b/kjvstudy_org/templates/base.html @@ -120,37 +120,34 @@ width: 220px; max-height: calc(100vh - 4rem); overflow-y: auto; - background: linear-gradient(to bottom, #fafafa 0%, #f8f8f8 100%); - border: 1px solid #ddd; - border-radius: 2px; - padding: 1.25rem; + background: transparent; + padding: 0; font-size: 0.8rem; line-height: 1.5; - box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 100; } .nav-sidebar::-webkit-scrollbar { - width: 6px; + width: 4px; } .nav-sidebar::-webkit-scrollbar-track { - background: #f0f0f0; + background: transparent; } .nav-sidebar::-webkit-scrollbar-thumb { - background: #ccc; - border-radius: 3px; + background: #ddd; + border-radius: 2px; } .nav-sidebar h3 { - font-size: 0.9rem; + font-size: 0.85rem; font-weight: 600; font-style: italic; - margin: 0 0 0.75rem 0; - padding-bottom: 0.5rem; - border-bottom: 1px solid #ddd; - color: #333; + margin: 0 0 0.5rem 0; + padding-bottom: 0.4rem; + border-bottom: 1px solid #eee; + color: #555; } .nav-sidebar ul { @@ -164,26 +161,21 @@ } .nav-sidebar a { - color: #555; + color: #666; text-decoration: none; border-bottom: none; display: block; - padding: 0.25rem 0.5rem; - border-radius: 2px; - transition: all 0.2s; + padding: 0.2rem 0; + transition: color 0.2s; } .nav-sidebar a:hover { color: #000; - background: rgba(0,0,0,0.05); } .nav-sidebar a.current { color: #000; - background: rgba(0,0,0,0.08); font-weight: 600; - border-left: 3px solid #333; - padding-left: 0.75rem; } .nav-sidebar .testament-section { @@ -204,18 +196,21 @@ } .nav-sidebar .context-path { - background: #f0f0f0; - padding: 0.75rem; + background: transparent; + padding: 0 0 0.75rem 0; margin-bottom: 1rem; - border-left: 3px solid #666; - font-size: 0.8rem; - line-height: 1.8; - color: #555; + border-left: 2px solid #ccc; + padding-left: 0.5rem; + font-size: 0.75rem; + line-height: 1.6; + color: #666; + font-style: italic; } .nav-sidebar .context-path strong { - color: #000; + color: #333; font-weight: 600; + font-style: normal; } /* Hide sidebar on smaller screens */