feat: footer

src/App.svelte

@@ -4,6 +4,7 @@
   import Dash from "./pages/Dash.svelte";
   import Home from "./pages/Home.svelte";
   import Settings from './pages/Settings.svelte';
+  import Footer from './lib/Footer.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";
@@ -38,7 +39,6 @@
 
 <Router>
   <Navigation bind:style={style}/>
-  <div>
     <Route path="/">
         <Home />
     </Route>
@@ -48,5 +48,5 @@
     <Route path="/settings">
       <Settings />
     </Route>
-  </div>
+  <Footer />
 </Router>

src/lib/Footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import {Navbar, Nav, NavItem, NavLink} from 'sveltestrap';
+</script>
+
+<div style="background-color: #292929">
+    <Navbar color="dark" dark>
+        <Nav>
+            <NavItem>
+                <NavLink href="https://pluralkit.me/">pluralkit.me</NavLink>
+            </NavItem>
+        </Nav>
+    </Navbar>
+</div>

src/lib/Navigation.svelte

@@ -14,8 +14,8 @@
 		loggedIn_value = value;
 	});
 </script>
-<div style="background-color: #292929">
+<div style="background-color: #292929" class="mb-4">
-    <Navbar color="light" light expand="lg" class="mb-4">
+    <Navbar color="light" light expand="lg">
         <NavbarBrand>pk-webs</NavbarBrand>
         <NavbarToggler on:click={toggle}></NavbarToggler>
         <Collapse {isOpen} navbar expand="lg">

src/pages/Home.svelte

@@ -101,7 +101,7 @@
                 </CardBody>
             </Card>
             {#if isLoggedIn}
-            <Card>
+            <Card class="mb-4">
                 <CardBody>
                     Some cool stuff will go here.
                 </CardBody>

src/pages/Settings.svelte

@@ -23,7 +23,7 @@
 <Container>
     <Row>
         <Col class="mx-auto" xs={12} lg={10}>
-            <Card>
+            <Card class="mb-4">
                 <CardHeader>
                     <CardTitle style="margin-top: 8px; outline: none;">
                         <div class="icon d-inline-block">

style.css

@@ -1,3 +1,9 @@
+#app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
 .icon {
     height: 1.5em;
     width: 1.5em;
@@ -47,6 +53,10 @@ blockquote {
     border-bottom: none !important;
 }
 
+.container {
+    flex: 1 0 auto !important;
+}
+
 .d-spoiler {
     color: var(--bs-dark);
     background-color: var(--bs-dark);