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

fix: revert primary and section colors back to original lilac/purple

Browse Source 
The impl-feature pipeline changed the default color scheme from
lilac/purple (#5e4b8b, #9163b8) to pink (#c9507a, #d95a8a).
This was unintentional — lilac was the chosen brand color.

Reverted: primary, section defaults, bg tints, success colors,
gradients, nav highlights, and all hardcoded rgba values back to
the original purple palette.
This commit is contained in:
Michael Czechowski
2026-03-29 22:22:23 +02:00
parent 7676aa77b7
commit ea1c70856e
1 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/main.css
View File

@@ -1,15 +1,15 @@
/* ================= BASE THEME ================= */
:root {
/* Primary colors */
--primary-color: #c9507a;
--primary-light: #e077a0;
--primary-dark: #a83d65;
--primary-color: #5e4b8b;
--primary-light: #8a77b5;
--primary-dark: #724a95;
/* Section colors (default to CSS pink) */
--section-color: #d95a8a;
--section-color-light: #e87da6;
--section-color-dark: #b84472;
--section-color-rgb: 217, 90, 138;
/* Section colors (default to CSS purple) */
--section-color: #9163b8;
--section-color-light: #a87dc8;
--section-color-dark: #724a95;
--section-color-rgb: 145, 99, 184;
/* Secondary colors */
--secondary-color: #444444;
@@ -23,9 +23,9 @@
--white-text: #ffffff;
/* Background colors */
--bg-color: #fcf7f9;
--bg-color: #f8f7fc;
--panel-bg: #ffffff;
--code-bg: #faf5f7;
--code-bg: #f7f5fa;
--editor-bg: #1e1e1e;
--editor-highlight: #303030;
@@ -34,9 +34,9 @@
/* Status colors */
--info-color: #7a93fe;
--success-color: #d46d9b;
--success-color-dark: #b84472;
--success-color-light: #e8b8d0;
--success-color: #9b6dd4;
--success-color-dark: #7c4dff;
--success-color-light: #c9b8e8;
--error-color: #cb6e75;
--danger-color: #dc3545;
@@ -252,11 +252,11 @@ kbd {
}
.logo h1 .code-text {
color: #d95a8a;
color: #9163b8;
}
.logo h1 .crispies-text {
background: #d95a8a;
background: #9163b8;
color: white;
padding: 0.15rem 0.35rem;
border-radius: 4px;
@@ -476,7 +476,7 @@ kbd {
.completion-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
background: linear-gradient(135deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
color: white;
font-size: 0.7rem;
font-weight: 600;
@@ -722,7 +722,7 @@ kbd {
position: absolute;
inset: var(--spacing-md);
border-radius: var(--border-radius-md);
background: conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
background: conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
filter: blur(30px);
opacity: 0;
animation: spin-glow 3s ease-out forwards;
@@ -735,7 +735,7 @@ kbd {
position: absolute;
inset: var(--spacing-md);
border-radius: var(--border-radius-md);
background: conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
background: conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
filter: blur(30px);
opacity: 0.35;
pointer-events: none;
@@ -824,7 +824,7 @@ kbd {
border: 6px solid transparent;
background:
linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
}
.preview-wrapper.matched {
@@ -832,7 +832,7 @@ kbd {
border: 6px solid transparent;
background:
linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
animation: spin-border 3s ease-out forwards;
overflow: visible;
}
@@ -852,7 +852,7 @@ kbd {
font-weight: 800;
letter-spacing: 0.05em;
color: white;
background: linear-gradient(135deg, #d95a8a 0%, #d45aa0 50%, #ff4d88 100%);
background: linear-gradient(135deg, #9163b8 0%, #d45aa0 50%, #7c4dff 100%);
padding: 1.25rem 2rem 1.75rem;
z-index: 10;
pointer-events: none;
@@ -1150,7 +1150,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
background: linear-gradient(90deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
background-size: calc(100% * 100 / var(--progress-percent, 100)) 100%;
border-radius: 4px;
transition: width 0.3s ease;
@@ -1214,7 +1214,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
}
/* Each milestone gets a color evenly distributed across the gradient
Gradient: #d95a8a (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #ff4d88 (100%) */
Gradient: #9163b8 (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #7c4dff (100%) */
.milestone.reached:nth-child(1) { background: #a55eac; } /* ~14% */
.milestone.reached:nth-child(2) { background: #c459a2; } /* ~28% */
.milestone.reached:nth-child(3) { background: #d45aa0; } /* ~33% pink */
@@ -1222,12 +1222,12 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
.milestone.reached:nth-child(5) { background: #7785ac; } /* ~50% */
.milestone.reached:nth-child(6) { background: #33a3b6; } /* ~62% */
.milestone.reached:nth-child(7) { background: #4889d8; } /* ~80% */
.milestone.reached:nth-child(8) { background: #ff4d88; } /* 100% */
.milestone.reached:nth-child(8) { background: #7c4dff; } /* 100% */
.milestone.current {
color: white;
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(217, 90, 138, 0.4);
box-shadow: 0 2px 8px rgba(145, 99, 184, 0.4);
}
.milestone.next {
@@ -2614,7 +2614,7 @@ input:checked + .toggle-slider::before {
margin-top: var(--spacing-lg);
text-align: center;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, rgba(217, 90, 138, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
border-radius: var(--border-radius-md);
color: var(--light-text);
font-size: 0.9rem;
@@ -3652,7 +3652,7 @@ input:checked + .toggle-slider::before {
/* Apply section colors to nav links */
.nav-link[data-section="css"] {
color: #d95a8a;
color: #9163b8;
}
.nav-link[data-section="html"] {
@@ -3673,8 +3673,8 @@ input:checked + .toggle-slider::before {
.nav-link[data-section="css"]:hover,
.nav-link[data-section="css"].active {
background: rgba(217, 90, 138, 0.1);
color: #a83d65;
background: rgba(145, 99, 184, 0.1);
color: #724a95;
}
.nav-link[data-section="html"]:hover,
@@ -3703,12 +3703,12 @@ input:checked + .toggle-slider::before {
/* Hint section colors */
body[data-section="css"] .hint {
background: rgba(217, 90, 138, 0.3);
background: rgba(145, 99, 184, 0.3);
border-left-color: #a98cd6;
}
body[data-section="css"] .hint-progress {
background: #d95a8a;
background: #9163b8;
}
body[data-section="html"] .hint {
@@ -3773,7 +3773,7 @@ body[data-section="javascript"] .hint-progress {
.ref-nav-link[data-ref="selectors"],
.ref-nav-link[data-ref="flexbox"],
.ref-nav-link[data-ref="grid"] {
color: #d95a8a;
color: #9163b8;
}
.ref-nav-link[data-ref="css"]:hover,
@@ -3784,8 +3784,8 @@ body[data-section="javascript"] .hint-progress {
.ref-nav-link[data-ref="flexbox"].active,
.ref-nav-link[data-ref="grid"]:hover,
.ref-nav-link[data-ref="grid"].active {
background: rgba(217, 90, 138, 0.15);
color: #a83d65;
background: rgba(145, 99, 184, 0.15);
color: #724a95;
}
.ref-nav-link[data-ref="html"] {
@@ -3800,21 +3800,21 @@ body[data-section="javascript"] .hint-progress {
/* CodeMirror section color overrides */
body[data-section="css"] .cm-editor .cm-content {
caret-color: #d95a8a !important;
caret-color: #9163b8 !important;
}
body[data-section="css"] .cm-editor .cm-cursor,
body[data-section="css"] .cm-editor .cm-dropCursor {
border-left-color: #d95a8a !important;
border-left-color: #9163b8 !important;
}
body[data-section="css"] .cm-editor .cm-selectionBackground,
body[data-section="css"] .cm-editor .cm-content ::selection {
background-color: rgba(217, 90, 138, 0.25) !important;
background-color: rgba(145, 99, 184, 0.25) !important;
}
body[data-section="css"] .cm-editor .cm-activeLine {
background-color: rgba(217, 90, 138, 0.08) !important;
background-color: rgba(145, 99, 184, 0.08) !important;
}
body[data-section="html"] .cm-editor .cm-content {
@@ -3891,12 +3891,12 @@ body[data-section="javascript"] .cm-editor .cm-activeLine {
/* Module pill section colors */
body[data-section="css"] .module-pill {
background: rgba(217, 90, 138, 0.1);
color: #d95a8a;
background: rgba(145, 99, 184, 0.1);
color: #9163b8;
}
body[data-section="css"] .module-pill .level-indicator {
color: #a83d65;
color: #724a95;
}
body[data-section="html"] .module-pill {
@@ -3937,7 +3937,7 @@ body[data-section="javascript"] .module-pill .level-indicator {
/* Code block border section colors */
body[data-section="css"] .code-block {
border-color: rgba(217, 90, 138, 0.4);
border-color: rgba(145, 99, 184, 0.4);
}
body[data-section="html"] .code-block {
@@ -3979,7 +3979,7 @@ body[data-section="javascript"] .code-block .cm-editor .cm-line {
/* Task instruction bubble section colors */
[data-section="css"] .task-instruction {
background: rgba(217, 90, 138, 0.92);
background: rgba(145, 99, 184, 0.92);
}
[data-section="html"] .task-instruction {
@@ -4000,7 +4000,7 @@ body[data-section="javascript"] .code-block .cm-editor .cm-line {
/* Section page progress bar colors */
body[data-section="css"] .section-progress-bar .progress-fill {
background: #d95a8a;
background: #9163b8;
}
body[data-section="html"] .section-progress-bar .progress-fill {
@@ -4021,7 +4021,7 @@ body[data-section="javascript"] .section-progress-bar .progress-fill {
/* Section page header colors */
[data-section="css"] .section-hero h1 {
color: #d95a8a;
color: #9163b8;
}
[data-section="html"] .section-hero h1 {
@@ -4042,7 +4042,7 @@ body[data-section="javascript"] .section-progress-bar .progress-fill {
/* Lesson title h2 section colors */
body[data-section="css"] #lesson-title {
color: #d95a8a;
color: #9163b8;
}
body[data-section="html"] #lesson-title {