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

refactor: update styles and improve layout

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-13 19:09:11 +02:00
parent c46d6efd6b
commit 12b70e0b31
6 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -4,6 +4,7 @@
"description": "An interactive platform for learning CSS through practical challenges", "description": "An interactive platform for learning CSS through practical challenges",
"type": "module", "type": "module",
"scripts": { "scripts": {
"start": "npm run dev",
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",

6
src/index.html
View File

@@ -3,18 +3,18 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Crispies - Learn CSS Interactively</title> <title>CODE CRISPIES - Learn CSS Interactively</title>
<link rel="stylesheet" href="./styles/main.css"> <link rel="stylesheet" href="./styles/main.css">
</head> </head>
<body> <body>
<div class="app-container"> <div class="app-container">
<header class="header"> <header class="header">
<div class="logo"> <div class="logo">
<h1>Code Crispies</h1> <h1>🏵️ CODE CRISPIES</h1>
</div> </div>
<nav class="main-nav"> <nav class="main-nav">
<ul> <ul>
<li><button id="module-selector-btn" class="btn">Modules</button></li> <li><button id="module-selector-btn" class="btn">Progress</button></li>
<li><button id="reset-btn" class="btn">Reset Progress</button></li> <li><button id="reset-btn" class="btn">Reset Progress</button></li>
<li><button id="help-btn" class="btn">Help</button></li> <li><button id="help-btn" class="btn">Help</button></li>
</ul> </ul>

2
src/js/app.js
View File

@@ -212,7 +212,6 @@ function runCode() {
// Show the module selector modal // Show the module selector modal
function showModuleSelector() { function showModuleSelector() {
debugger;
elements.modalTitle.textContent = 'Select a Module'; elements.modalTitle.textContent = 'Select a Module';
// Create module buttons // Create module buttons
@@ -228,7 +227,6 @@ function showModuleSelector() {
// Add completion status // Add completion status
const progress = state.userProgress[module.id]; const progress = state.userProgress[module.id];
const completedCount = progress ? progress.completed.length : 0; const completedCount = progress ? progress.completed.length : 0;
debugger;
const totalLessons = module.lessons.length; const totalLessons = module.lessons.length;
const percentComplete = Math.round((completedCount / totalLessons) * 100); const percentComplete = Math.round((completedCount / totalLessons) * 100);

4
src/lessons/lesson-config.js
View File

@@ -9,8 +9,8 @@ import basicsConfig from './configs/basics.json';
// Module store // Module store
const moduleStore = [ const moduleStore = [
// flexboxConfig, flexboxConfig,
// gridConfig, gridConfig,
basicsConfig basicsConfig
]; ];

38
src/styles/main.css
View File

@@ -47,7 +47,7 @@ body {
} }
.logo h1 { .logo h1 {
color: var(--primary-color); color: var(--text-color);
font-size: 1.7rem; font-size: 1.7rem;
font-weight: 700; font-weight: 700;
} }
@@ -322,3 +322,39 @@ code {
background-color: rgba(231, 76, 60, 0.1); background-color: rgba(231, 76, 60, 0.1);
border-left: 3px solid var(--error-color); border-left: 3px solid var(--error-color);
} }
/* Add these styles to your main.css file */
/* Success highlight for lesson container */
.success-highlight {
box-shadow: 0 0 0 3px var(--success-color);
transition: all 0.3s ease;
}
/* Success text color for headings */
.success-text {
color: var(--success-color);
transition: color 0.3s ease;
}
/* Friendlier error feedback */
.feedback-error {
color: #996633;
font-weight: 500;
margin-top: 1rem;
padding: 0.5rem;
border-radius: 4px;
background-color: rgba(255, 248, 230, 0.5);
border-left: 3px solid #cc9944;
}
/* Module selector button with progress */
#module-selector-btn {
overflow: hidden;
}
/* Button disabled state */
.btn-disabled {
opacity: 0.6;
cursor: not-allowed;
}

4
vite.config.js
View File

@@ -9,7 +9,7 @@ export default defineConfig({
sourcemap: true sourcemap: true
}, },
server: { server: {
port: 3000, port: 1312,
open: true open: false
} }
}); });