init

2025-03-30 17:22:59 +05:30
commit 5782fc7832
20 changed files with 5318 additions and 0 deletions
@@ -0,0 +1,116 @@
+@import './variables.scss';
+
+// Reset and base styles
+:root {
+  font-family: $font-family;
+  line-height: $line-height;
+  font-weight: $font-weight-normal;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Default dark theme
+:root, .dark-mode {
+  color-scheme: dark;
+  color: $text-color-dark;
+  background-color: $bg-color-dark;
+
+  // CSS variables for theming
+  --primary-color: #{$primary-color};
+  --primary-hover-color: #{$primary-hover-color};
+  --text-color: #{$text-color-dark};
+  --bg-color: #{$bg-color-dark};
+  --sidebar-bg: #1e1e1e;
+  --sidebar-border: #333;
+  --card-bg: #2a2a2a;
+  --card-border: #444;
+}
+
+a {
+  font-weight: $font-weight-medium;
+  color: $primary-color;
+  text-decoration: inherit;
+  
+  &:hover {
+    color: $primary-hover-color;
+  }
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 2.5em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: $font-weight-medium;
+  font-family: inherit;
+  background-color: $button-bg-dark;
+  cursor: pointer;
+  transition: border-color 0.25s;
+  
+  &:hover {
+    border-color: $primary-color;
+  }
+}
+
+#app {
+  max-width: $max-content-width;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+// Light mode theme
+.light-mode {
+  color-scheme: light;
+  color: $text-color-light;
+  background-color: $bg-color-light;
+  
+  // Update CSS variables for light mode
+  --primary-color: #{$primary-color};
+  --primary-hover-color: #{$primary-hover-color};
+  --text-color: #{$text-color-light};
+  --bg-color: #{$bg-color-light};
+  --sidebar-bg: #fff;
+  --sidebar-border: #eee;
+  --card-bg: #fff;
+  --card-border: #ddd;
+  
+  button {
+    background-color: $button-bg-light;
+  }
+}
+
+// System preference override
+@media (prefers-color-scheme: light) {
+  :root:not(.dark-mode):not(.light-mode) {
+    color: $text-color-light;
+    background-color: $bg-color-light;
+    
+    // Update CSS variables for light mode
+    --primary-color: #{$primary-color};
+    --primary-hover-color: #{$primary-hover-color};
+    --text-color: #{$text-color-light};
+    --bg-color: #{$bg-color-light};
+    --sidebar-bg: #fff;
+    --sidebar-border: #eee;
+    --card-bg: #fff;
+    --card-border: #ddd;
+  }
+  
+  :root:not(.dark-mode):not(.light-mode) button {
+    background-color: $button-bg-light;
+  }
+}