mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Add dark mode support to family tree person page
- Dark backgrounds for main card, section cards, family cards, verse cards - Dark styling for navigation, vitals, biography, and bottom nav - Proper contrast for all text elements and links - Kekulé ancestor gradient preserved in dark mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -284,6 +284,134 @@
|
||||
.bottom-nav a.primary:hover {
|
||||
background: #3d6a4b;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
[data-theme="dark"] .person-nav {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .person-nav a {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .person-nav a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .person-main-card {
|
||||
background: #1a1a1a;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .person-main-card.kekule {
|
||||
background: linear-gradient(to right, #2a2a1a, #1a1a1a);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .person-name {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .person-subtitle {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .vital-label {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .vital-value {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .section-card {
|
||||
background: #1a1a1a;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .section-card h2 {
|
||||
color: #e0e0e0;
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .family-card {
|
||||
background: #252525;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .family-card:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .family-card.kekule {
|
||||
background: linear-gradient(to right, #2a2a1a, #252525);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .family-card-name {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .family-card-meta {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .verse-card {
|
||||
background: #252525;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .verse-card-ref {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .verse-card-text {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .biography-text {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .biography-significance {
|
||||
color: #888;
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .event-item {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .event-desc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .event-verse a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bottom-nav {
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bottom-nav a {
|
||||
background: #252525;
|
||||
border-color: #444;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bottom-nav a:hover {
|
||||
background: #2a2a2a;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bottom-nav a.primary {
|
||||
background: #4a7c59;
|
||||
border-color: #4a7c59;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .bottom-nav a.primary:hover {
|
||||
background: #3d6a4b;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user