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

fix: desaturate section colors for better readability and add section progress bars

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-16 03:58:31 +01:00
parent 0fe618f551
commit f4cdfa1e57
3 changed files with 85 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: "#7c4dff", color: "#7b68a6",
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: "#e91e63", color: "#c75b7a",
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: "#00bcd4", color: "#4a9ea8",
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: #7c4dff">CSS</div> <div class="section-card-icon" style="background: #7b68a6">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: #e91e63">HTML</div> <div class="section-card-icon" style="background: #c75b7a">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: #00bcd4">TW</div> <div class="section-card-icon" style="background: #4a9ea8">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>

145
src/main.css
View File

@@ -2848,72 +2848,72 @@ input:checked + .toggle-slider::before {
} }
/* ================= SECTION COLOR CODING ================= */ /* ================= SECTION COLOR CODING ================= */
/* CSS Section - Violet */ /* CSS Section - Muted Violet */
[data-section="css"] { [data-section="css"] {
--section-color: #7c4dff; --section-color: #7b68a6;
--section-color-light: #a47fff; --section-color-light: #9d8ec4;
--section-color-dark: #5c35cc; --section-color-dark: #5a4a7a;
--section-color-rgb: 124, 77, 255; --section-color-rgb: 123, 104, 166;
} }
/* HTML Section - Raspberry */ /* HTML Section - Muted Rose */
[data-section="html"] { [data-section="html"] {
--section-color: #e91e63; --section-color: #c75b7a;
--section-color-light: #f06292; --section-color-light: #db8a9e;
--section-color-dark: #c2185b; --section-color-dark: #a34560;
--section-color-rgb: 233, 30, 99; --section-color-rgb: 199, 91, 122;
} }
/* Tailwind Section - Cyan */ /* Tailwind Section - Muted Teal */
[data-section="tailwind"] { [data-section="tailwind"] {
--section-color: #00bcd4; --section-color: #4a9ea8;
--section-color-light: #4dd0e1; --section-color-light: #6fbac3;
--section-color-dark: #0097a7; --section-color-dark: #3a7d85;
--section-color-rgb: 0, 188, 212; --section-color-rgb: 74, 158, 168;
} }
/* Apply section colors to nav links */ /* Apply section colors to nav links */
.nav-link[data-section="css"] { .nav-link[data-section="css"] {
color: #7c4dff; color: #7b68a6;
} }
.nav-link[data-section="html"] { .nav-link[data-section="html"] {
color: #e91e63; color: #c75b7a;
} }
.nav-link[data-section="tailwind"] { .nav-link[data-section="tailwind"] {
color: #00bcd4; color: #4a9ea8;
} }
.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(124, 77, 255, 0.1); background: rgba(123, 104, 166, 0.1);
color: #5c35cc; color: #5a4a7a;
} }
.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(233, 30, 99, 0.1); background: rgba(199, 91, 122, 0.1);
color: #c2185b; color: #a34560;
} }
.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(0, 188, 212, 0.1); background: rgba(74, 158, 168, 0.1);
color: #0097a7; color: #3a7d85;
} }
/* Logo color coding based on section */ /* Logo color coding based on section */
[data-section="css"] .code-text { [data-section="css"] .code-text {
color: #7c4dff; color: #7b68a6;
} }
[data-section="html"] .code-text { [data-section="html"] .code-text {
color: #e91e63; color: #c75b7a;
} }
[data-section="tailwind"] .code-text { [data-section="tailwind"] .code-text {
color: #00bcd4; color: #4a9ea8;
} }
/* 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: #7c4dff; color: #7b68a6;
} }
.ref-nav-link[data-ref="css"]:hover, .ref-nav-link[data-ref="css"]:hover,
@@ -2932,153 +2932,166 @@ 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(124, 77, 255, 0.15); background: rgba(123, 104, 166, 0.15);
color: #5c35cc; color: #5a4a7a;
} }
.ref-nav-link[data-ref="html"] { .ref-nav-link[data-ref="html"] {
color: #e91e63; color: #c75b7a;
} }
.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(233, 30, 99, 0.15); background: rgba(199, 91, 122, 0.15);
color: #c2185b; color: #a34560;
} }
/* 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: #7c4dff !important; caret-color: #7b68a6 !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: #7c4dff !important; border-left-color: #7b68a6 !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(124, 77, 255, 0.25) !important; background-color: rgba(123, 104, 166, 0.25) !important;
} }
body[data-section="css"] .cm-editor .cm-activeLine { body[data-section="css"] .cm-editor .cm-activeLine {
background-color: rgba(124, 77, 255, 0.08) !important; background-color: rgba(123, 104, 166, 0.08) !important;
} }
body[data-section="html"] .cm-editor .cm-content { body[data-section="html"] .cm-editor .cm-content {
caret-color: #e91e63 !important; caret-color: #c75b7a !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: #e91e63 !important; border-left-color: #c75b7a !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(233, 30, 99, 0.25) !important; background-color: rgba(199, 91, 122, 0.25) !important;
} }
body[data-section="html"] .cm-editor .cm-activeLine { body[data-section="html"] .cm-editor .cm-activeLine {
background-color: rgba(233, 30, 99, 0.08) !important; background-color: rgba(199, 91, 122, 0.08) !important;
} }
body[data-section="tailwind"] .cm-editor .cm-content { body[data-section="tailwind"] .cm-editor .cm-content {
caret-color: #00bcd4 !important; caret-color: #4a9ea8 !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: #00bcd4 !important; border-left-color: #4a9ea8 !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(0, 188, 212, 0.25) !important; background-color: rgba(74, 158, 168, 0.25) !important;
} }
body[data-section="tailwind"] .cm-editor .cm-activeLine { body[data-section="tailwind"] .cm-editor .cm-activeLine {
background-color: rgba(0, 188, 212, 0.08) !important; background-color: rgba(74, 158, 168, 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(124, 77, 255, 0.1); background: rgba(123, 104, 166, 0.1);
color: #7c4dff; color: #7b68a6;
} }
body[data-section="css"] .module-pill .level-indicator { body[data-section="css"] .module-pill .level-indicator {
color: #5c35cc; color: #5a4a7a;
} }
body[data-section="html"] .module-pill { body[data-section="html"] .module-pill {
background: rgba(233, 30, 99, 0.1); background: rgba(199, 91, 122, 0.1);
color: #e91e63; color: #c75b7a;
} }
body[data-section="html"] .module-pill .level-indicator { body[data-section="html"] .module-pill .level-indicator {
color: #c2185b; color: #a34560;
} }
body[data-section="tailwind"] .module-pill { body[data-section="tailwind"] .module-pill {
background: rgba(0, 188, 212, 0.1); background: rgba(74, 158, 168, 0.1);
color: #00bcd4; color: #4a9ea8;
} }
body[data-section="tailwind"] .module-pill .level-indicator { body[data-section="tailwind"] .module-pill .level-indicator {
color: #0097a7; color: #3a7d85;
} }
/* 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(124, 77, 255, 0.4); border-color: rgba(123, 104, 166, 0.4);
} }
body[data-section="html"] .code-block { body[data-section="html"] .code-block {
border-color: rgba(233, 30, 99, 0.4); border-color: rgba(199, 91, 122, 0.4);
} }
body[data-section="tailwind"] .code-block { body[data-section="tailwind"] .code-block {
border-color: rgba(0, 188, 212, 0.4); border-color: rgba(74, 158, 168, 0.4);
} }
/* Section code block CodeMirror syntax highlighting overrides */ /* Section code block CodeMirror syntax highlighting overrides */
body[data-section="css"] .code-block .cm-editor .cm-line { body[data-section="css"] .code-block .cm-editor .cm-line {
color: #c9b8ff; color: #c9c0e0;
} }
body[data-section="html"] .code-block .cm-editor .cm-line { body[data-section="html"] .code-block .cm-editor .cm-line {
color: #ffb8c9; color: #e8c0cc;
} }
body[data-section="tailwind"] .code-block .cm-editor .cm-line { body[data-section="tailwind"] .code-block .cm-editor .cm-line {
color: #b8f0ff; color: #c0e0e8;
} }
/* Task instruction bubble section colors */ /* Task instruction bubble section colors */
[data-section="css"] .task-instruction { [data-section="css"] .task-instruction {
background: rgba(124, 77, 255, 0.9); background: rgba(123, 104, 166, 0.92);
} }
[data-section="html"] .task-instruction { [data-section="html"] .task-instruction {
background: rgba(233, 30, 99, 0.9); background: rgba(199, 91, 122, 0.92);
} }
[data-section="tailwind"] .task-instruction { [data-section="tailwind"] .task-instruction {
background: rgba(0, 188, 212, 0.9); background: rgba(74, 158, 168, 0.92);
}
/* Section page progress bar colors */
body[data-section="css"] .section-progress-bar .progress-fill {
background: #7b68a6;
}
body[data-section="html"] .section-progress-bar .progress-fill {
background: #c75b7a;
}
body[data-section="tailwind"] .section-progress-bar .progress-fill {
background: #4a9ea8;
} }
/* Section page header colors */ /* Section page header colors */
[data-section="css"] .section-hero h1 { [data-section="css"] .section-hero h1 {
color: #7c4dff; color: #7b68a6;
} }
[data-section="html"] .section-hero h1 { [data-section="html"] .section-hero h1 {
color: #e91e63; color: #c75b7a;
} }
[data-section="tailwind"] .section-hero h1 { [data-section="tailwind"] .section-hero h1 {
color: #00bcd4; color: #4a9ea8;
} }
/* Reference footer */ /* Reference footer */