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", id: "css",
title: "CSS", title: "CSS",
description: "Styling, layout, and animations", description: "Styling, layout, and animations",
color: "#7b68a6", color: "#8b6bc4",
order: 1 order: 1
}, },
html: { html: {
id: "html", id: "html",
title: "HTML", title: "HTML",
description: "Semantic markup and native elements", description: "Semantic markup and native elements",
color: "#c75b7a", color: "#d4637b",
order: 2 order: 2
}, },
tailwind: { tailwind: {
id: "tailwind", id: "tailwind",
title: "Tailwind CSS", title: "Tailwind CSS",
description: "Utility-first CSS framework", description: "Utility-first CSS framework",
color: "#4a9ea8", color: "#26a69a",
order: 3 order: 3
} }
}; };

6
src/index.html
View File

@@ -149,19 +149,19 @@
<h2 data-i18n="landingPathsTitle">Explore Learning Paths</h2> <h2 data-i18n="landingPathsTitle">Explore Learning Paths</h2>
<div class="section-cards" id="section-cards"> <div class="section-cards" id="section-cards">
<a href="#css" class="section-card" data-section="css"> <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> <h3>CSS</h3>
<p data-i18n="landingCssDesc">Styling, layout, and animations</p> <p data-i18n="landingCssDesc">Styling, layout, and animations</p>
<span class="section-card-progress" id="css-progress"></span> <span class="section-card-progress" id="css-progress"></span>
</a> </a>
<a href="#html" class="section-card" data-section="html"> <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> <h3>HTML</h3>
<p data-i18n="landingHtmlDesc">Semantic markup and native elements</p> <p data-i18n="landingHtmlDesc">Semantic markup and native elements</p>
<span class="section-card-progress" id="html-progress"></span> <span class="section-card-progress" id="html-progress"></span>
</a> </a>
<a href="#tailwind" class="section-card" data-section="tailwind"> <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> <h3>Tailwind CSS</h3>
<p data-i18n="landingTailwindDesc">Utility-first CSS framework</p> <p data-i18n="landingTailwindDesc">Utility-first CSS framework</p>
<span class="section-card-progress" id="tailwind-progress"></span> <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 ================= */ /* ================= SECTION COLOR CODING ================= */
/* CSS Section - Muted Violet */ /* CSS Section - Balanced Violet */
[data-section="css"] { [data-section="css"] {
--section-color: #7b68a6; --section-color: #8b6bc4;
--section-color-light: #9d8ec4; --section-color-light: #a98cd6;
--section-color-dark: #5a4a7a; --section-color-dark: #6b4fa0;
--section-color-rgb: 123, 104, 166; --section-color-rgb: 139, 107, 196;
} }
/* HTML Section - Muted Rose */ /* HTML Section - Balanced Rose */
[data-section="html"] { [data-section="html"] {
--section-color: #c75b7a; --section-color: #d4637b;
--section-color-light: #db8a9e; --section-color-light: #e08899;
--section-color-dark: #a34560; --section-color-dark: #b84d63;
--section-color-rgb: 199, 91, 122; --section-color-rgb: 212, 99, 123;
} }
/* Tailwind Section - Muted Teal */ /* Tailwind Section - Balanced Teal */
[data-section="tailwind"] { [data-section="tailwind"] {
--section-color: #4a9ea8; --section-color: #26a69a;
--section-color-light: #6fbac3; --section-color-light: #4db6ac;
--section-color-dark: #3a7d85; --section-color-dark: #00897b;
--section-color-rgb: 74, 158, 168; --section-color-rgb: 38, 166, 154;
} }
/* Apply section colors to nav links */ /* Apply section colors to nav links */
.nav-link[data-section="css"] { .nav-link[data-section="css"] {
color: #7b68a6; color: #8b6bc4;
} }
.nav-link[data-section="html"] { .nav-link[data-section="html"] {
color: #c75b7a; color: #d4637b;
} }
.nav-link[data-section="tailwind"] { .nav-link[data-section="tailwind"] {
color: #4a9ea8; color: #26a69a;
} }
.nav-link[data-section="css"]:hover, .nav-link[data-section="css"]:hover,
.nav-link[data-section="css"].active { .nav-link[data-section="css"].active {
background: rgba(123, 104, 166, 0.1); background: rgba(139, 107, 196, 0.1);
color: #5a4a7a; color: #6b4fa0;
} }
.nav-link[data-section="html"]:hover, .nav-link[data-section="html"]:hover,
.nav-link[data-section="html"].active { .nav-link[data-section="html"].active {
background: rgba(199, 91, 122, 0.1); background: rgba(212, 99, 123, 0.1);
color: #a34560; color: #b84d63;
} }
.nav-link[data-section="tailwind"]:hover, .nav-link[data-section="tailwind"]:hover,
.nav-link[data-section="tailwind"].active { .nav-link[data-section="tailwind"].active {
background: rgba(74, 158, 168, 0.1); background: rgba(38, 166, 154, 0.1);
color: #3a7d85; color: #00897b;
} }
/* Logo color coding based on section */ /* Logo color coding based on section */
[data-section="css"] .code-text { [data-section="css"] .code-text {
color: #7b68a6; color: #8b6bc4;
} }
[data-section="html"] .code-text { [data-section="html"] .code-text {
color: #c75b7a; color: #d4637b;
} }
[data-section="tailwind"] .code-text { [data-section="tailwind"] .code-text {
color: #4a9ea8; color: #26a69a;
} }
/* Reference nav link colors */ /* Reference nav link colors */
@@ -2921,7 +2921,7 @@ input:checked + .toggle-slider::before {
.ref-nav-link[data-ref="selectors"], .ref-nav-link[data-ref="selectors"],
.ref-nav-link[data-ref="flexbox"], .ref-nav-link[data-ref="flexbox"],
.ref-nav-link[data-ref="grid"] { .ref-nav-link[data-ref="grid"] {
color: #7b68a6; color: #8b6bc4;
} }
.ref-nav-link[data-ref="css"]:hover, .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="flexbox"].active,
.ref-nav-link[data-ref="grid"]:hover, .ref-nav-link[data-ref="grid"]:hover,
.ref-nav-link[data-ref="grid"].active { .ref-nav-link[data-ref="grid"].active {
background: rgba(123, 104, 166, 0.15); background: rgba(139, 107, 196, 0.15);
color: #5a4a7a; color: #6b4fa0;
} }
.ref-nav-link[data-ref="html"] { .ref-nav-link[data-ref="html"] {
color: #c75b7a; color: #d4637b;
} }
.ref-nav-link[data-ref="html"]:hover, .ref-nav-link[data-ref="html"]:hover,
.ref-nav-link[data-ref="html"].active { .ref-nav-link[data-ref="html"].active {
background: rgba(199, 91, 122, 0.15); background: rgba(212, 99, 123, 0.15);
color: #a34560; color: #b84d63;
} }
/* CodeMirror section color overrides */ /* CodeMirror section color overrides */
body[data-section="css"] .cm-editor .cm-content { 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-cursor,
body[data-section="css"] .cm-editor .cm-dropCursor { 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-selectionBackground,
body[data-section="css"] .cm-editor .cm-content ::selection { 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 { 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 { 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-cursor,
body[data-section="html"] .cm-editor .cm-dropCursor { 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-selectionBackground,
body[data-section="html"] .cm-editor .cm-content ::selection { 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 { 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 { 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-cursor,
body[data-section="tailwind"] .cm-editor .cm-dropCursor { 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-selectionBackground,
body[data-section="tailwind"] .cm-editor .cm-content ::selection { 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 { 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 */ /* Module pill section colors */
body[data-section="css"] .module-pill { body[data-section="css"] .module-pill {
background: rgba(123, 104, 166, 0.1); background: rgba(139, 107, 196, 0.1);
color: #7b68a6; color: #8b6bc4;
} }
body[data-section="css"] .module-pill .level-indicator { body[data-section="css"] .module-pill .level-indicator {
color: #5a4a7a; color: #6b4fa0;
} }
body[data-section="html"] .module-pill { body[data-section="html"] .module-pill {
background: rgba(199, 91, 122, 0.1); background: rgba(212, 99, 123, 0.1);
color: #c75b7a; color: #d4637b;
} }
body[data-section="html"] .module-pill .level-indicator { body[data-section="html"] .module-pill .level-indicator {
color: #a34560; color: #b84d63;
} }
body[data-section="tailwind"] .module-pill { body[data-section="tailwind"] .module-pill {
background: rgba(74, 158, 168, 0.1); background: rgba(38, 166, 154, 0.1);
color: #4a9ea8; color: #26a69a;
} }
body[data-section="tailwind"] .module-pill .level-indicator { body[data-section="tailwind"] .module-pill .level-indicator {
color: #3a7d85; color: #00897b;
} }
/* Code block border section colors */ /* Code block border section colors */
body[data-section="css"] .code-block { 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 { 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 { 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 */ /* 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 */ /* Task instruction bubble section colors */
[data-section="css"] .task-instruction { [data-section="css"] .task-instruction {
background: rgba(123, 104, 166, 0.92); background: rgba(139, 107, 196, 0.92);
} }
[data-section="html"] .task-instruction { [data-section="html"] .task-instruction {
background: rgba(199, 91, 122, 0.92); background: rgba(212, 99, 123, 0.92);
} }
[data-section="tailwind"] .task-instruction { [data-section="tailwind"] .task-instruction {
background: rgba(74, 158, 168, 0.92); background: rgba(38, 166, 154, 0.92);
} }
/* Section page progress bar colors */ /* Section page progress bar colors */
body[data-section="css"] .section-progress-bar .progress-fill { body[data-section="css"] .section-progress-bar .progress-fill {
background: #7b68a6; background: #8b6bc4;
} }
body[data-section="html"] .section-progress-bar .progress-fill { body[data-section="html"] .section-progress-bar .progress-fill {
background: #c75b7a; background: #d4637b;
} }
body[data-section="tailwind"] .section-progress-bar .progress-fill { body[data-section="tailwind"] .section-progress-bar .progress-fill {
background: #4a9ea8; background: #26a69a;
} }
/* Section page header colors */ /* Section page header colors */
[data-section="css"] .section-hero h1 { [data-section="css"] .section-hero h1 {
color: #7b68a6; color: #8b6bc4;
} }
[data-section="html"] .section-hero h1 { [data-section="html"] .section-hero h1 {
color: #c75b7a; color: #d4637b;
} }
[data-section="tailwind"] .section-hero h1 { [data-section="tailwind"] .section-hero h1 {
color: #4a9ea8; color: #26a69a;
} }
/* Reference footer */ /* Reference footer */