Spacing and mobile design fixes

src/lib/components/DynamicPostContent.svelte

@@ -96,10 +96,10 @@
 		max-width: 784px;
 		gap: $unit-3x;
 		margin: 0 auto;
-		padding: 0 $unit-3x;
 
 		@include breakpoint('phone') {
-			padding: 0 $unit-2x;
+			gap: $unit-2x;
+			padding: $unit-half 0;
 		}
 
 		// Post type styles
@@ -319,10 +319,6 @@
 		}
 	}
 
-	.post-footer {
-		padding-bottom: $unit-2x;
-	}
-
 	.back-button {
 		color: $red-60;
 		background-color: transparent;

src/lib/components/Page.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte'
+
 	interface Props {
 		noHorizontalPadding?: boolean
 		class?: string
+		header?: Snippet
+		children?: Snippet
 	}
 
-	let { noHorizontalPadding = false, class: className = '' }: Props = $props()
+	let { noHorizontalPadding = false, class: className = '', header, children }: Props = $props()
 </script>
 
 <section class="page {className}" class:no-horizontal-padding={noHorizontalPadding}>
-	<header>
+	{#if header}
-		<slot name="header" />
+		<header>
-	</header>
+			{@render header()}
+		</header>
+	{/if}
 
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </section>
 
 <style lang="scss">

src/lib/components/ProjectHeaderContent.svelte

@@ -107,7 +107,13 @@
 		}
 
 		@include breakpoint('phone') {
-			align-self: flex-start;
+			width: 100%;
+			justify-content: center;
+			box-sizing: border-box;
+
+			:global(svg) {
+				display: none;
+			}
 		}
 	}
 </style>

src/routes/about/+page.svelte

@@ -7,16 +7,18 @@
 
 	import type { PageData } from './$types'
 
-	export let data: PageData
+	let { data } = $props<{ data: PageData }>()
 
-	$: ({ albums, games, error } = data)
+	let albums = $derived(data.albums)
+	let games = $derived(data.games)
+	let error = $derived(data.error)
 </script>
 
 <section class="about-container">
 	<Page>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			<h2>A little about me</h2>
-		</svelte:fragment>
+		{/snippet}
 
 		<section class="bio">
 			<p>
@@ -40,16 +42,16 @@
 		</section>
 	</Page>
 	<Page>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			<h2>Notable mentions</h2>
-		</svelte:fragment>
+		{/snippet}
 
 		<MentionList />
 	</Page>
 	<Page noHorizontalPadding={true}>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			<h2>Now playing</h2>
-		</svelte:fragment>
+		{/snippet}
 
 		<RecentAlbums {albums} />
 

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

@@ -14,9 +14,11 @@
 <div class="project-page-container">
 	{#if error}
 		<Page>
-			<div slot="header" class="error-header">
+			{#snippet header()}
-				<h1>Error</h1>
+				<div class="error-header">
-			</div>
+					<h1>Error</h1>
+				</div>
+			{/snippet}
 			<div class="error-content">
 				<p>{error}</p>
 				<a href="/labs" class="back-link">← Back to labs</a>
@@ -28,9 +30,11 @@
 		</Page>
 	{:else if project.status === 'list-only'}
 		<Page>
-			<div slot="header" class="error-header">
+			{#snippet header()}
-				<h1>Project Not Available</h1>
+				<div class="error-header">
-			</div>
+					<h1>Project Not Available</h1>
+				</div>
+			{/snippet}
 			<div class="error-content">
 				<p>This project is not yet available for viewing. Please check back later.</p>
 				<a href="/labs" class="back-link">← Back to labs</a>
@@ -38,46 +42,50 @@
 		</Page>
 	{:else if project.status === 'password-protected'}
 		<Page>
+			{#snippet header()}
+				<div class="project-header">
+					{#if project.logoUrl}
+						<div
+							class="project-logo"
+							style="background-color: {project.backgroundColor || '#f5f5f5'}"
+						>
+							<img src={project.logoUrl} alt="{project.title} logo" />
+						</div>
+					{/if}
+					<h1 class="project-title">{project.title}</h1>
+					{#if project.subtitle}
+						<p class="project-subtitle">{project.subtitle}</p>
+					{/if}
+				</div>
+			{/snippet}
 			<ProjectPasswordProtection
 				projectSlug={project.slug}
 				correctPassword={project.password || ''}
 				projectType="labs"
 			>
 				{#snippet children()}
-					<div slot="header" class="project-header">
-						{#if project.logoUrl}
-							<div
-								class="project-logo"
-								style="background-color: {project.backgroundColor || '#f5f5f5'}"
-							>
-								<img src={project.logoUrl} alt="{project.title} logo" />
-							</div>
-						{/if}
-						<h1 class="project-title">{project.title}</h1>
-						{#if project.subtitle}
-							<p class="project-subtitle">{project.subtitle}</p>
-						{/if}
-					</div>
 					<ProjectContent {project} />
 				{/snippet}
 			</ProjectPasswordProtection>
 		</Page>
 	{:else}
 		<Page class="project-page">
-			<div slot="header" class="project-header">
+			{#snippet header()}
-				{#if project.logoUrl}
+				<div class="project-header">
-					<div
+					{#if project.logoUrl}
-						class="project-logo"
+						<div
-						style="background-color: {project.backgroundColor || '#f5f5f5'}"
+							class="project-logo"
-					>
+							style="background-color: {project.backgroundColor || '#f5f5f5'}"
-						<img src={project.logoUrl} alt="{project.title} logo" />
+						>
-					</div>
+							<img src={project.logoUrl} alt="{project.title} logo" />
-				{/if}
+						</div>
-				<h1 class="project-title">{project.title}</h1>
+					{/if}
-				{#if project.subtitle}
+					<h1 class="project-title">{project.title}</h1>
-					<p class="project-subtitle">{project.subtitle}</p>
+					{#if project.subtitle}
-				{/if}
+						<p class="project-subtitle">{project.subtitle}</p>
-			</div>
+					{/if}
+				</div>
+			{/snippet}
 			<ProjectContent {project} />
 		</Page>
 	{/if}

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

@@ -95,9 +95,11 @@
 				{/if}
 			</div>
 			<Page>
-				<div slot="header" class="project-header">
+				{#snippet header()}
-					<ProjectHeaderContent {project} />
+					<div class="project-header">
-				</div>
+						<ProjectHeaderContent {project} />
+					</div>
+				{/snippet}
 				{#if project.status === 'password-protected'}
 					<ProjectPasswordProtection
 						projectSlug={project.slug}