From a7b992d2ac2eb1ccdcc0a10b63076765f73f356e Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sun, 29 Jan 2023 23:48:55 -0800
Subject: [PATCH] Adding logo and styles for it.

---
 src/lib/components/header/index.svelte | 11 +---
 src/lib/components/logo/index.svelte   | 78 ++++++++++++++++++++++++++
 src/routes/about/+page.server.ts       |  1 +
 src/routes/about/+page.svelte          |  1 -
 4 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/logo/index.svelte
 create mode 100644 src/routes/about/+page.server.ts

diff --git a/src/lib/components/header/index.svelte b/src/lib/components/header/index.svelte
index 2036da2..258847a 100644
--- a/src/lib/components/header/index.svelte
+++ b/src/lib/components/header/index.svelte
@@ -1,20 +1,13 @@
-<!-- import React from 'react';
-import styled from 'styled-components';
-import Logo from './Logo';
-import Nav from './Nav'; -->
-
 <script lang="ts">
+	import Logo from '$lib/components/logo/index.svelte';
 	import Nav from '$lib/components/nav/index.svelte';
 </script>
 
-
 <header>
-	<!-- <Logo /> -->
-	<h1>Test</h1>
+	<Logo />
 	<Nav />
 </header>
 
-
 <style lang="postcss">
 	header {
 		display: flex;
diff --git a/src/lib/components/logo/index.svelte b/src/lib/components/logo/index.svelte
new file mode 100644
index 0000000..1cfb4fc
--- /dev/null
+++ b/src/lib/components/logo/index.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import beeIcon from '$lib/assets/images/bee.svg';
+	import shellIcon from '$lib/assets/images/shell.svg';
+	import nutIcon from '$lib/assets/images/hazelnut.svg';
+</script>
+
+<div>
+	<a href="/" class="center">
+		<img src={beeIcon} alt="Bee Icon" width="30" height="30"/>
+		<p>Bradley</p>
+	</a>
+	<a href="/" class="center">
+		<img src={shellIcon} alt="Shell Icon" width="30" height="30"/>
+		<p>Shell</p>
+	</a>
+	<a href="/" class="center">
+		<img src={nutIcon} alt="Nut Icon" width="30" height="30"/>
+		<p>Nut</p>
+	</a>
+</div>
+
+<style lang="postcss">
+	div {
+		text-transform: uppercase;
+		display: grid;
+		grid-template-columns: repeat(3, auto);
+		justify-content: center;
+		align-items: center;
+		grid-gap: 1rem;
+		padding: 0rem;
+		font-size: 2rem;
+		--scale: 0;
+
+		p::after {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 2px;
+			bottom: -0.5px;
+			left: 0px;
+			background: var(--linkHover);
+			transition: transform 0.3s ease 0s;
+			transform: scale(var(--scale));
+		}
+
+		a {
+			display: grid;
+			justify-items: center;
+			text-decoration: none;
+
+			font-weight: bold;
+			margin-right: 0;
+			padding: 0;
+			padding-right: 0.3rem;
+
+			&:hover {
+				--scale: 1;
+			}
+
+			p {
+				position: relative;
+				font-size: 0.5em;
+				/* padding-top: 0.3rem; */
+				margin: 0.5rem 0 0 0;
+				&:hover {
+					--scale: 1;
+				}
+				&:after {
+					transform: scale(var(--scale));
+				}
+			}
+
+			img {
+				width: 3rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/routes/about/+page.server.ts b/src/routes/about/+page.server.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/src/routes/about/+page.server.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index e3fb805..d3fae80 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	export const prerender = true;
 	import SEO from "$root/lib/components/SEO.svelte";
 	import Graphql from '@iconify-icons/simple-icons/graphql';
 	import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';