Fix photo albums + spacing

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;
 		}
 	}
 

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, '&')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#039;')
 	}
 
 	return doc.content.map(renderNode).join('')

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>
 

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;
 		}
 	}