Merge branch 'Silas'

frontend/src/styles/main.scss

@@ -8,6 +8,20 @@
 @use "components/home";
 @use "components/icon";
 
+:root {
+  --color-bg: #ffffff;
+  --color-container: #ffffff;
+  --color-text: #111827;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #121212;
+    --color-container: #333333;
+    --color-text: #e2e2e2;
+  }
+}
+
 body {
   background: var(--color-bg);
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
@@ -27,7 +41,10 @@ body {
 .sidebar {
   width: 260px;
   flex-shrink: 0;
-  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
   overflow-y: auto;
   box-sizing: border-box;
 }
@@ -35,6 +52,7 @@ body {
 .content {
   flex: 1;
   min-width: 0;
+  margin-left: 260px;
   height: 100%;
   overflow-y: auto;
   padding: var(--spacing-md);
@@ -46,8 +64,8 @@ body {
     position: fixed;
     top: 0;
     bottom: 0;
-    left: -100%;
-    transition: left .2s;
+    left: -260px;
+    transition: left .3s ease-in-out;
     z-index: 1000;
     height: 100%;
     box-sizing: border-box;