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

feat: enhance CSS variables and styles for improved layout and theming

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-14 11:28:51 +02:00
parent c786699d64
commit b742d90e93
1 changed files with 157 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
src/main.css
View File

@@ -1,32 +1,77 @@
:root { :root {
/* Primary colors */
--primary-color: #dd3b59; --primary-color: #dd3b59;
--primary-light: #ff5f7f; --primary-light: #ff5f7f;
--primary-dark: #af2740; --primary-dark: #af2740;
/* Secondary colors */
--secondary-color: #393939; --secondary-color: #393939;
--secondary-dark: #1e1e1e; --secondary-dark: #1e1e1e;
/* Text colors */
--text-color: #13181c; --text-color: #13181c;
--light-text: #777; --light-text: #777;
/* Background colors */
--bg-color: #f9f9f9; --bg-color: #f9f9f9;
--panel-bg: #ffffff; --panel-bg: #ffffff;
--code-bg: #f5f5f5;
--editor-bg: #1e1e1e;
--editor-highlight: #303030;
/* Border colors */
--border-color: #e0e0e0; --border-color: #e0e0e0;
/* Status colors */
--info-color: #7a93fe; --info-color: #7a93fe;
--info-color-dark: #4a6bfd; --info-color-dark: #4a6bfd;
--success-color: #24b664; --success-color: #24b664;
--success-color-dark: #1e8f4d; --success-color-dark: #1e8f4d;
--success-color-light: #a3e6b4; --success-color-light: #a3e6b4;
--error-color: #e74c3c; --error-color: #e74c3c;
/* Special colors */
--primary-bg-light: rgba(253, 74, 149, 0.05);
--primary-bg-medium: rgba(253, 74, 149, 0.1);
--primary-bg-instruction: rgba(253, 74, 122, 0.05);
--success-bg-light: rgba(46, 204, 113, 0.1);
--success-bg-medium: rgba(46, 204, 113, 0.4);
--error-bg-light: rgba(244, 244, 244, 0.8);
--modal-bg: rgba(0, 0, 0, 0.5);
/* Typography */
--font-main: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-main: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-code: "JetBrains Mono", "Fira Code", monospace;
/* Effects */
--shadow: 0 2px 10px rgba(0, 0, 0, 0.05); --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.2);
--text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
/* Sizes and spacing */
--header-height: 60px;
--sidebar-width: 240px;
--border-radius-sm: 4px;
--border-radius-md: 6px;
--border-radius-lg: 8px;
--border-accent: 4px;
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
} }
/* Reset */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/* Base styles */
body { body {
font-family: var(--font-main), serif; font-family: var(--font-main);
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--text-color); color: var(--text-color);
line-height: 1.6; line-height: 1.6;
@@ -38,10 +83,14 @@ body {
min-height: 100vh; min-height: 100vh;
} }
code {
font-family: var(--font-code);
}
/* Header Styles */ /* Header Styles */
.header { .header {
background-color: var(--panel-bg); background-color: var(--panel-bg);
padding: 1rem 2rem; padding: var(--spacing-md) var(--spacing-xl);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -49,6 +98,7 @@ body {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
height: var(--header-height);
} }
.logo { .logo {
@@ -71,65 +121,63 @@ body {
.main-nav ul { .main-nav ul {
display: flex; display: flex;
list-style: none; list-style: none;
gap: 1rem; gap: var(--spacing-md);
} }
/* Main Content Layout */ /* Main Content Layout */
.main-content { .main-content {
display: flex; display: flex;
flex: 1; flex: 1;
min-height: calc(100vh - 60px); min-height: calc(100vh - var(--header-height));
} }
.sidebar { .sidebar {
width: 240px; width: var(--sidebar-width);
background-color: var(--panel-bg); background-color: var(--panel-bg);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
padding: 1.5rem 1rem; padding: var(--spacing-lg) var(--spacing-md);
overflow-y: auto; overflow-y: auto;
height: calc(100vh - 60px); height: calc(100vh - var(--header-height));
position: sticky; position: sticky;
top: 60px; top: var(--header-height);
} }
.content-area { .content-area {
flex: 1; flex: 1;
padding: 2rem; padding: var(--spacing-xl);
max-width: calc(100% - 240px); max-width: calc(100% - var(--sidebar-width));
} }
/* Module List Styles */ /* Module List Styles */
.module-list { .module-list {
margin-bottom: 2rem; margin-bottom: var(--spacing-xl);
} }
.module-list h3 { .module-list h3 {
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
/*color: var(--light-text);*/
font-size: 0.7rem; font-size: 0.7rem;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 800; font-weight: 800;
padding: 0.5rem 1rem; padding: var(--spacing-xs) var(--spacing-md);
text-transform: uppercase; text-transform: uppercase;
border-left: 4px solid var(--primary-color); border-left: var(--border-accent) solid var(--primary-color);
border-radius: 2px; border-radius: 2px;
/*background-color: rgba(0, 0, 0, 0.05);*/
} }
.module-list-item { .module-list-item {
padding: 0.75rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
margin-bottom: 0.5rem; margin-bottom: var(--spacing-xs);
border-radius: 6px; border-radius: var(--border-radius-md);
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.module-list-item:hover { .module-list-item:hover {
background-color: rgba(253, 74, 149, 0.05); background-color: var(--primary-bg-light);
} }
.module-list-item.active { .module-list-item.active {
background-color: rgba(253, 74, 149, 0.1); background-color: var(--primary-bg-medium);
color: var(--primary-color); color: var(--primary-color);
} }
@@ -141,11 +189,11 @@ body {
justify-content: flex-start; justify-content: flex-start;
gap: 1.4rem; gap: 1.4rem;
background-color: var(--panel-bg); background-color: var(--panel-bg);
border-radius: 8px; border-radius: var(--border-radius-lg);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 2rem; padding: var(--spacing-xl);
height: 100%; height: 100%;
margin-bottom: 2rem; margin-bottom: var(--spacing-xl);
} }
#lesson-title { #lesson-title {
@@ -161,13 +209,13 @@ body {
.lesson-description pre { .lesson-description pre {
display: inline-block; display: inline-block;
font-family: "JetBrains Mono", "Fira Code", monospace; font-family: var(--font-code);
font-size: 0.9rem; font-size: 0.9rem;
background-color: #f5f5f5; background-color: var(--code-bg);
padding: 2rem 3rem 2rem 2rem; padding: var(--spacing-xl) calc(var(--spacing-xl) + var(--spacing-md)) var(--spacing-xl) var(--spacing-xl);
border-radius: 6px; border-radius: var(--border-radius-md);
overflow-x: auto; overflow-x: auto;
margin-bottom: 1.5rem; margin-bottom: var(--spacing-lg);
} }
/* Challenge Container */ /* Challenge Container */
@@ -175,8 +223,8 @@ body {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: var(--spacing-lg);
margin-bottom: 2rem; margin-bottom: var(--spacing-xl);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@@ -191,10 +239,10 @@ body {
} }
.preview-area { .preview-area {
background-color: #fff; background-color: var(--panel-bg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: var(--border-radius-md);
padding: 1rem; padding: var(--spacing-md);
overflow: hidden; overflow: hidden;
min-height: 300px; min-height: 300px;
display: flex; display: flex;
@@ -205,26 +253,26 @@ body {
.editor-container { .editor-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: var(--spacing-md);
} }
.task-instruction { .task-instruction {
background-color: rgba(253, 74, 122, 0.05); background-color: var(--primary-bg-instruction);
border-left: 4px solid var(--primary-color); border-left: var(--border-accent) solid var(--primary-color);
padding: 1rem; padding: var(--spacing-md);
border-radius: 4px; border-radius: var(--border-radius-sm);
} }
.code-editor { .code-editor {
position: relative; position: relative;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 6px; border-radius: var(--border-radius-md);
overflow: hidden; overflow: hidden;
} }
.editor-header { .editor-header {
background-color: #f5f5f5; background-color: var(--code-bg);
padding: 0.5rem 1rem; padding: var(--spacing-xs) var(--spacing-md);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -232,13 +280,13 @@ body {
color: var(--light-text); color: var(--light-text);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
/*.target{color:blue}*/
.editor-content { .editor-content {
background-color: #1e1e1e; background-color: var(--editor-bg);
color: #d4d4d4; color: #d4d4d4;
padding: 1rem 1rem 4rem; padding: var(--spacing-md) var(--spacing-md) 4rem;
overflow-y: auto; overflow-y: auto;
font-family: "JetBrains Mono", "Fira Code", monospace; font-family: var(--font-code);
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
cursor: text; /* Add text cursor to indicate it's editable */ cursor: text; /* Add text cursor to indicate it's editable */
@@ -252,48 +300,38 @@ body {
/* Pulse animation */ /* Pulse animation */
@keyframes focus-pulse { @keyframes focus-pulse {
0% { 0% {
background-color: #1e1e1e; background-color: var(--editor-bg);
} }
50% { 50% {
background-color: #303030; background-color: var(--editor-highlight);
} }
100% { 100% {
background-color: #1e1e1e; background-color: var(--editor-bg);
} }
} }
code {
font-family: "JetBrains Mono", "Fira Code", monospace;
}
.code-input { .code-input {
background-color: transparent; background-color: transparent;
color: #d4d4d4; color: #d4d4d4;
border: none; border: none;
width: 100%; width: 100%;
min-height: 100px; min-height: 100px;
font-family: "JetBrains Mono", "Fira Code", monospace; font-family: var(--font-code);
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 0; padding: var(--spacing-xs) 0;
outline: none; outline: none;
resize: vertical; resize: vertical;
caret-color: var(--primary-light); caret-color: var(--primary-light);
/*caret-shape: block;*/
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
/* Controls */ /* Controls */
.controls { .controls {
/*justify-self: end;*/
/*position: absolute;*/
/*left: 2rem;*/
/*right: 2rem;*/
/*bottom: 2rem;*/
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
.level-indicator { .level-indicator {
@@ -303,10 +341,10 @@ code {
/* Buttons */ /* Buttons */
.btn { .btn {
padding: 0.5rem 1rem; padding: var(--spacing-xs) var(--spacing-md);
border-radius: 4px; border-radius: var(--border-radius-sm);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: #fff; background-color: var(--panel-bg);
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
font-family: var(--font-main); font-family: var(--font-main);
@@ -314,11 +352,11 @@ code {
transition: transition:
background, background,
color 0.2s; color 0.2s;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); text-shadow: var(--text-shadow);
} }
.btn:hover { .btn:hover {
background-color: #f5f5f5; background-color: var(--code-bg);
} }
.btn-primary { .btn-primary {
@@ -347,6 +385,24 @@ code {
margin-right: 0.3rem; margin-right: 0.3rem;
} }
/* Button states */
.btn-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.success,
.success:hover,
.success:focus {
background-color: var(--success-color);
border: 1px solid var(--success-color);
}
/* Module selector button with progress */
#module-selector-btn {
overflow: hidden;
}
/* Modal */ /* Modal */
.modal-container { .modal-container {
position: fixed; position: fixed;
@@ -354,7 +410,7 @@ code {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: var(--modal-bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -363,8 +419,8 @@ code {
.modal { .modal {
background-color: var(--panel-bg); background-color: var(--panel-bg);
border-radius: 8px; border-radius: var(--border-radius-lg);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-modal);
width: 90%; width: 90%;
max-width: 600px; max-width: 600px;
max-height: 80vh; max-height: 80vh;
@@ -372,7 +428,7 @@ code {
} }
.modal-header { .modal-header {
padding: 1rem; padding: var(--spacing-md);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -380,13 +436,13 @@ code {
} }
.modal-content { .modal-content {
padding: 1.5rem; padding: var(--spacing-lg);
} }
.modal-content ol, .modal-content ol,
.modal-content ul { .modal-content ul {
margin-left: 1.5rem; margin-left: var(--spacing-lg);
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
} }
.modal-content h3 { .modal-content h3 {
@@ -400,7 +456,7 @@ code {
} }
.modal-content p { .modal-content p {
margin-bottom: 1rem; margin-bottom: var(--spacing-md);
} }
.modal-close { .modal-close {
@@ -411,83 +467,51 @@ code {
color: var(--light-text); color: var(--light-text);
} }
.hidden { /* Feedback styles */
display: none;
}
/* Feedback */
.feedback-success { .feedback-success {
position: absolute; position: absolute;
bottom: 0.8rem; bottom: 0.8rem;
right: 0.8rem; right: 0.8rem;
color: var(--success-color-light); color: var(--success-color-light);
font-weight: 800; font-weight: 800;
padding: 0.5rem; padding: var(--spacing-xs);
border-radius: 4px; border-radius: var(--border-radius-sm);
background-color: rgba(46, 204, 113, 0.4); background-color: var(--success-bg-medium);
border-left: 3px solid var(--success-color); border-left: 3px solid var(--success-color);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/*.feedback-error {*/
/* color: var(--error-color);*/
/* font-weight: 500;*/
/* margin-top: 1rem;*/
/* padding: 0.5rem;*/
/* 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);*/
border-left: 4px solid var(--success-color);
transition: all 0.3s ease;
}
/* Success text color for headings */
.success-text {
color: var(--success-color);
transition: color 0.3s ease;
}
.success-instruction {
background-color: rgba(46, 204, 113, 0.1);
border-left: 4px solid var(--success-color);
padding: 1rem;
border-radius: 4px;
}
.success,
.success:hover,
.success:focus {
background-color: var(--success-color);
border: 1px solid var(--success-color);
}
/* Friendlier error feedback */
.feedback-error { .feedback-error {
position: absolute; position: absolute;
bottom: 0.8rem; bottom: 0.8rem;
right: 0.8rem; right: 0.8rem;
color: var(--text-color); color: var(--text-color);
font-weight: 500; font-weight: 500;
padding: 0.5rem; padding: var(--spacing-xs);
border-radius: 4px; border-radius: var(--border-radius-sm);
background-color: rgba(244, 244, 244, 0.8); background-color: var(--error-bg-light);
border-left: 3px solid white; border-left: 3px solid white;
} }
/* Module selector button with progress */ /* Success states */
#module-selector-btn { .success-highlight {
overflow: hidden; border-left: var(--border-accent) solid var(--success-color);
transition: all 0.3s ease;
} }
/* Button disabled state */ .success-text {
.btn-disabled { color: var(--success-color);
opacity: 0.6; transition: color 0.3s ease;
cursor: not-allowed; }
.success-instruction {
background-color: var(--success-bg-light);
border-left: var(--border-accent) solid var(--success-color);
padding: var(--spacing-md);
border-radius: var(--border-radius-sm);
}
/* Utility classes */
.hidden {
display: none;
} }