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

fix: balance section colors - more vibrant but still readable

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-16 03:59:34 +01:00
parent f4cdfa1e57
commit 5ebb007568
3 changed files with 72 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/config/sections.js
View File

@@ -8,21 +8,21 @@ export const sections = {
id: "css",
title: "CSS",
description: "Styling, layout, and animations",
color: "#7b68a6",
color: "#8b6bc4",
order: 1
},
html: {
id: "html",
title: "HTML",
description: "Semantic markup and native elements",
color: "#c75b7a",
color: "#d4637b",
order: 2
},
tailwind: {
id: "tailwind",
title: "Tailwind CSS",
description: "Utility-first CSS framework",
color: "#4a9ea8",
color: "#26a69a",
order: 3
}
};

6
src/index.html
View File

@@ -149,19 +149,19 @@
<h2 data-i18n="landingPathsTitle">Explore Learning Paths</h2>
<div class="section-cards" id="section-cards">
<a href="#css" class="section-card" data-section="css">
<div class="section-card-icon" style="background: #7b68a6">CSS</div>
<div class="section-card-icon" style="background: #8b6bc4">CSS</div>
<h3>CSS</h3>
<p data-i18n="landingCssDesc">Styling, layout, and animations</p>
<span class="section-card-progress" id="css-progress"></span>
</a>
<a href="#html" class="section-card" data-section="html">
<div class="section-card-icon" style="background: #c75b7a">HTML</div>
<div class="section-card-icon" style="background: #d4637b">HTML</div>
<h3>HTML</h3>
<p data-i18n="landingHtmlDesc">Semantic markup and native elements</p>
<span class="section-card-progress" id="html-progress"></span>
</a>
<a href="#tailwind" class="section-card" data-section="tailwind">
<div class="section-card-icon" style="background: #4a9ea8">TW</div>
<div class="section-card-icon" style="background: #26a69a">TW</div>
<h3>Tailwind CSS</h3>
<p data-i18n="landingTailwindDesc">Utility-first CSS framework</p>
<span class="section-card-progress" id="tailwind-progress"></span>

132
src/main.css
View File

