navbar and footer components (#1)

* navbar and footer components

* fix spacing

* change class name

Author: MathyouMB

public/global.css

@@ -2,12 +2,13 @@ html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
+	padding: 0rem;
+	margin: 0rem;
 }
 
 body {
 	color: #333;
 	margin: 0;
-	padding: 8px;
 	box-sizing: border-box;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }

src/App.svelte

@@ -1,31 +1,7 @@
 <script lang="ts">
-	import { Button, HeaderAnimation } from './components'
+	import { Navbar } from './components'
+	import { Home } from './pages'
 </script>
 
-<main>
-	<div class="header-wrap">
-		<Button label="Questions"/>
-		<HeaderAnimation/>
-	</div>
-</main>
-
-<style>
-	main {
-		text-align: center;
-		padding: 1em;
-		max-width: 240px;
-		margin: 0 auto;
-	}
-
-	@media (min-width: 640px) {
-		main {
-			max-width: none;
-		}
-	}
-
-	.header-wrap {
-		display:flex;
-		justify-content: space-evenly;
-		align-items: center;
-	}
-</style>
+<Navbar/>
+<Home/>

src/components/Footer/Footer.stories.svelte

@@ -0,0 +1,15 @@
+<script>
+    import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+    import Footer from './Footer.svelte'
+</script>
+
+<Meta
+    title="Example/Footer"
+    component={Footer}
+/>
+
+<Template>
+    <Footer/>
+</Template>
+
+<Story name="Base"/>

src/components/Footer/Footer.svelte

@@ -0,0 +1,14 @@
+<div class="footer">Carleton Computer Science Society</div>
+
+<style>
+    .footer{
+        color: white;
+        width: 100%;
+        min-height: 4.5rem;
+        background-color: black;
+        font-family: 'Nunito', sans-serif;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer.svelte'

src/components/HeaderAnimation/HeaderAnimation.svelte

@@ -9,6 +9,6 @@
   controls="{false}"
   renderer="svg"
   background="transparent"
-  height="{600}"
-  width="{600}"
+  height="{700}"
+  width="{700}"
 />

src/components/Navbar/Navbar.stories.svelte

@@ -0,0 +1,16 @@
+<script>
+    import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+    import Navbar from './Navbar.svelte'
+</script>
+
+
+<Meta
+    title="Example/Navbar"
+    component={Navbar}
+/>
+
+<Template>
+    <Navbar/>
+</Template>
+
+<Story name="Base"/>

src/components/Navbar/Navbar.svelte

@@ -0,0 +1,12 @@
+<div class="navbar"></div>
+
+<style>
+    .navbar{
+        position: fixed;
+        width: 100%;
+        min-height: 4.5rem;
+        box-shadow: 0 2px 4px 1px rgb(0 0 0 / 20%);
+        z-index: 10;
+        background-color: white;
+    }
+</style>

src/components/Navbar/index.ts

@@ -0,0 +1 @@
+export { default as Navbar } from './Navbar.svelte'

src/components/index.ts

@@ -1,2 +1,4 @@
 export { Button } from './Button'
+export { Footer } from './Footer'
 export { HeaderAnimation } from './HeaderAnimation'
+export { Navbar } from './Navbar'