Add red letter toggle to sidebar

- Add toggle link at bottom of sidebar (before flourish)
- Use localStorage to persist user preference
- CSS hides .words-of-christ color when disabled
- JavaScript handles toggle and initialization on page load
- Toggle text changes between "Enable" and "Disable"

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-28 15:54:16 -05:00
parent f076cac730
commit 8d17d9ea23
+40
View File
@@ -79,6 +79,11 @@
--code-bg: #2a2a2a;
}
/* Red letter toggle - hide red letters when disabled */
[data-red-letters="disabled"] .words-of-christ {
color: inherit !important;
}
/* Override Tufte CSS sidenote constraints */
.sidenote,
.marginnote {
@@ -1296,6 +1301,15 @@
</p>
</div>
<!-- Red Letter Toggle -->
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
<p style="font-size: 0.85rem; color: var(--text-tertiary); text-align: center;">
<a href="#" id="red-letter-toggle" style="color: var(--text-tertiary); text-decoration: none; border-bottom: 1px dotted var(--border-color-dark);" onclick="toggleRedLetters(event)">
<span id="red-letter-status">Disable</span> Red Letters
</a>
</p>
</div>
<!-- Flourish -->
<div class="sidebar-flourish"></div>
</nav>
@@ -1315,6 +1329,32 @@
localStorage.setItem('theme', newTheme);
}
// Red letter toggle functionality
(function() {
// Check for saved red letter preference or default to enabled
const redLettersEnabled = localStorage.getItem('redLetters') !== 'disabled';
if (!redLettersEnabled) {
document.documentElement.setAttribute('data-red-letters', 'disabled');
document.getElementById('red-letter-status').textContent = 'Enable';
}
})();
function toggleRedLetters(event) {
event.preventDefault();
const currentState = document.documentElement.getAttribute('data-red-letters');
const newState = currentState === 'disabled' ? 'enabled' : 'disabled';
if (newState === 'disabled') {
document.documentElement.setAttribute('data-red-letters', 'disabled');
document.getElementById('red-letter-status').textContent = 'Enable';
localStorage.setItem('redLetters', 'disabled');
} else {
document.documentElement.removeAttribute('data-red-letters');
document.getElementById('red-letter-status').textContent = 'Disable';
localStorage.removeItem('redLetters');
}
}
// Sidebar collapse state persistence
(function() {
var toggle = document.getElementById('sidebar-toggle');