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

6
src/index.html
View File

@@ -3,18 +3,18 @@
<head>
<meta charset="UTF-8">
<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">
</head>
<body>
<div class="app-container">
<header class="header">
<div class="logo">
<h1>Code Crispies</h1>
<h1>🏵️ CODE CRISPIES</h1>
</div>
<nav class="main-nav">
<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="help-btn" class="btn">Help</button></li>
</ul>

2
src/js/app.js
View File

@@ -212,7 +212,6 @@ function runCode() {
// Show the module selector modal
function showModuleSelector() {
debugger;
elements.modalTitle.textContent = 'Select a Module';
// Create module buttons
@@ -228,7 +227,6 @@ function showModuleSelector() {
// Add completion status
const progress = state.userProgress[module.id];
const completedCount = progress ? progress.completed.length : 0;
debugger;
const totalLessons = module.lessons.length;
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
const moduleStore = [
// flexboxConfig,
// gridConfig,
flexboxConfig,
gridConfig,
basicsConfig
];

38
src/styles/main.css
View File

@@ -47,7 +47,7 @@ body {
}
.logo h1 {
color: var(--primary-color);
color: var(--text-color);
font-size: 1.7rem;
font-weight: 700;
}
@@ -321,4 +321,40 @@ code {
border-radius: 4px;
background-color: rgba(231, 76, 60, 0.1);
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;
}