jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix photo albums + spacing

Browse source
This commit is contained in:
Justin Edmund 2025-06-02 13:52:13 -07:00
parent f07438ce92
commit c32e770396
4 changed files with 14 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/PhotoItem.svelte
View file

@ -87,10 +87,10 @@
<style lang="scss"> <style lang="scss">
.photo-item { .photo-item {
break-inside: avoid; break-inside: avoid;
margin-bottom: $unit-2x; margin-bottom: $unit-3x;
@include breakpoint('tablet') { @include breakpoint('tablet') {
margin-bottom: $unit; margin-bottom: $unit-2x;
} }
} }

9
src/lib/utils/content.ts
View file

@ -214,9 +214,12 @@ function renderTiptapContent(doc: any): string {
// Helper to escape HTML // Helper to escape HTML
const escapeHtml = (str: string): string => { const escapeHtml = (str: string): string => {
const div = document.createElement('div') return str
div.textContent = str .replace(/&/g, '&amp;')
return div.innerHTML .replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;')
} }
return doc.content.map(renderNode).join('') return doc.content.map(renderNode).join('')

3
src/routes/+layout.svelte
View file

@ -11,8 +11,7 @@
<meta name="description" content="Justin Edmund is a software designer based in San Francisco." /> <meta name="description" content="Justin Edmund is a software designer based in San Francisco." />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, content="width=device-width, initial-scale=1.0, user-scalable=no"
user-scalable=no"
/> />
</svelte:head> </svelte:head>

38
src/routes/photos/[slug]/+page.svelte
View file

@ -48,13 +48,6 @@
</div> </div>
{:else if album} {:else if album}
<div class="album-page"> <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 --> <!-- Album Card -->
<div class="album-card"> <div class="album-card">
<h1 class="album-title">{album.title}</h1> <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 { .album-card {
background: $grey-100; background: $grey-100;
border: 1px solid $grey-90; border: 1px solid $grey-90;
border-radius: $card-corner-radius; border-radius: $card-corner-radius;
padding: $unit-6x; padding: $unit-6x;
margin-bottom: $unit-6x; margin-bottom: $unit-3x;
text-align: center; text-align: center;
@include breakpoint('tablet') {
margin-bottom: $unit-2x;
}
@include breakpoint('phone') { @include breakpoint('phone') {
padding: $unit-4x $unit-3x; padding: $unit-4x $unit-3x;
margin-bottom: $unit-4x;
} }
} }