diff --git a/src/_button.scss b/src/_button.scss
index cdd3986..a032a22 100644
--- a/src/_button.scss
+++ b/src/_button.scss
@@ -1,4 +1,4 @@
-@mixin button($color-bg, $color-text) {
+@mixin button($color-bg, $color-text, $scale: 1) {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -9,8 +9,14 @@
 	text-decoration: none;
 	opacity: 0.8;
 	background-color: $color-bg;
-	padding: 0.5rem 1rem;
-	clip-path: var(--clip-path-button);
+	padding: calc(0.5rem * $scale) calc(1rem * $scale);
+	font-size: calc(1rem * $scale);
+	clip-path: polygon(
+		0px 0px,
+		calc(100% - 10px * $scale) 0px,
+		100% calc(40px * $scale),
+		calc(10px * $scale) calc(40px * $scale)
+	);
 	transition: all var(--animation-speed) var(--animation-type);
 	user-select: none;
 
diff --git a/src/_vars.scss b/src/_vars.scss
index 13769b9..9f81266 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -7,3 +7,27 @@ $min-w-supported: 370px;
 $size-full-w: max(100vw, $min-w-supported);
 
 $border: 3px solid $color-accent;
+
+// Base colors
+$color-text-h: 0;
+$color-text-s: 0%;
+$color-text-l: 0%;
+$color-text: hsl($color-text-h, $color-text-s, $color-text-l);
+$color-bg-h: 0;
+$color-bg-s: 0%;
+$color-bg-l: 100%;
+$color-bg: hsl($color-bg-h, $color-bg-s, $color-bg-l);
+
+// Shadows
+$shadow-luminosity: 0%;
+$shadow-small: 0.5px 1px 1px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 10%);
+$shadow-medium:
+	1px 2px 2px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 20%),
+	2px 4px 4px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 20%),
+	3px 6px 6px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 20%);
+$shadow-large:
+	1px 2px 2px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
+	2px 4px 4px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
+	4px 8px 8px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
+	8px 16px 16px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
+	16px 32px 32px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%);
diff --git a/src/app.scss b/src/app.scss
index 00c6e71..0dfff8d 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,39 +1,15 @@
 @import './vars';
 
 html {
-	--color-text-h: 0;
-	--color-text-s: 0%;
-	--color-text-l: 0%;
-	--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
-	--color-bg-h: 0;
-	--color-bg-s: 0%;
-	--color-bg-l: 100%;
-	--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
-
 	--animation-speed: 0.2s;
 	--animation-type: ease-in-out;
 
-	--shadow-luminosity: calc(100% - var(--color-bg-l));
-	--shadow-small: 0.5px 1px 1px
-		hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
-	--shadow-medium: 1px 2px 2px
-			hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
-		2px 4px 4px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
-		3px 6px 6px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333);
-	--shadow-large: 1px 2px 2px
-			hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
-		2px 4px 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
-		4px 8px 8px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
-		8px 16px 16px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
-		16px 32px 32px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2);
-
 	--z-index-modal: 100;
 
 	--clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
-	--clip-path-button: polygon(0px 0px, calc(100% - 10px) 0px, 100% 40px, 10px 40px);
 
-	background-color: var(--color-bg);
-	color: var(--color-text);
+	background-color: $color-bg;
+	color: $color-text;
 
 	min-width: $min-w-supported;
 }
@@ -113,8 +89,8 @@ body {
 	.pagefind-ui__drawer {
 		position: absolute;
 		z-index: var(--z-index-modal);
-		background-color: var(--color-bg);
-		box-shadow: var(--shadow-medium);
+		background-color: $color-bg;
+		box-shadow: $shadow-medium;
 		padding: 2rem;
 		border: $border;
 		border-top: 0;
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 6525cb3..7295187 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -40,7 +40,7 @@
 	.row {
 		margin: 0 auto;
 		max-width: $size-container;
-		background-color: var(--color-bg);
+		background-color: $color-bg;
 		padding: 1rem;
 		border-radius: 0.5rem;
 		display: flex;
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index e44811c..db5d780 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -6,11 +6,19 @@
 	import Avif from './logo.avif';
 	import Jpeg from './logo.avif?format=jpeg';
 	import WebP from './logo.avif?format=webp';
+	import List from 'phosphor-svelte/lib/List';
+	import { afterNavigate } from '$app/navigation';
 
 	onMount(() => {
 		// @ts-ignore
 		new PagefindUI({ element: '#search', showSubResults: true });
 	});
+
+	let expanded = false;
+
+	afterNavigate(() => {
+		expanded = false;
+	});
 </script>
 
 <header>
@@ -21,18 +29,31 @@
 			<img
 				src={Jpeg}
 				class="circle"
-				alt="A stylized representation of the letters 'KBG'. The letters are intertwined with wavy lines and have a modern, digital aesthetic. The color palette consists of shades of blue, orange, and white."
+				alt="A vibrant and artistic representation of the letters KBG. Each letter is made out of multiple curved black lines running together, and is adorned with colorful leaves. The ends of the letters extend and narrow into thin lines capped with colorful dots."
 			/>
 		</picture>
 	</a>
 	<Spacer />
-	<div id="search"></div>
-	<Button href="/posts/">Blog</Button>
-	<Button href="/portfolio/">Portfolio</Button>
+	<div class="collapse-container">
+		<div class="collapse" class:expanded>
+			<div id="search"></div>
+			<Button href="/posts/">Blog</Button>
+			<Button href="/portfolio/">Portfolio</Button>
+		</div>
+	</div>
+	<button
+		class="hamburger"
+		on:click={() => {
+			expanded = !expanded;
+		}}
+	>
+		<List aria-label="menu" />
+	</button>
 </header>
 
 <style lang="scss">
 	@import '../vars';
+	@import '../button';
 
 	header {
 		display: flex;
@@ -47,6 +68,50 @@
 			margin-bottom: unset;
 		}
 	}
+	.collapse-container {
+		position: relative;
+	}
+	.collapse {
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+		align-items: center;
+	}
+	.hamburger {
+		@include button($color-primary, $color-primary-text, 1.5);
+		display: none;
+		flex-direction: row;
+	}
+
+	@media (max-width: $size-container) {
+		header {
+			margin-right: 1.5rem;
+		}
+
+		#search {
+			width: 100%;
+		}
+
+		.collapse {
+			z-index: 1;
+			display: none;
+			position: absolute;
+			right: 0;
+			flex-direction: column;
+			align-items: end;
+			background-color: $color-bg;
+			width: calc($min-w-supported * 0.66);
+			box-shadow: $shadow-medium;
+			padding: 1.5rem;
+
+			&.expanded {
+				display: flex;
+			}
+		}
+		.hamburger {
+			display: flex;
+		}
+	}
 
 	.logo {
 		width: 12rem;
@@ -56,7 +121,4 @@
 		min-width: 6rem;
 		min-height: 3rem;
 	}
-	#search {
-		min-width: 1rem;
-	}
 </style>
diff --git a/src/routes/posts/[[page=integer]]/+page.svelte b/src/routes/posts/[[page=integer]]/+page.svelte
index 796336b..8fdd8ff 100644
--- a/src/routes/posts/[[page=integer]]/+page.svelte
+++ b/src/routes/posts/[[page=integer]]/+page.svelte
@@ -66,7 +66,7 @@
 
 	/* Restore the color of everything under the post links, except the titles */
 	.posts a {
-		color: var(--color-text);
+		color: $color-text;
 	}
 	.posts a .post-title {
 		color: $color-primary;