created nav bar

harvanchik · Jul 6, 2024 · 004aaf5 · 004aaf5
1 parent 788ec53
commit 004aaf5
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 3 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/lib/logo.png b/src/lib/logo.png
diff --git a/src/lib/logo2.png b/src/lib/logo2.png
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,4 +2,18 @@
 	import '../app.css';
 </script>
 
+<header class="fixed inset-x-0 top-0 z-10 border-b border-[#694E41]/25 shadow-sm">
+	<nav class="mx-auto flex h-16 items-center justify-between bg-[#faeee5] px-32">
+		<a href="./">
+			<img src="/src/lib/logo2.png" alt="logo" class="h-24" />
+		</a>
+		<!-- about and blog buttons on right side -->
+		<div class="font-cormorant mr-4 text-lg">
+			<a href="/about" class="mr-4 text-[#694E41]">about</a>
+			<a href="/blog" class="mr-4 text-[#694E41]">blog</a>
+			<a href="/subscribe" class="text-[#694E41]">subscribe</a>
+		</div>
+	</nav>
+</header>
+
 <slot></slot>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -4,7 +4,11 @@ export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 
 	theme: {
-		extend: {}
+		extend: {
+			fontFamily: {
+				cormorant: ['Cormorant Garamond', 'serif']
+			}
+		}
 	},
 
 	plugins: [require('@tailwindcss/typography')]
Original file line number	Diff line number	Diff line change
		@@ -1,2 +0,0 @@
		<h1>Welcome to SvelteKit</h1>
		<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>