From b3364129d887e37e598b47c070dac69bfa445527 Mon Sep 17 00:00:00 2001
From: Brittney Postma <bdesignedwebdev@gmail.com>
Date: Fri, 19 Apr 2024 11:00:45 -0400
Subject: [PATCH] updated logo placement in header (#604)

---
 src/assets/logo.svg                     |  1 +
 src/lib/components/layout/Header.svelte | 84 +++++++++----------------
 2 files changed, 32 insertions(+), 53 deletions(-)
 create mode 100644 src/assets/logo.svg

diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 000000000..de5efcbc1
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg fill="none" height="400" width="400" xmlns="http://www.w3.org/2000/svg"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="94.758" width="183.194" x="142.317" y="92.057"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><circle cx="200" cy="200" fill="#ff3e00" r="200"/><g fill="#fff"><circle cx="200" cy="201.802" r="144.446" stroke="#000" stroke-width="3"/><path d="M345.946 271.407l20.669-3.435 10.088 3.809 1.845-4.885-10.088-3.81-13.24-16.239-2.089 5.532 9.465 11.133-.1.264-14.461 2.098zM313.14 320.182l6.253-6.381 17.511 17.159 3.635-3.71-17.511-17.159 6.253-6.381-3.135-3.072-16.141 16.472zM268.465 374.818l17.103-8.074-1.875-3.97-12.367 5.839-3.369-7.134 11.385-5.375-1.874-3.97-11.385 5.375-3.35-7.096 12.265-5.791-1.874-3.969-17 8.026zM203.435 360.36h-5.237v28.906h5.237zM148.713 363.017c2.146-6.118-.543-11.691-6.242-14.621-6.716-3.453-14.291-1.158-18.564 7.151-4.266 8.297-1.793 15.774 4.985 19.259 6.113 3.143 12.2 1.274 15.439-3.266l-4.681-2.439c-2.139 2.709-5.471 3.139-8.546 1.557-4.167-2.142-5.548-6.804-2.515-12.703 2.982-5.8 7.603-7.502 11.808-5.34 3.126 1.607 4.663 4.635 3.622 7.988zM83.406 331.139c7.591-5.447 8.739-13.289 4.32-19.447-4.427-6.17-12.215-7.582-19.807-2.135-7.58 5.44-8.747 13.278-4.32 19.448 4.419 6.158 12.215 7.581 19.807 2.134zm-3.07-4.277c-5.343 3.834-10.17 3.233-12.919-.597-2.74-3.819-1.772-8.596 3.572-12.43 5.343-3.835 10.178-3.222 12.919.597 2.748 3.83 1.772 8.595-3.572 12.43zM45.304 265.345l1.535 4.799c4.621-1.581 6.647-6.6 4.772-12.462-1.848-5.78-6.49-9.082-11.352-7.513-3.953 1.264-5.326 4.801-5.047 9.705l.195 3.39c.197 3.212-.103 5.472-2.236 6.169-2.357.738-4.643-.99-5.684-4.244-.997-3.119-.373-5.985 2.453-7.111l-1.569-4.907c-5.407 1.951-7.183 7.009-5.132 13.422 2.11 6.6 6.63 9.378 11.487 7.84 4.768-1.54 5.686-6.175 5.343-10.629l-.18-2.788c-.184-2.43-.012-5.182 2.295-5.891 2.075-.648 4.187.721 5.185 3.84.95 2.971.193 5.377-2.065 6.38zM334.244 114.515l8.908 16.684 3.872-2.067-6.441-12.065 6.96-3.716 5.929 11.106 3.872-2.067-5.929-11.107 6.922-3.696 6.389 11.966 3.872-2.068-8.855-16.584zM301.557 46.657l7.195 5.297-14.534 19.744 4.183 3.079 14.534-19.744 7.195 5.297 2.602-3.535-18.572-13.672zM222.768 43.517l17.75 2.789.681-4.337-12.577-1.976 3.805-24.219-5.173-.813zM151.111 49.104l18.185-5.197-1.207-4.22-13.15 3.757-2.168-7.586 12.105-3.46-1.206-4.22-12.105 3.46-2.156-7.546 13.041-3.727-1.206-4.22-18.076 5.165zM78.166 57.262l-4.29 3.82 26.818 14.826 4.829-4.297-11.605-28.368-4.302 3.829 9.518 21.987-.222.197zM43.084 108.093l2.242-4.513c-4.418-2.084-9.367.106-12.106 5.617-2.7 5.435-1.67 11.037 2.912 13.298 3.716 1.847 7.165.267 10.381-3.447l2.222-2.568c2.096-2.442 3.885-3.854 5.9-2.868 2.207 1.112 2.643 3.945 1.123 7.004-1.457 2.932-3.902 4.554-6.714 3.394l-2.292 4.613c5.238 2.367 10.036-.025 13.032-6.054 3.083-6.206 1.777-11.347-2.78-13.627-4.494-2.217-8.381.469-11.239 3.903l-1.812 2.126c-1.56 1.872-3.601 3.727-5.75 2.627-1.94-.98-2.502-3.434-1.045-6.366 1.388-2.793 3.607-3.992 5.926-3.139z"/><circle cx="26.127" cy="188.911" r="4.505"/><circle cx="372.072" cy="188.911" r="4.505"/></g><path d="M274.989 121.071c-20.321-29.31-60.454-37.998-89.469-19.363l-50.958 32.739a58.632 58.632 0 00-17.327 16.891 59.17 59.17 0 00-9.089 22.505 62.556 62.556 0 006.057 39.87 59.243 59.243 0 00-8.734 22.023 63.261 63.261 0 00.566 24.84 62.998 62.998 0 0010.083 22.672c20.32 29.311 60.453 37.998 89.468 19.364l50.958-32.601a58.833 58.833 0 0017.312-16.901 59.352 59.352 0 009.104-22.496 62.535 62.535 0 00-6.076-39.85 59.63 59.63 0 008.753-22.022 63.332 63.332 0 00-.572-24.839 63.077 63.077 0 00-10.076-22.674" fill="#ff3e00"/><path d="M181.478 284.835a41.128 41.128 0 01-24.377-1.222 40.641 40.641 0 01-19.286-14.796 36.973 36.973 0 01-6.087-13.436 36.758 36.758 0 01-.333-14.718 32.593 32.593 0 011.217-4.679l.962-2.913 2.631 1.942a66.599 66.599 0 0019.966 9.824l1.964.564-.177 1.941a11.363 11.363 0 002.14 7.475 12.251 12.251 0 005.813 4.45c2.351.861 4.914.989 7.341.366a11.57 11.57 0 003.141-1.359l51.124-32.27a10.588 10.588 0 003.16-3.031 10.443 10.443 0 001.65-4.037 11.082 11.082 0 00-.114-4.439 11.159 11.159 0 00-1.849-4.046c-1.433-2.036-3.461-3.588-5.813-4.449s-4.914-.989-7.341-.366c-1.112.291-2.171.75-3.141 1.359l-19.633 12.329a37.695 37.695 0 01-10.386 4.505 41.113 41.113 0 01-24.331-1.235 40.622 40.622 0 01-19.254-14.764 36.987 36.987 0 01-6.062-13.44 36.81 36.81 0 01-.319-14.714 34.743 34.743 0 015.483-13.373 35.188 35.188 0 0110.479-10.043l51.281-32.27a37.617 37.617 0 0110.327-4.504 41.086 41.086 0 0124.369 1.221 40.596 40.596 0 0119.274 14.797c2.918 4.031 4.991 8.599 6.097 13.434s1.223 9.84.343 14.72a38.79 38.79 0 01-1.217 4.718l-.982 2.913-2.611-1.942a66.607 66.607 0 00-20.026-9.902l-1.963-.563.177-1.942a11.29 11.29 0 00-2.081-7.534 12.22 12.22 0 00-5.8-4.356 12.372 12.372 0 00-7.276-.323c-1.111.291-2.17.75-3.141 1.359l-51.222 32.212c-1.251.782-2.324 1.812-3.152 3.025s-1.393 2.583-1.658 4.023a11.208 11.208 0 00.122 4.446c.337 1.46.963 2.839 1.841 4.058 1.426 2.018 3.438 3.558 5.77 4.418s4.873.999 7.286.398c1.109-.3 2.167-.757 3.141-1.36l19.633-12.31a36.77 36.77 0 0110.406-4.524 41.071 41.071 0 0124.367 1.209 40.58 40.58 0 0119.276 14.79 37.012 37.012 0 016.094 13.434 36.805 36.805 0 01.346 14.72 34.72 34.72 0 01-5.483 13.373 35.152 35.152 0 01-10.479 10.043l-51.222 32.27a37.878 37.878 0 01-10.405 4.524z" fill="#fff"/><g filter="url(#a)"><path d="M155.332 92.435c3.912-1.027 11.604.09 17.448 2.737l-2.036 11.752s-9.395-3.522-12.636-7.9c-.918-1.24 1.195-3.766 1.195-3.766s-3.2.111-3.522 2.87c-.321 2.757 1.399 5.323 15.191 10.065 13.792 4.743 12.691 10.776 24.066 18.334 12.102 8.043 21.675 12.507 35.671 19.318 13.995 6.81 33.131 9.1 41.924 8.48 8.531-.602 15.667-2.665 20.249-4.027l4.581-19.817 2.105.371.743-4.211c12.633 2.228 23.41 14.984 20.81 29.722-4.134 23.441-31.471 24.173-50.421 21.23-46.321-8.17-127.72-57.482-124.277-77.008 1.3-7.37 4.997-7.122 8.909-8.15z" fill="#000"/></g><path d="M172 109.438l3.528-20.002 119.644 41.726 2.106.371c1.414 12.093-4.581 19.817-4.581 19.817-18.887 8.61-50.127 1.1-62.174-4.453-20.837-9.604-45.456-25.385-58.523-37.459z" fill="#ff3e00"/><path d="M181.346 68.752c-6.129 16.287-6.747 25.947-6.747 25.947 7.122 8.855 41.958 33.453 74.5 39.192 22.108 3.899 35.98 5.26 47.993-1.305l1.299-7.369 4.457-25.266c4.827-27.372-30.658-47.742-44.344-50.156-7.307-1.65-18.95-3.342-27.372-4.827-28.424-5.014-43.656 7.497-49.786 23.784z" fill="#000"/><path d="M302.61 163.54c17.035-4.474 18.715-16.548 16.712-21.605 4.15 7.245.633 20.186-18.134 25.115-12.479 3.277-38.986 1.874-89.555-29.997 35.956 20.026 66.525 32.909 90.977 26.487z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
index 64da1b443..44b93d761 100644
--- a/src/lib/components/layout/Header.svelte
+++ b/src/lib/components/layout/Header.svelte
@@ -1,45 +1,44 @@
 <script lang="ts">
 	import Link from './Link.svelte';
 	import { page } from '$app/stores';
+	import Logo from '../../../assets/logo.svg';
 
-	const linksLeft = [
-		['/packages', 'packages'],
-		['/templates', 'templates']
+	const links = [
+		['/packages', 'Packages'],
+		['/templates', 'Templates'],
+		['/resources', 'Resources'],
+		['/recipes', 'Recipes'],
+		['/events', 'Events']
 	];
+	// const linksLeft = [
+	// 	['/packages', 'packages'],
+	// 	['/templates', 'templates']
+	// ];
 
-	const linksRight = [
-		['/resources', 'resources'],
-		['/recipes', 'recipes'],
-		['/events', 'events']
-	];
+	// const linksRight = [
+	// 	['/resources', 'resources'],
+	// 	['/recipes', 'recipes'],
+	// 	['/events', 'events']
+	// ];
 </script>
 
 <header class="px-6 py-4 print:hidden">
 	<div class="mx-auto w-full max-w-7xl">
-		<nav class="py-6">
-			<ul
-				class="grid place-items-center justify-center gap-6 font-extrabold xl:flex xl:justify-between"
-			>
-				{#each linksLeft as [path, name]}
-					<Link
-						{path}
-						active={path === '/' ? $page.url.pathname === '/' : $page.url.pathname.includes(path)}
-					>
-						{name}
-					</Link>
-				{/each}
-				<li>
-					<a href="/" class="border-none">
-						<img alt="Svelte Society Logo" src="/images/logo.svg" />
-					</a>
-				</li>
-				{#each linksRight as [path, name]}
-					<Link
-						{path}
-						active={path === '/' ? $page.url.pathname === '/' : $page.url.pathname.includes(path)}
-					>
-						{name}
-					</Link>
+		<nav class="flex items-center gap-12 py-6">
+			<a href="/" class="self-start border-none">
+				<img alt="Svelte Society Logo" src={Logo} class="w-20 lg:w-36" />
+			</a>
+
+			<ul class="grid w-full gap-6 font-extrabold lg:flex lg:items-center lg:justify-around">
+				{#each links as [path, name]}
+					<li>
+						<Link
+							{path}
+							active={path === '/' ? $page.url.pathname === '/' : $page.url.pathname.includes(path)}
+						>
+							{name}
+						</Link>
+					</li>
 				{/each}
 			</ul>
 		</nav>
@@ -52,25 +51,4 @@
 		background: var(--accent-color);
 		color: var(--header-text-color);
 	}
-	li {
-		position: absolute;
-		right: var(--s-4);
-		top: var(--s-4);
-	}
-	img {
-		width: var(--s-12);
-		height: var(--s-12);
-	}
-	@media (min-width: 1280px) {
-		li {
-			display: flex;
-			position: relative;
-			inset: 0;
-			align-items: center;
-		}
-		img {
-			width: var(--s-32);
-			height: var(--s-32);
-		}
-	}
 </style>