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

feat: update section card colors to match completion badge theme

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-16 03:39:21 +01:00
parent 410833e91e
commit cb8852f64b
2 changed files with 6 additions and 6 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: "#264de4", color: "#7c4dff",
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: "#e34c26", color: "#9b59b6",
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: "#06b6d4", color: "#00bcd4",
order: 3 order: 3
} }
}; };

6
src/index.html
View File

@@ -139,19 +139,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: #264de4">CSS</div> <div class="section-card-icon" style="background: #7c4dff">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: #e34c26">HTML</div> <div class="section-card-icon" style="background: #9b59b6">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: #06b6d4">TW</div> <div class="section-card-icon" style="background: #00bcd4">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>