feat: add new logos and color schema

src/main.css

@@ -1,21 +1,24 @@
+/* ================= BASE THEME ================= */
 :root {
 	/* Primary colors */
-	--primary-color: #dd3b59;
+	--primary-color: #5e4b8b; /* Rich purple */
-	--primary-light: #ff5f7f;
+	--primary-light: #8a77b5; /* Lighter purple */
-	--primary-dark: #af2740;
+	--primary-dark: #3b2e63; /* Darker purple */
 
 	/* Secondary colors */
-	--secondary-color: #393939;
+	--secondary-color: #444444;
-	--secondary-dark: #1e1e1e;
+	--secondary-dark: #222222;
 
 	/* Text colors */
-	--text-color: #13181c;
+	--text-color: #333333;
-	--light-text: #777;
+	--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: #58b890; /* Muted teal green */
-	--success-color-dark: #1e8f4d;
+	--success-color-dark: #3d8d6a;
-	--success-color-light: #a3e6b4;
+	--success-color-light: #a3e6c8;
-	--error-color: #e74c3c;
+	--error-color: #cb6e75; /* Muted red */
 
 	/* Special colors */
-	--primary-bg-light: rgba(253, 74, 149, 0.05);
+	--primary-bg-light: rgba(94, 75, 139, 0.05);
-	--primary-bg-medium: rgba(253, 74, 149, 0.1);
+	--primary-bg-medium: rgba(94, 75, 139, 0.1);
-	--primary-bg-instruction: rgba(253, 74, 122, 0.05);
+	--primary-bg-instruction: rgba(94, 75, 139, 0.05);
-	--success-bg-light: rgba(46, 204, 113, 0.1);
+	--success-bg-light: rgba(88, 184, 144, 0.1);
-	--success-bg-medium: rgba(46, 204, 113, 0.4);
+	--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: 0 2px 10px rgba(0, 0, 0, 0.03);
-	--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.2);
+	--shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.15);
-	--text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+	--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;
+	color: var(--editor-text);
-	padding: var(--spacing-md);
+	padding: 0;
-	/*margin-bottom: 4rem;*/
-	overflow-y: scroll;
-	height: 100%;
 	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 {
-.success:hover,
-.success:focus {
 	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;
+	/*position: absolute;*/
-	top: 1rem;
+	/*top: 1rem;*/
-	right: 7rem;
+	/*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);
+}