From b742d90e93b2888df47e662b07c3bf640a46ebd1 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <m.czechowski@pons.de>
Date: Wed, 14 May 2025 11:28:51 +0200
Subject: [PATCH] feat: enhance CSS variables and styles for improved layout
 and theming

---
 src/main.css | 290 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 157 insertions(+), 133 deletions(-)

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