Mobile layout adjustments

src/lib/components/Header.svelte

@@ -89,16 +89,13 @@
 	.header-content {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: $unit-3x;
 		pointer-events: auto;
 		width: 100%;
-		max-width: 900px;
-		margin: 0 auto;
 
 		@include breakpoint('phone') {
 			gap: $unit-2x;
-			max-width: none;
-			justify-content: center;
 		}
 	}
 

src/lib/components/Page.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-	export let noHorizontalPadding = false
+	interface Props {
+		noHorizontalPadding?: boolean
+		class?: string
+	}
+
+	let { noHorizontalPadding = false, class: className = '' }: Props = $props()
 </script>
 
-<section class="page" class:no-horizontal-padding={noHorizontalPadding}>
+<section class="page {className}" class:no-horizontal-padding={noHorizontalPadding}>
 	<header>
 		<slot name="header" />
 	</header>

src/lib/components/ProjectList.svelte

@@ -56,6 +56,11 @@
 		justify-content: center;
 		width: 100%;
 
+		@include breakpoint('phone') {
+			box-sizing: border-box;
+			padding: 0 $unit-2x;
+		}
+
 		ul {
 			display: flex;
 			flex-direction: column;

src/lib/components/UniverseFeed.svelte

@@ -29,7 +29,8 @@
 	.universe-feed {
 		display: flex;
 		flex-direction: column;
-		gap: $unit-3x;
+		gap: $unit-2x;
+		padding: 0 $unit-2x;
 	}
 
 	.empty-container {

src/lib/components/admin/Button.svelte

@@ -170,7 +170,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: $unit;
-		font-weight: 500;
+		font-weight: 400;
 		border: none;
 		cursor: pointer;
 		transition: all 0.15s ease;
@@ -211,7 +211,7 @@
 	}
 
 	.btn-medium {
-		padding: $unit $unit-2x;
+		padding: ($unit * 1.5) $unit-2x;
 		font-size: 14px;
 		border-radius: 24px;
 		min-height: 36px;

src/routes/about/+page.svelte

@@ -12,6 +12,7 @@
 	$: ({ albums, games, error } = data)
 </script>
 
+<section class="about-container">
 	<Page>
 		<svelte:fragment slot="header">
 			<h2>A little about me</h2>
@@ -19,8 +20,8 @@
 
 		<section class="bio">
 			<p>
-			Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in San
-			Francisco.
+				Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in
+				San Francisco.
 			</p>
 			<p>
 				Right now, I'm spending my free time building a hobby journaling app called <a
@@ -64,8 +65,26 @@
 		{/if}
 	</section> -->
 	</Page>
+</section>
 
 <style lang="scss">
+	.about-container {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		justify-content: center;
+		max-width: 700px;
+		margin: 0 auto;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x;
+		}
+
+		:global(.page) {
+			margin: 0;
+		}
+	}
+
 	a,
 	em {
 		color: $red-60;

src/routes/labs/+page.svelte

@@ -39,7 +39,8 @@
 		padding: 0 $unit-2x;
 
 		@include breakpoint('phone') {
-			padding: $unit-3x $unit;
+			padding: 0 $unit-2x;
+			box-sizing: border-box;
 		}
 	}
 

src/routes/labs/[slug]/+page.svelte

@@ -11,6 +11,7 @@
 	const error = $derived(data.error as string | undefined)
 </script>
 
+<div class="project-page-container">
 	{#if error}
 		<Page>
 			<div slot="header" class="error-header">
@@ -62,10 +63,13 @@
 			</ProjectPasswordProtection>
 		</Page>
 	{:else}
-	<Page>
+		<Page class="project-page">
 			<div slot="header" class="project-header">
 				{#if project.logoUrl}
-				<div class="project-logo" style="background-color: {project.backgroundColor || '#f5f5f5'}">
+					<div
+						class="project-logo"
+						style="background-color: {project.backgroundColor || '#f5f5f5'}"
+					>
 						<img src={project.logoUrl} alt="{project.title} logo" />
 					</div>
 				{/if}
@@ -77,8 +81,14 @@
 			<ProjectContent {project} />
 		</Page>
 	{/if}
+</div>
 
 <style lang="scss">
+	.project-page-container {
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	/* Error and Loading States */
 	.error-header h1 {
 		color: $red-60;
@@ -116,6 +126,7 @@
 	.project-header {
 		text-align: center;
 		width: 100%;
+		padding: $unit-2x 0;
 	}
 
 	.project-logo {

src/routes/photos/+page.svelte

@@ -8,7 +8,7 @@
 	const error = $derived(data.error)
 </script>
 
-<div class="photos-page">
+<div class="photos-container">
 	{#if error}
 		<div class="error-container">
 			<div class="error-message">
@@ -29,14 +29,15 @@
 </div>
 
 <style lang="scss">
-	.photos-page {
+	.photos-container {
 		width: 100%;
-		max-width: 900px;
+		max-width: 700px;
 		margin: 0 auto;
 		padding: 0 $unit-3x;
 
 		@include breakpoint('phone') {
-			padding: $unit-3x $unit-2x;
+			padding: 0 $unit-2x;
+			box-sizing: border-box;
 		}
 	}
 

src/routes/universe/+page.svelte

@@ -24,17 +24,7 @@
 	.universe-container {
 		max-width: 784px;
 		margin: 0 auto;
-		padding: 0 $unit-5x;
-
-		@include breakpoint('phone') {
-			margin-top: $unit-3x;
-			margin-bottom: $unit-3x;
-			padding: 0 $unit-3x;
-		}
-
-		@include breakpoint('small-phone') {
-			padding: 0 $unit-2x;
-		}
+		padding: 0;
 	}
 
 	.error-message {

src/routes/universe/[slug]/+page.svelte

@@ -39,6 +39,7 @@
 	{/if}
 </svelte:head>
 
+<div class="universe-page-container">
 	{#if error || !post}
 		<Page>
 			<div class="error-container">
@@ -57,8 +58,14 @@
 			<DynamicPostContent {post} />
 		</Page>
 	{/if}
+</div>
 
 <style lang="scss">
+	.universe-page-container {
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	.error-container {
 		display: flex;
 		justify-content: center;

src/routes/work/[slug]/+page.svelte

@@ -157,9 +157,10 @@
 		width: 100%;
 		max-width: 700px;
 		margin: 0 auto;
+		box-sizing: border-box;
 
 		@include breakpoint('phone') {
-			margin-top: $unit-3x;
+			padding: 0 $unit-2x;
 		}
 
 		:global(.page) {