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

feat: add new logos and color schema

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-19 20:20:23 +02:00
parent ee8a8d6649
commit bd695c973f
7 changed files with 112 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/main.css
View File

@@ -1,21 +1,24 @@
/* ================= BASE THEME ================= */
:root {
/* Primary colors */
--primary-color: #dd3b59;
--primary-light: #ff5f7f;
--primary-dark: #af2740;
--primary-color: #5e4b8b; /* Rich purple */
--primary-light: #8a77b5; /* Lighter purple */
--primary-dark: #3b2e63; /* Darker purple */
/* Secondary colors */
--secondary-color: #393939;
--secondary-dark: #1e1e1e;
--secondary-color: #444444;
--secondary-dark: #222222;
/* Text colors */
--text-color: #13181c;
--light-text: #777;
--text-color: #333333;
--light-text: #666666;
--editor-text: #d4d4d4;
--white-text: #ffffff;
/* Background colors */
--bg-color: #f9f9f9;
--bg-color: #f8f7fc; /* Subtle purple tint */
--panel-bg: #ffffff;
--code-bg: #f5f5f5;
--code-bg: #f7f5fa; /* Very light purple */
--editor-bg: #1e1e1e;
--editor-highlight: #303030;
@@ -25,28 +28,39 @@
/* Status colors */
--info-color: #7a93fe;
--info-color-dark: #4a6bfd;
--success-color: #24b664;
--success-color-dark: #1e8f4d;
--success-color-light: #a3e6b4;
--error-color: #e74c3c;
--success-color: #58b890; /* Muted teal green */
--success-color-dark: #3d8d6a;
--success-color-light: #a3e6c8;
--error-color: #cb6e75; /* Muted red */
/* 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);
--primary-bg-light: rgba(94, 75, 139, 0.05);
--primary-bg-medium: rgba(94, 75, 139, 0.1);
--primary-bg-instruction: rgba(94, 75, 139, 0.05);
--success-bg-light: rgba(88, 184, 144, 0.1);
--success-bg-medium: rgba(88, 184, 144, 0.4);
--error-bg-light: rgba(244, 244, 244, 0.8);
--modal-bg: rgba(0, 0, 0, 0.5);
/* Additional colors */
--badge-bg: var(--success-color);
--black-transparent-10: rgba(0, 0, 0, 0.1);
--black-transparent-20: rgba(0, 0, 0, 0.2);
--black-transparent-05: rgba(0, 0, 0, 0.05);
--white-transparent-80: rgba(255, 255, 255, 0.8);
--primary-transparent-05: rgba(94, 75, 139, 0.05);
--primary-transparent-10: rgba(94, 75, 139, 0.1);
--success-transparent-10: rgba(88, 184, 144, 0.1);
--success-transparent-40: rgba(88, 184, 144, 0.4);
/* Typography */
--font-main: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-main: "Playfair Display", "Inter", "Segoe UI", Roboto, sans-serif;
--font-code: "JetBrains Mono", "Fira Code", monospace;
/* Effects */
--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);
--shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.15);
--text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
/* Sizes and spacing */
--header-height: 60px;
@@ -181,6 +195,21 @@ code {
color: var(--primary-color);
}
.module-list-item.completed {
position: relative;
padding-right: 2rem;
}
.module-list-item.completed::after {
content: "✓";
position: absolute;
right: 0.8rem;
top: 50%;
transform: translateY(-50%);
color: var(--primary-color);
font-weight: bold;
}
/* Lesson Container */
.lesson-container {
display: flex;
@@ -264,6 +293,8 @@ code {
}
.code-editor {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
border: 1px solid var(--border-color);
@@ -271,20 +302,12 @@ code {
overflow: hidden;
}
.code-editor.block-editor {
display: block;
}
.code-editor.inline-editor {
display: inline-block;
width: 100%;
}
.editor-header {
background-color: var(--code-bg);
padding: var(--spacing-xs) var(--spacing-md);
display: flex;
justify-content: space-between;
min-height: 2rem;
align-items: center;
font-size: 0.9rem;
color: var(--light-text);
@@ -293,13 +316,11 @@ code {
.editor-content {
display: flex;
flex: 1;
flex-direction: column;
background-color: var(--editor-bg);
color: #d4d4d4;
padding: var(--spacing-md);
/*margin-bottom: 4rem;*/
overflow-y: scroll;
height: 100%;
color: var(--editor-text);
padding: 0;
font-family: var(--font-code);
font-size: 14px;
line-height: 1.5;
@@ -328,16 +349,16 @@ code {
flex: 1;
display: block;
background-color: transparent;
color: #d4d4d4;
color: var(--editor-text);
border: none;
width: 100%;
min-height: 100px; /* Ensure minimum height */
min-height: 14px; /* Ensure minimum height */
font-family: var(--font-code);
font-size: 14px;
line-height: 1.5;
padding: var(--spacing-xs) 0;
padding: var(--spacing-md);
outline: none;
overflow: auto; /* Ensure scrolling works */
overflow-y: scroll; /* Ensure scrolling works */
resize: none; /* Disable textarea resize */
caret-color: var(--primary-light);
transition: background-color 0.2s ease;
@@ -378,7 +399,7 @@ code {
.btn-primary {
background-color: var(--primary-color);
color: white;
color: var(--white-text);
border: 1px solid var(--primary-dark);
}
@@ -388,7 +409,7 @@ code {
.btn-secondary {
background-color: var(--secondary-color);
color: white;
color: var(--white-text);
border: 1px solid var(--secondary-dark);
}
@@ -408,17 +429,21 @@ code {
cursor: not-allowed;
}
.success,
.success:hover,
.success:focus {
.success {
background-color: var(--success-color);
border: 1px solid var(--success-color);
}
.success:hover,
.success:focus {
background-color: var(--success-color-dark);
border: 1px solid var(--success-color-dark);
}
.validation-indicators-container {
position: absolute;
top: 1rem;
right: 7rem;
/*position: absolute;*/
/*top: 1rem;*/
/*right: 8rem;*/
display: flex;
gap: 5px;
z-index: 5;
@@ -426,7 +451,7 @@ code {
.validation-success-indicator {
background-color: var(--success-color);
color: white;
color: var(--white-text);
width: 20px;
height: 20px;
border-radius: 50%;
@@ -509,7 +534,7 @@ code {
.feedback-success {
position: absolute;
bottom: 0.8rem;
right: 0.8rem;
right: 1.6rem;
color: var(--success-color-light);
font-weight: 800;
padding: var(--spacing-xs);
@@ -522,13 +547,22 @@ code {
.feedback-error {
position: absolute;
bottom: 0.8rem;
right: 0.8rem;
right: 1.6rem;
color: var(--text-color);
font-weight: 500;
padding: var(--spacing-xs);
border-radius: var(--border-radius-sm);
background-color: var(--error-bg-light);
border-left: 3px solid white;
border-left: 3px solid var(--white-text);
}
.feedback-error kbd {
background-color: var(--error-bg-light);
color: var(--text-color);
border-radius: var(--border-radius-sm);
padding: calc(var(--spacing-xs) / 2);
font-size: 0.7rem;
letter-spacing: -0.75px;
}
/* Success states */
@@ -553,3 +587,29 @@ code {
.hidden {
display: none;
}
/* Completed lesson indicators */
.completion-badge {
display: inline-block;
margin-left: 0.8rem;
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--white-text);
background-color: var(--badge-bg);
border-radius: 1rem;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Update run button styling when in re-run state */
#run-btn.re-run {
background-color: var(--success-color);
border-color: var(--success-color);
}
#run-btn.re-run:hover {
background-color: var(--success-color-dark);
border-color: var(--success-color-dark);
}