Implement hamburger menu for mobile devices

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;
+	padding: calc(0.5rem * $scale) calc(1rem * $scale);
-	clip-path: var(--clip-path-button);
+	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;
 

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%);

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);
+	background-color: $color-bg;
-	color: var(--color-text);
+	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);
+		background-color: $color-bg;
-		box-shadow: var(--shadow-medium);
+		box-shadow: $shadow-medium;
 		padding: 2rem;
 		border: $border;
 		border-top: 0;

src/lib/Button.svelte

@@ -21,7 +21,7 @@
 	}
 
 	/* Disabled */
-	button {
+	button[disabled] {
 		opacity: 0.6;
 		cursor: unset;
 	}

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;

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>
+	<div class="collapse-container">
-	<Button href="/posts/">Blog</Button>
+		<div class="collapse" class:expanded>
-	<Button href="/portfolio/">Portfolio</Button>
+			<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>

src/routes/posts/[[page=integer]]/+page.svelte

@@ -46,14 +46,18 @@
 </ul>
 
 <div class="pagination-controls">
-	<Button disabled={data.page < 3} href={'/posts/'}><ArrowLineLeft /></Button>
+	<Button disabled={data.page < 3} href={'/posts/'}
+		><ArrowLineLeft aria-label="first page" /></Button
+	>
 	<Button disabled={data.page === 1} href={data.page === 2 ? '/posts/' : `/posts/${data.page - 1}`}
-		><ArrowLeft /></Button
+		><ArrowLeft aria-label="previous page" /></Button
 	>
 	<span class="current-page">{data.page}</span>
-	<Button disabled={!data.hasMore} href="/posts/{data.page + 1}"><ArrowRight /></Button>
+	<Button disabled={!data.hasMore} href="/posts/{data.page + 1}"
+		><ArrowRight aria-label="next page" /></Button
+	>
 	<Button disabled={data.page > data.pageCount - 2} href="/posts/{data.pageCount}"
-		><ArrowLineRight /></Button
+		><ArrowLineRight aria-label="last page" /></Button
 	>
 </div>
 
@@ -62,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;