feat: more modular styling

moves styling over to sass and makes each individual theme easier to customize

src/App.svelte

@@ -9,8 +9,8 @@
   import Main from "./pages/profiles/Main.svelte";
   
   // theme cdns (I might make some myself too)
-  let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
-  let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
+  let light = "/styles/light.scss";
+  let dark = "/styles/dark.scss";
 
   let styleSrc = dark;
 

src/lib/Footer.svelte

@@ -2,12 +2,10 @@
     import {Navbar, Nav, NavItem, NavLink} from 'sveltestrap';
 </script>
 
-<div style="background-color: #292929">
-    <Navbar color="dark" dark>
+    <Navbar color="light" light class="footer">
         <Nav>
             <NavItem>
                 <NavLink href="https://pluralkit.me/">pluralkit.me</NavLink>
             </NavItem>
         </Nav>
-    </Navbar>
-</div>
+    </Navbar>

src/lib/Navigation.svelte

@@ -23,8 +23,7 @@ import { get } from 'svelte/store';
     }
 
 </script>
-<div style="background-color: #292929" class="mb-4">
-    <Navbar color="light" light expand="lg">
+    <Navbar color="light" light expand="lg" class="mb-4">
         <NavbarBrand>pk-webs</NavbarBrand>
         <NavbarToggler on:click={toggle}></NavbarToggler>
         <Collapse {isOpen} navbar expand="lg">
@@ -59,5 +58,4 @@ import { get } from 'svelte/store';
                 </NavItem>
             </Nav>
         </Collapse>
-    </Navbar>
-</div>
+    </Navbar>