@@ -2848,72 +2848,72 @@ input:checked + .toggle-slider::before {
}
/* ================= SECTION COLOR CODING ================= */
/* CSS Section - Muted Violet */
/* CSS Section - Balanced Violet */
[data-section="css"] {
--section-color: #7b68a6;
--section-color-light: #9d8ec4;
--section-color-dark: #5a4a7a;
--section-color-rgb: 123, 104, 166;
--section-color: #8b6bc4;
--section-color-light: #a98cd6;
--section-color-dark: #6b4fa0;
--section-color-rgb: 139, 107, 196;
}
/* HTML Section - Muted Rose */
/* HTML Section - Balanced Rose */
[data-section="html"] {
--section-color: #c75b7a;
--section-color-light: #db8a9e;
--section-color-dark: #a34560;
--section-color-rgb: 199, 91, 122;
--section-color: #d4637b;
--section-color-light: #e08899;
--section-color-dark: #b84d63;
--section-color-rgb: 212, 99, 123;
}
/* Tailwind Section - Muted Teal */
/* Tailwind Section - Balanced Teal */
[data-section="tailwind"] {
--section-color: #4a9ea8;
--section-color-light: #6fbac3;
--section-color-dark: #3a7d85;
--section-color-rgb: 74, 158, 168;
--section-color: #26a69a;
--section-color-light: #4db6ac;
--section-color-dark: #00897b;
--section-color-rgb: 38, 166, 154;
}
/* Apply section colors to nav links */
.nav-link[data-section="css"] {
color: #7b68a6;
color: #8b6bc4;
}
.nav-link[data-section="html"] {
color: #c75b7a;
color: #d4637b;
}
.nav-link[data-section="tailwind"] {
color: #4a9ea8;
color: #26a69a;
}
.nav-link[data-section="css"]:hover,
.nav-link[data-section="css"].active {
background: rgba(123, 104, 166, 0.1);
color: #5a4a7a;
background: rgba(139, 107, 196, 0.1);
color: #6b4fa0;
}
.nav-link[data-section="html"]:hover,
.nav-link[data-section="html"].active {
background: rgba(199, 91, 122, 0.1);
color: #a34560;
background: rgba(212, 99, 123, 0.1);
color: #b84d63;
}
.nav-link[data-section="tailwind"]:hover,
.nav-link[data-section="tailwind"].active {
background: rgba(74, 158, 168, 0.1);
color: #3a7d85;
background: rgba(38, 166, 154, 0.1);
color: #00897b;
}
/* Logo color coding based on section */
[data-section="css"] .code-text {
color: #7b68a6;
color: #8b6bc4;
}
[data-section="html"] .code-text {
color: #c75b7a;
color: #d4637b;
}
[data-section="tailwind"] .code-text {
color: #4a9ea8;
color: #26a69a;
}
/* Reference nav link colors */
@@ -2921,7 +2921,7 @@ input:checked + .toggle-slider::before {
.ref-nav-link[data-ref="selectors"],
.ref-nav-link[data-ref="flexbox"],
.ref-nav-link[data-ref="grid"] {
color: #7b68a6;
color: #8b6bc4;
}
.ref-nav-link[data-ref="css"]:hover,
@@ -2932,114 +2932,114 @@ input:checked + .toggle-slider::before {
.ref-nav-link[data-ref="flexbox"].active,
.ref-nav-link[data-ref="grid"]:hover,
.ref-nav-link[data-ref="grid"].active {
background: rgba(123, 104, 166, 0.15);
color: #5a4a7a;
background: rgba(139, 107, 196, 0.15);
color: #6b4fa0;
}
.ref-nav-link[data-ref="html"] {
color: #c75b7a;
color: #d4637b;
}
.ref-nav-link[data-ref="html"]:hover,
.ref-nav-link[data-ref="html"].active {
background: rgba(199, 91, 122, 0.15);
color: #a34560;
background: rgba(212, 99, 123, 0.15);
color: #b84d63;
}
/* CodeMirror section color overrides */
body[data-section="css"] .cm-editor .cm-content {
caret-color: #7b68a6 !important;
caret-color: #8b6bc4 !important;
}
body[data-section="css"] .cm-editor .cm-cursor,
body[data-section="css"] .cm-editor .cm-dropCursor {
border-left-color: #7b68a6 !important;
border-left-color: #8b6bc4 !important;
}
body[data-section="css"] .cm-editor .cm-selectionBackground,
body[data-section="css"] .cm-editor .cm-content ::selection {
background-color: rgba(123, 104, 166, 0.25) !important;
background-color: rgba(139, 107, 196, 0.25) !important;
}
body[data-section="css"] .cm-editor .cm-activeLine {
background-color: rgba(123, 104, 166, 0.08) !important;
background-color: rgba(139, 107, 196, 0.08) !important;
}
body[data-section="html"] .cm-editor .cm-content {
caret-color: #c75b7a !important;
caret-color: #d4637b !important;
}
body[data-section="html"] .cm-editor .cm-cursor,
body[data-section="html"] .cm-editor .cm-dropCursor {
border-left-color: #c75b7a !important;
border-left-color: #d4637b !important;
}
body[data-section="html"] .cm-editor .cm-selectionBackground,
body[data-section="html"] .cm-editor .cm-content ::selection {
background-color: rgba(199, 91, 122, 0.25) !important;
background-color: rgba(212, 99, 123, 0.25) !important;
}
body[data-section="html"] .cm-editor .cm-activeLine {
background-color: rgba(199, 91, 122, 0.08) !important;
background-color: rgba(212, 99, 123, 0.08) !important;
}
body[data-section="tailwind"] .cm-editor .cm-content {
caret-color: #4a9ea8 !important;
caret-color: #26a69a !important;
}
body[data-section="tailwind"] .cm-editor .cm-cursor,
body[data-section="tailwind"] .cm-editor .cm-dropCursor {
border-left-color: #4a9ea8 !important;
border-left-color: #26a69a !important;
}
body[data-section="tailwind"] .cm-editor .cm-selectionBackground,
body[data-section="tailwind"] .cm-editor .cm-content ::selection {
background-color: rgba(74, 158, 168, 0.25) !important;
background-color: rgba(38, 166, 154, 0.25) !important;
}
body[data-section="tailwind"] .cm-editor .cm-activeLine {
background-color: rgba(74, 158, 168, 0.08) !important;
background-color: rgba(38, 166, 154, 0.08) !important;
}
/* Module pill section colors */
body[data-section="css"] .module-pill {
background: rgba(123, 104, 166, 0.1);
color: #7b68a6;
background: rgba(139, 107, 196, 0.1);
color: #8b6bc4;
}
body[data-section="css"] .module-pill .level-indicator {
color: #5a4a7a;
color: #6b4fa0;
}
body[data-section="html"] .module-pill {
background: rgba(199, 91, 122, 0.1);
color: #c75b7a;
background: rgba(212, 99, 123, 0.1);
color: #d4637b;
}
body[data-section="html"] .module-pill .level-indicator {
color: #a34560;
color: #b84d63;
}
body[data-section="tailwind"] .module-pill {
background: rgba(74, 158, 168, 0.1);
color: #4a9ea8;
background: rgba(38, 166, 154, 0.1);
color: #26a69a;
}
body[data-section="tailwind"] .module-pill .level-indicator {
color: #3a7d85;
color: #00897b;
}
/* Code block border section colors */
body[data-section="css"] .code-block {
border-color: rgba(123, 104, 166, 0.4);
border-color: rgba(139, 107, 196, 0.4);
}
body[data-section="html"] .code-block {
border-color: rgba(199, 91, 122, 0.4);
border-color: rgba(212, 99, 123, 0.4);
}
body[data-section="tailwind"] .code-block {
border-color: rgba(74, 158, 168, 0.4);
border-color: rgba(38, 166, 154, 0.4);
}
/* Section code block CodeMirror syntax highlighting overrides */
@@ -3057,41 +3057,41 @@ body[data-section="tailwind"] .code-block .cm-editor .cm-line {
/* Task instruction bubble section colors */
[data-section="css"] .task-instruction {
background: rgba(123, 104, 166, 0.92);
background: rgba(139, 107, 196, 0.92);
}
[data-section="html"] .task-instruction {
background: rgba(199, 91, 122, 0.92);
background: rgba(212, 99, 123, 0.92);
}
[data-section="tailwind"] .task-instruction {
background: rgba(74, 158, 168, 0.92);
background: rgba(38, 166, 154, 0.92);
}
/* Section page progress bar colors */
body[data-section="css"] .section-progress-bar .progress-fill {
background: #7b68a6;
background: #8b6bc4;
}
body[data-section="html"] .section-progress-bar .progress-fill {
background: #c75b7a;
background: #d4637b;
}
body[data-section="tailwind"] .section-progress-bar .progress-fill {
background: #4a9ea8;
background: #26a69a;
}
/* Section page header colors */
[data-section="css"] .section-hero h1 {
color: #7b68a6;
color: #8b6bc4;
}
[data-section="html"] .section-hero h1 {
color: #c75b7a;
color: #d4637b;
}
[data-section="tailwind"] .section-hero h1 {
color: #4a9ea8;
color: #26a69a;
}
/* Reference footer */