feat: complete section color coding with logo, hints, editor themes, and footers
- Add section-specific CodeMirror syntax highlighting (purple selectors for CSS) - Logo now uses section colors (CSS purple as default, changes per section) - Add section color coding for hints - Add full footer to section and reference pages - Fix nav highlight updates for sidebar and prev/next navigation - Change welcome module mode to CSS for purple theme on first lesson - Rebrand "Code Crispies" to "CODE CRISPIES" across all translations - Fix scroll to top on section page navigation - Change HTML section color to raspberry (#c75b7a)
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>Code Crispies - Learn HTML & CSS Interactively | Free Coding Practice</title>
|
||||
<title>CODE CRISPIES - Learn HTML & CSS Interactively | Free Coding Practice</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Master HTML, CSS, and Tailwind through hands-on coding exercises. Free, open-source learning platform with instant feedback. No account required."
|
||||
@@ -19,14 +19,14 @@
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://codecrispi.es/" />
|
||||
<meta property="og:title" content="Code Crispies - Learn HTML & CSS Interactively" />
|
||||
<meta property="og:title" content="CODE CRISPIES - Learn HTML & CSS Interactively" />
|
||||
<meta property="og:description" content="Master HTML, CSS, and Tailwind through hands-on coding exercises. Free and open source." />
|
||||
<meta property="og:image" content="https://codecrispi.es/og-image.png" />
|
||||
<meta property="og:site_name" content="Code Crispies" />
|
||||
<meta property="og:site_name" content="CODE CRISPIES" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Code Crispies - Learn HTML & CSS Interactively" />
|
||||
<meta name="twitter:title" content="CODE CRISPIES - Learn HTML & CSS Interactively" />
|
||||
<meta name="twitter:description" content="Master HTML, CSS, and Tailwind through hands-on coding exercises." />
|
||||
<meta name="twitter:image" content="https://codecrispi.es/og-image.png" />
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebApplication",
|
||||
"name": "Code Crispies",
|
||||
"name": "CODE CRISPIES",
|
||||
"description": "Interactive platform for learning HTML, CSS, and Tailwind through hands-on coding exercises",
|
||||
"url": "https://codecrispi.es/",
|
||||
"applicationCategory": "EducationalApplication",
|
||||
@@ -100,7 +100,7 @@
|
||||
</section>
|
||||
|
||||
<section class="why-it-works">
|
||||
<h2 data-i18n="landingWhyTitle">Why Code Crispies Works</h2>
|
||||
<h2 data-i18n="landingWhyTitle">Why CODE CRISPIES Works</h2>
|
||||
<div class="benefits-grid">
|
||||
<article class="benefit-card">
|
||||
<svg class="benefit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
@@ -198,7 +198,7 @@
|
||||
</section>
|
||||
<section class="footer-section footer-support">
|
||||
<h4 data-i18n="footerSupport">Support</h4>
|
||||
<p data-i18n="footerSupportText">Help keep Code Crispies free and open source.</p>
|
||||
<p data-i18n="footerSupportText">Help keep CODE CRISPIES free and open source.</p>
|
||||
<script src="https://liberapay.com/libretech/widgets/button.js"></script>
|
||||
<noscript><a href="https://liberapay.com/libretech/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></noscript>
|
||||
</section>
|
||||
@@ -227,6 +227,38 @@
|
||||
<!-- Educational content with integrated module links -->
|
||||
<div class="section-intro" id="section-intro"></div>
|
||||
</article>
|
||||
<footer class="section-footer landing-footer">
|
||||
<div class="footer-grid">
|
||||
<section class="footer-section footer-modules">
|
||||
<div id="section-footer-lesson-links" class="footer-links"></div>
|
||||
</section>
|
||||
<section class="footer-section">
|
||||
<h4 data-i18n="footerResources">Resources</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#reference/css">CSS Reference</a></li>
|
||||
<li><a href="#reference/html">HTML Reference</a></li>
|
||||
<li><a href="#playground/0" data-i18n="footerPlayground">Playground</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="footer-section">
|
||||
<h4 data-i18n="footerAbout">About</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="https://librete.ch" target="_blank">LibreTECH</a></li>
|
||||
<li><a href="https://git.librete.ch/libretech/code-crispies" target="_blank">Source Code</a></li>
|
||||
<li><a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="footer-section footer-support">
|
||||
<h4 data-i18n="footerSupport">Support</h4>
|
||||
<p data-i18n="footerSupportText">Help keep CODE CRISPIES free and open source.</p>
|
||||
<script src="https://liberapay.com/libretech/widgets/button.js"></script>
|
||||
<noscript><a href="https://liberapay.com/libretech/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></noscript>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 <a href="https://librete.ch">LibreTECH</a>. <span data-i18n="footerLicense">Open source under MIT License.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Reference/Cheatsheet Pages -->
|
||||
@@ -243,8 +275,37 @@
|
||||
<!-- Reference content injected by JS -->
|
||||
</div>
|
||||
</article>
|
||||
<footer class="reference-footer">
|
||||
<p>© 2025 <a href="https://librete.ch">LibreTECH</a>. <span data-i18n="footerLicense">Released into public domain.</span></p>
|
||||
<footer class="reference-footer landing-footer">
|
||||
<div class="footer-grid">
|
||||
<section class="footer-section footer-modules">
|
||||
<div id="ref-footer-lesson-links" class="footer-links"></div>
|
||||
</section>
|
||||
<section class="footer-section">
|
||||
<h4 data-i18n="footerResources">Resources</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#reference/css">CSS Reference</a></li>
|
||||
<li><a href="#reference/html">HTML Reference</a></li>
|
||||
<li><a href="#playground/0" data-i18n="footerPlayground">Playground</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="footer-section">
|
||||
<h4 data-i18n="footerAbout">About</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="https://librete.ch" target="_blank">LibreTECH</a></li>
|
||||
<li><a href="https://git.librete.ch/libretech/code-crispies" target="_blank">Source Code</a></li>
|
||||
<li><a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="footer-section footer-support">
|
||||
<h4 data-i18n="footerSupport">Support</h4>
|
||||
<p data-i18n="footerSupportText">Help keep CODE CRISPIES free and open source.</p>
|
||||
<script src="https://liberapay.com/libretech/widgets/button.js"></script>
|
||||
<noscript><a href="https://liberapay.com/libretech/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></noscript>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 <a href="https://librete.ch">LibreTECH</a>. <span data-i18n="footerLicense">Open source under MIT License.</span></p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -389,9 +450,9 @@
|
||||
<button id="help-dialog-close" class="dialog-close" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<h4 data-i18n="aboutTitle">About Code Crispies</h4>
|
||||
<h4 data-i18n="aboutTitle">About CODE CRISPIES</h4>
|
||||
<p data-i18n="aboutText">
|
||||
Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required -
|
||||
CODE CRISPIES is a free, open-source platform for learning web development through hands-on exercises. No account required -
|
||||
just start coding!
|
||||
</p>
|
||||
|
||||
@@ -455,7 +516,7 @@
|
||||
</div>
|
||||
|
||||
<h4 data-i18n="contactTitle">Contact & Links</h4>
|
||||
<p data-i18n-html="contactText">Code Crispies is developed by <a href="https://librete.ch" target="_blank">LibreTECH</a></p>
|
||||
<p data-i18n-html="contactText">CODE CRISPIES is developed by <a href="https://librete.ch" target="_blank">LibreTECH</a></p>
|
||||
<ul>
|
||||
<li><a href="https://git.librete.ch/libretech/code-crispies" target="_blank">Gitea</a> – Self-hosted source repository</li>
|
||||
<li><a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a> – Public mirror</li>
|
||||
@@ -463,7 +524,7 @@
|
||||
</ul>
|
||||
|
||||
<h4 data-i18n="supportTitle">Support the Project</h4>
|
||||
<p data-i18n="supportText">Help keep Code Crispies free and open source.</p>
|
||||
<p data-i18n="supportText">Help keep CODE CRISPIES free and open source.</p>
|
||||
<div class="help-support" onclick="typeof umami !== 'undefined' && umami.track('support_click', {location: 'help'})">
|
||||
<script src="https://liberapay.com/libretech/widgets/button.js"></script>
|
||||
<noscript><a href="https://liberapay.com/libretech/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></noscript>
|
||||
|
||||
Reference in New Issue
Block a user