Add header

jackreimers · Nov 1, 2023 · 65e854d · 65e854d
1 parent c1bfc5a
commit 65e854d
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 21 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,41 @@
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200';
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap';
+
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+    font-family: Inter, sans-serif;
+
+    /* For testing scroll effects */
+    min-height: 2000px;
+}
+
+.text-gt {
+    background: linear-gradient(to top, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.text-gb {
+    background: linear-gradient(to bottom, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.text-gr {
+    background: linear-gradient(to right, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.text-gl {
+    background: linear-gradient(to left, hsl(211, 78%, 49%), hsl(256, 100%, 16%));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<html lang='en'>
+<head>
+	<meta charset='utf-8' />
+	<link rel='icon' href='%sveltekit.assets%/favicon.png' />
+	<meta name='viewport' content='width=device-width, initial-scale=1' />
+	%sveltekit.head%
+</head>
+<body data-sveltekit-preload-data='hover' class='text-gray-700'>
+<div style='display: contents'>%sveltekit.body%</div>
+</body>
 </html>
+
diff --git a/src/lib/components/buttons/button.svelte b/src/lib/components/buttons/button.svelte
@@ -0,0 +1,9 @@
+<script lang='ts'>
+	export let classes: string = '';
+</script>
+
+<div class='flex items-center font-semibold hover:bg-gray-100 {classes}'>
+	<slot>
+		<p>Button</p>
+	</slot>
+</div>
diff --git a/src/lib/components/layout/header.svelte b/src/lib/components/layout/header.svelte
@@ -1,7 +1,44 @@
-<header class="px-8 py-6 flex">
-    <h1 class="text-4xl font-semibold">Header</h1>
-    <div class="flex-1"></div>
-    <div>
-        <p>Right</p>
-    </div>
+<script lang='ts'>
+	import Icon from '$lib/components/text/icon.svelte';
+	import Button from '$lib/components/buttons/button.svelte';
+
+	let scrollAmount = 0;
+	$: scrolled = scrollAmount > 50;
+
+	function onScroll() {
+		scrollAmount = window.scrollY;
+	}
+</script>
+
+<header
+	class='px-10 fixed w-full border-b duration-700 bg-white'
+	class:py-8={!scrolled}
+	class:py-4={scrolled}
+	class:border-transparent={!scrolled}
+	class:border-gray-300={scrolled}
+>
+	<div class='mx-auto flex'>
+		<a href='/'>
+			<!--
+			<p class='text-3xl font-semibold m-0 p-0 mb-1 text-gb'>Jack Reimers</p>
+			<p class='text-gray-400'>Software Engineer</p>
+			-->
+		</a>
+		<div class='flex-1'></div>
+		<div class='flex gap-6'>
+			<Button classes='text-2xl'></Button>
+			<Icon icon='dark_mode' classes='text-4xl text-gb' />
+			<Icon icon='menu' classes='text-4xl text-gb' />
+		</div>
+	</div>
 </header>
+
+<div class='h-64'></div>
+
+<style>
+    header {
+        transition-property: margin, padding, border-color;
+    }
+</style>
+
+<svelte:window on:scroll={() => onScroll()} />
diff --git a/src/lib/components/text/icon.svelte b/src/lib/components/text/icon.svelte
@@ -0,0 +1,14 @@
+<script lang='ts'>
+	export let icon: string = 'question_mark';
+	export let weight: number = 600;
+	export let classes: string = '';
+</script>
+
+<div class='flex items-center'>
+	<span
+		class='material-symbols-rounded {classes}'
+		style="font-variation-settings: 'wght' {weight}"
+	>
+		{icon}
+	</span>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,4 +4,7 @@
 </script>
 
 <Header/>
-<slot/>
+
+<div class="container mx-auto">
+    <slot/>
+</div>
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.js b/tailwind.config.js
@@ -2,7 +2,11 @@
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			transitionProperty: {
+				spacing: 'margin, padding'
+			}
+		}
 	},
 	plugins: []
 };
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>