updated logo placement in header (#604)

svelte-society · Apr 19, 2024 · b336412 · b336412
1 parent ffb26e0
commit b336412
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 53 deletions.
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git 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>