More scss config

site/src/scss/main.scss

@@ -0,0 +1,4 @@
+@forward './util/css-loader.css';
+@forward './parts/nav.scss';
+@forward './parts/footer.scss';
+@use './util/theme';

site/src/scss/util/_theme.scss

@@ -0,0 +1,36 @@
+$theme-light: (
+    text-primary: black,
+    text-accent: #303030,
+    link: #1e24a1ff,
+    bg-primary: white,
+    bg-accent: rgb(226, 226, 226),
+    bg-analytics: rgb(193, 193, 223),
+    bg-yt-embed: rgb(173, 173, 173),
+    slider-info: rgba(255, 255, 255, 0.85),
+    button: rgb(21, 43, 92),
+    button-hover: rgb(2, 10, 27),
+);
+
+$theme-dark: (
+    text-primary: white,
+    text-accent: #b5b5b5,
+    link: #005aacff,
+    bg-primary: #151515,
+    bg-accent: black,
+    bg-analytics: #303030,
+    bg-yt-embed: #404040,
+    slider-info: rgba(0, 0, 0, 0.85),
+    button: rgb(20, 150, 200),
+    button-hover: rgb(15, 125, 175),
+);
+
+$PI: 3.14159265358979;
+
+
+@mixin gen-theme ($selector, $theme) {
+  #{$selector} {
+    @each $var, $value in $theme {
+      color-#{$var}: #{$value};
+    }
+  }
+}

site/src/scss/util/css-loader.css

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');