Implement automatic verse reference linking in study guide content pages.
Changes:
- Added verse linking JavaScript to study_guide_detail.html
- Supports all verse reference patterns:
* Single verses: "John 3:16"
* Verse ranges: "Romans 8:28-29"
* Comma-separated lists: "Psalms 7:17, 9:2, 18:13"
- Links verses in section content paragraphs
- Skips margin toggle label paragraphs to avoid double-linking
Now study guides like /study-guides/new-believer will have all
verse references automatically linked and hoverable for tooltips.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed the tooltip JavaScript to properly extract verse ranges from chapter pages.
Issue:
- Verse range tooltips were showing "Verse range not found"
- The selector was looking for .verse-text elements that don't exist on chapter pages
Solution:
- Updated verse extraction to query by #verse-{number} paragraph IDs
- Clone the verse paragraph and remove:
* Verse number links (.verse-number-link)
* Sidenotes and marginnotes
* Margin toggle elements
- Extract clean text content from each verse in the range
- Join multiple verses with spaces
Now verse ranges like "1 Corinthians 15:19-20" will properly fetch
and display the text of both verses in the tooltip.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement automatic linking for comma-separated verse references where
the book name is mentioned once, such as:
"Psalms 7:17, 9:2, 18:13, 21:7, 46:4, 47:2"
Changes:
- Added first-pass regex to detect comma-separated verse lists
- Parses book name once and applies it to all verses in the list
- Creates individual links for each verse in the list
- Supports both single verses and ranges in comma lists
- Maintains existing support for standalone verse references
Examples of patterns now supported:
- "Psalms 7:17, 9:2, 18:13" → individual links for each verse
- "Genesis 1:1, 2:3, 3:15" → individual links with book name
- "Matthew 5:3-12, 6:9-13" → supports ranges in comma lists
The implementation uses a two-pass approach:
1. First pass: Handle comma-separated lists
2. Second pass: Handle standalone verse references
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement support for verse ranges using anchor links in the format:
/book/{book}/chapter/{chapter}#verse-{start}-{end}
Changes:
- Updated topic_detail.html JavaScript to create anchor links for ranges
Example: "Proverbs 31:26-28" → /book/Proverbs/chapter/31#verse-26-28
- Updated topic_detail.html Jinja2 template to generate anchor links
- Enhanced base.html verse tooltip to handle both single verses and ranges
- Modified parseVerseUrl() to recognize both URL patterns:
* Single: /book/{book}/chapter/{chapter}/verse/{verse}
* Range: /book/{book}/chapter/{chapter}#verse-{start}-{end}
- Updated fetchVerseText() to fetch and combine multiple verses for ranges
- Tooltip now extracts verse ranges from chapter pages
Benefits:
- Verse ranges link directly to chapter pages with appropriate anchors
- Tooltips display full text of verse ranges
- Consistent URL structure for both single verses and ranges
- Improved caching with distinct cache keys for ranges
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement interactive tooltips that display verse text when hovering over verse reference links throughout the site.
Features:
- Automatic detection of verse links (URLs matching /book/.../chapter/.../verse/...)
- Asynchronous fetching of verse text from server
- Intelligent tooltip positioning that avoids screen edges
- Verse caching to prevent redundant requests
- Loading state indicator while fetching
- Mouse tracking for smooth tooltip movement
- Dark mode support via CSS variables
Technical implementation:
- CSS styles added in base.html (lines 88-138) with theming support
- JavaScript uses event delegation for efficient hover detection
- DOMParser API extracts verse text from fetched HTML
- Tooltip follows mouse cursor during hover
- Clean event cleanup on mouseleave
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Override Tufte CSS max-height constraints to allow sidenotes and
marginnotes to display at their natural height without being cut off.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Allow sidenote numbers to display at their natural height instead
of being constrained to 2rem.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive overviews for all 11 topics (Salvation, Prayer, Love,
Faith, Forgiveness, Holy Spirit, Hope, Peace, Wisdom, Suffering, and
Parenting). Each overview includes:
- Theological foundations and biblical doctrine
- Practical applications for daily living
- Scripture integration throughout
- Modern relevance and cultural context
Also updated topic_detail.html:
- Replaced section tags with div tags for cleaner layout
- Added JavaScript to automatically link verse references in overview text
- Verse references now clickable throughout the expanded content
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Create informational page explaining interlinear study, how to use it,
and featuring example verses. This provides discoverability and SEO
benefits while keeping the actual interlinear data integrated into
verse pages.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed standalone interlinear section since word-by-word analysis is
now integrated directly into verse pages. Removed route handlers,
sitemap entries, and navigation links.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove section tags to reduce whitespace and simplify layout,
consistent with other pages on the site.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Use details/summary HTML elements to allow users to expand/collapse
the interlinear word analysis section on verse pages.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add word-by-word analysis directly to verse pages instead of requiring
a separate /interlinear section. Includes Greek/Hebrew original text,
transliteration, Strong's numbers with links, English translation,
parsing information, and definitions.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Book links now go to interlinear view (/interlinear/book/.../chapter/1/verse/1)
instead of regular book pages (/book/...).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove all section:not(:first-of-type) border-top rules for cleaner layout
- Increase KJV text size to 1.3rem in interlinear view for better readability
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Clean up styling by removing gray background, border, padding, and width
limit from the help text section.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
On screens 480px and below, sidebar now pushes content to the right
instead of overlaying it. Includes smooth transition animation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Apply same clickable card treatment as resources page for better UX.
Users can now click anywhere on topic/book cards to navigate.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Convert People, Theology, History & Culture, and Study Tools sections
to use details/summary elements with disclosure triangles.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Reduce margins on title, verse lookup, featured studies, and footer
for a more compact, efficient layout.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add box-sizing: border-box to include padding within width.
Slightly reduce vertical padding for better fit.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removes the drop shadow in the mobile/tablet breakpoint and ensures
consistent 140px width across all screen sizes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Previously 160px on desktop and 150px on medium screens.
Now 140px everywhere for more screen real estate.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added direction: rtl to sidebar to position scrollbar on left.
Child elements reset to direction: ltr to maintain normal text flow.
This creates a more intuitive layout with the scrollbar between
the sidebar and main content rather than at the edge.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed the Recently Viewed section to simplify the sidebar:
- Removed CSS styling for recently-viewed section
- Removed HTML markup and empty state
- Removed JavaScript localStorage tracking code
This makes the sidebar cleaner and more focused on navigation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Sidebar improvements:
- Reduced top padding from 3rem to 1.5rem
- Reduced base font size from 0.75rem to 0.7rem
- Tightened line-height from 1.5 to 1.3
- Reduced all section margins from 1.5rem to 0.75rem
- Reduced list item spacing and link padding
- Reduced medium-width sidebar from 280px to 150px
Biblical Timeline TOC:
- Changed "Quick Reference" to proper "Table of Contents" heading
- Restructured events in vertical list format
- Added dates next to each event
- Enhanced styling with border, better spacing, dividers
- Made period names bolder and more prominent
- Added mobile responsive styles
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed all book list loops to filter the list first using Jinja2's
select() filter, so loop.last correctly refers to the last book that
will actually be rendered, not the last book in the original list.
This fixes issues like "Job, Psalms, Proverbs, Ecclesiastes, ."
where a book at the end of the list might not be in the books variable.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed min-height: 44px and display: inline-block from all links,
which was causing extra vertical space around inline text links.
Touch target sizing now only applies to actual interactive elements
(buttons, form inputs) that need 44px minimum height, not inline text links.
This fixes the underline spacing issue in narrow browser windows.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The tufte.css @media (prefers-color-scheme: dark) was applying
dark backgrounds to sidenotes even when the page was in light mode.
Fixed by explicitly setting:
- Light mode: transparent background with dark text (#444)
- Dark mode (manual): dark background (#151515) with light text (#aaa)
- Dark mode (system): dark background (#151515) with light text (#aaa)
Used !important to override tufte.css base styles.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed sidenotes from pure black (#000) to dark gray (#444).
Sidenotes should be visually distinct as secondary content while
maintaining good readability.
Dark mode: Changed to #aaa for appropriate contrast.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- h1: Increased to font-weight 800, size 2.2rem, pure black color
- h2: Increased to font-weight 700, size 1.65rem, removed italic style
- h3: Increased to font-weight 700, size 1.3rem
- Homepage title: Extra bold at font-weight 900, size 2.75rem
- All headings now pure #000 (white in dark mode) for maximum contrast
- Added tight letter-spacing to h1 for better readability
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced subtle backgrounds with strong borders and colors:
- Removed all rgba background tints (too subtle)
- Increased all borders from 2-3px to 4-5px thickness
- Changed border colors from CSS vars to solid #999 (strong contrast)
- Increased font-weights to 600-700 for headings
- All text now pure black (#000) instead of CSS vars
- Link underlines increased to 2-3px thickness
- Button styling: solid black background with white text
- Section dividers now 3px instead of 2px
Dark mode: All elements have explicit dark equivalents with #666 borders.
This provides much stronger visual hierarchy and readability on iOS.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced mobile experience across the entire site:
Base Template (all pages):
- Added iOS-specific webkit optimizations
- Increased all touch targets to 44px minimum (Apple HIG)
- Enhanced link visibility with 2px borders and darker colors
- Improved sidenotes with background tint and thicker borders
- Better button styling with proper tap highlights
- Stronger section dividers with 2px borders
- Improved breadcrumb contrast and weight
Homepage:
- Enhanced verse lookup with background tint and thicker border
- Better input/button styling with 2px borders
- Study entries with subtle backgrounds and better contrast
- Quick link buttons with proper touch targets and borders
- Epigraph with background tint for better visibility
- All text using primary color for maximum readability
Dark mode support for all new background tints.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhanced mobile view with better contrast and readability:
- Increased border thickness from 1px to 2px with darker colors
- Changed category titles to primary text color for prominence
- Made card borders and shadows more visible
- Improved text contrast by using primary color for descriptions
- Added font-weight and thicker underlines for links
- Increased spacing for better touch targets
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add open source attribution and GitHub link at bottom of homepage.
Styled subtly with centered text and tertiary color.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add "View Source Code" link at bottom of sidebar pointing to repository.
Styled subtly with tertiary text color and dotted underline.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed all links from kjvstudy.fly.dev to kjvstudy.org to use
the proper custom domain instead of the Fly.io subdomain.
All 31 feature links now point to kjvstudy.org.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
kennethreitz