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-color: #333333;
--dark-text: #111111;
--light-text: #666666;
--editor-text: #d4d4d4;
--white-text: #ffffff;
@@ -233,7 +234,8 @@ code {
color: var(--text-color);
line-height: 1.7;
font-size: 1.1rem;
width: 72%;
margin-bottom: 2rem;
width: 86%;
}
.lesson-description pre {
@@ -249,8 +251,8 @@ code {
.lesson-description kbd {
font-family: var(--font-code);
background-color: var(--code-bg);
color: var(--text-color);
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;
@@ -273,7 +275,7 @@ code {
.preview-area,
.editor-container {
width: 48%;
width: 50%;
}
}
@@ -298,8 +300,19 @@ code {
.task-instruction {
background-color: var(--primary-bg-instruction);
border-left: var(--border-accent) solid var(--primary-color);
padding: var(--spacing-md);
padding: var(--spacing-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 {