public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

feat: add section color coding to overview page elements

Browse Source 
Topic headings (h2, h3) and inline code now use section-specific colors:
- CSS: purple
- HTML: pink
- Tailwind: teal

Uses CSS custom properties (--section-color-dark, --section-color-rgb)
that are already set per section.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Michael Czechowski
2026-01-16 14:45:30 +01:00
parent d802172e5b
commit 7ecc115c55
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/main.css
View File

@@ -2649,13 +2649,13 @@ input:checked + .toggle-slider::before {
.topic-text h2 { .topic-text h2 {
font-size: 1.25rem; font-size: 1.25rem;
color: var(--primary-dark); color: var(--section-color-dark, var(--primary-dark));
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
} }
.topic-text h3 { .topic-text h3 {
font-size: 1rem; font-size: 1rem;
color: var(--primary-dark); color: var(--section-color-dark, var(--primary-dark));
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
} }
@@ -2735,8 +2735,8 @@ input:checked + .toggle-slider::before {
/* Inline code in topic text */ /* Inline code in topic text */
.topic-text code { .topic-text code {
background: var(--primary-bg-light); background: rgba(var(--section-color-rgb, 145, 99, 184), 0.1);
color: var(--primary-dark); color: var(--section-color-dark, var(--primary-dark));
padding: 0.15rem 0.4rem; padding: 0.15rem 0.4rem;
border-radius: 4px; border-radius: 4px;
font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;