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

feat: enhance styling for lesson components and improve kbd element appearance

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-20 00:17:55 +02:00
parent 02fddca908
commit 16f6d28107
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/main.css
View File

@@ -11,6 +11,7 @@
/* Text colors */ /* Text colors */
--text-color: #333333; --text-color: #333333;
--dark-text: #111111;
--light-text: #666666; --light-text: #666666;
--editor-text: #d4d4d4; --editor-text: #d4d4d4;
--white-text: #ffffff; --white-text: #ffffff;
@@ -233,7 +234,8 @@ code {
color: var(--text-color); color: var(--text-color);
line-height: 1.7; line-height: 1.7;
font-size: 1.1rem; font-size: 1.1rem;
width: 72%; margin-bottom: 2rem;
width: 86%;
} }
.lesson-description pre { .lesson-description pre {
@@ -249,8 +251,8 @@ code {
.lesson-description kbd { .lesson-description kbd {
font-family: var(--font-code); font-family: var(--font-code);
background-color: var(--code-bg); background-color: var(--primary-bg-medium);
color: var(--text-color); color: var(--dark-text);
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
padding: calc(var(--spacing-xs) / 2); padding: calc(var(--spacing-xs) / 2);
font-size: 0.9rem; font-size: 0.9rem;
@@ -273,7 +275,7 @@ code {
.preview-area, .preview-area,
.editor-container { .editor-container {
width: 48%; width: 50%;
} }
} }
@@ -298,8 +300,19 @@ code {
.task-instruction { .task-instruction {
background-color: var(--primary-bg-instruction); background-color: var(--primary-bg-instruction);
border-left: var(--border-accent) solid var(--primary-color); border-left: var(--border-accent) solid var(--primary-color);
padding: var(--spacing-md); padding: var(--spacing-sm);
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
line-height: 1.8;
}
.task-instruction kbd {
font-family: var(--font-code);
background-color: var(--primary-bg-medium);
color: var(--dark-text);
border-radius: var(--border-radius-sm);
padding: calc(var(--spacing-xs) / 2);
font-size: 0.9rem;
letter-spacing: -0.75px;
} }
.code-editor { .code-editor {