From c32e770396a74e817d586d422a86a036af570c1b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jun 2025 13:52:13 -0700
Subject: [PATCH] Fix photo albums + spacing

---
 src/lib/components/PhotoItem.svelte   |  4 +--
 src/lib/utils/content.ts              |  9 ++++---
 src/routes/+layout.svelte             |  3 +--
 src/routes/photos/[slug]/+page.svelte | 38 ++++-----------------------
 4 files changed, 14 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/PhotoItem.svelte b/src/lib/components/PhotoItem.svelte
index e1f6025..604ecf7 100644
--- a/src/lib/components/PhotoItem.svelte
+++ b/src/lib/components/PhotoItem.svelte
@@ -87,10 +87,10 @@
 <style lang="scss">
 	.photo-item {
 		break-inside: avoid;
-		margin-bottom: $unit-2x;
+		margin-bottom: $unit-3x;
 
 		@include breakpoint('tablet') {
-			margin-bottom: $unit;
+			margin-bottom: $unit-2x;
 		}
 	}
 
diff --git a/src/lib/utils/content.ts b/src/lib/utils/content.ts
index 248a5f7..cfebb78 100644
--- a/src/lib/utils/content.ts
+++ b/src/lib/utils/content.ts
@@ -214,9 +214,12 @@ function renderTiptapContent(doc: any): string {
 
 	// Helper to escape HTML
 	const escapeHtml = (str: string): string => {
-		const div = document.createElement('div')
-		div.textContent = str
-		return div.innerHTML
+		return str
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#039;')
 	}
 
 	return doc.content.map(renderNode).join('')
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f4be144..52fb3c0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,8 +11,7 @@
 	<meta name="description" content="Justin Edmund is a software designer based in San Francisco." />
 	<meta
 		name="viewport"
-		content="width=device-width, initial-scale=1.0, 
-user-scalable=no"
+		content="width=device-width, initial-scale=1.0, user-scalable=no"
 	/>
 </svelte:head>
 
diff --git a/src/routes/photos/[slug]/+page.svelte b/src/routes/photos/[slug]/+page.svelte
index 95dd9d3..4f5b75b 100644
--- a/src/routes/photos/[slug]/+page.svelte
+++ b/src/routes/photos/[slug]/+page.svelte
@@ -48,13 +48,6 @@
 	</div>
 {:else if album}
 	<div class="album-page">
-		<!-- Breadcrumb -->
-		<nav class="breadcrumb">
-			<a href="/photos">Photos</a>
-			<span class="separator">→</span>
-			<span class="current">{album.title}</span>
-		</nav>
-
 		<!-- Album Card -->
 		<div class="album-card">
 			<h1 class="album-title">{album.title}</h1>
@@ -136,41 +129,20 @@
 		}
 	}
 
-	.breadcrumb {
-		margin-bottom: $unit-4x;
-		font-size: 0.875rem;
-		color: $grey-40;
-
-		a {
-			color: $grey-40;
-			text-decoration: none;
-			transition: color 0.2s ease;
-
-			&:hover {
-				color: $grey-20;
-			}
-		}
-
-		.separator {
-			margin: 0 $unit;
-		}
-
-		.current {
-			color: $grey-20;
-		}
-	}
-
 	.album-card {
 		background: $grey-100;
 		border: 1px solid $grey-90;
 		border-radius: $card-corner-radius;
 		padding: $unit-6x;
-		margin-bottom: $unit-6x;
+		margin-bottom: $unit-3x;
 		text-align: center;
 
+		@include breakpoint('tablet') {
+			margin-bottom: $unit-2x;
+		}
+
 		@include breakpoint('phone') {
 			padding: $unit-4x $unit-3x;
-			margin-bottom: $unit-4x;
 		}
 	}