From 91d9fd1a75748466071f426ba14f025ea620d1a2 Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Sat, 11 Dec 2021 18:39:42 +0100
Subject: [PATCH] feat: footer

---
 src/App.svelte            |  4 ++--
 src/lib/Footer.svelte     | 13 +++++++++++++
 src/lib/Navigation.svelte |  4 ++--
 src/pages/Home.svelte     |  2 +-
 src/pages/Settings.svelte |  2 +-
 style.css                 | 10 ++++++++++
 6 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/Footer.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 1e4faf6f..40ad73b6 100644
--- a/src/App.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
new file mode 100644
index 00000000..f26fcbbc
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/Navigation.svelte b/src/lib/Navigation.svelte
index c541dc34..8cff6eb4 100644
--- a/src/lib/Navigation.svelte
+++ b/src/lib/Navigation.svelte
@@ -14,8 +14,8 @@
 		loggedIn_value = value;
 	});
 </script>
-<div style="background-color: #292929">
-    <Navbar color="light" light expand="lg" class="mb-4">
+<div style="background-color: #292929" class="mb-4">
+    <Navbar color="light" light expand="lg">
         <NavbarBrand>pk-webs</NavbarBrand>
         <NavbarToggler on:click={toggle}></NavbarToggler>
         <Collapse {isOpen} navbar expand="lg">
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
index 9e52a94e..5a806102 100644
--- a/src/pages/Home.svelte
+++ b/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>
diff --git a/src/pages/Settings.svelte b/src/pages/Settings.svelte
index d62e6bdf..7d3b9bc8 100644
--- a/src/pages/Settings.svelte
+++ b/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">
diff --git a/style.css b/style.css
index 5081c551..d3dc1aeb 100644
--- a/style.css
+++ b/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);