stevedylan.dev
My personal photography website
steve.phot
portfolio
photography
svelte
sveltekit
chore: added view transitions
+37
-22
+12
src/routes/+layout.svelte
+12
src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
+
import { onNavigate } from "$app/navigation";
2
3
import "./layout.css";
3
4
import favicon from "$lib/assets/favicon.svg";
4
5
5
6
let { children } = $props();
7
+
8
+
onNavigate((navigation) => {
9
+
if (!document.startViewTransition) return;
10
+
11
+
return new Promise((resolve) => {
12
+
document.startViewTransition(async () => {
13
+
resolve();
14
+
await navigation.complete;
15
+
});
16
+
});
17
+
});
6
18
</script>
7
19
8
20
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+25
-22
src/routes/photo/[slug]/+page.svelte
+25
-22
src/routes/photo/[slug]/+page.svelte
···
1
1
<script lang="ts">
2
-
import type { PageData } from "./$types";
3
-
let { data }: { data: PageData } = $props();
2
+
import type { PageData } from "./$types";
3
+
let { data }: { data: PageData } = $props();
4
4
</script>
5
5
6
6
<div class="bg-[#121113] min-h-screen text-white flex flex-col gap-4 pb-4">
7
-
<div class="fixed bg-[#121113] w-full py-4 sm:px-8 px-4">
8
-
<a href="/" class="text-sm hover:underline">steve.photo (go back)</a>
9
-
</div>
7
+
<div class="fixed bg-[#121113] w-full py-4 sm:px-8 px-4">
8
+
<a href="/" class="text-sm hover:underline">steve.photo</a>
9
+
</div>
10
10
11
-
<div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-16">
12
-
<div class="flex-6 min-w-0">
13
-
<img class="max-w-full h-auto block" src={data.photo.image} alt={data.photo.title} />
14
-
</div>
15
-
<div class="flex flex-col gap-1 flex-1 min-w-0 p-4">
16
-
<h2 class="text-lg">{data.photo.title.toUpperCase()}</h2>
17
-
<h3 class="text-sm">{data.photo.make} {data.photo.camera}</h3>
18
-
<div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4">
19
-
<p>{data.photo.focalLength}</p>
20
-
<p>{data.photo.aperture}</p>
21
-
<p>{data.photo.exposure}</p>
22
-
<p>ISO {data.photo.iso}</p>
23
-
<p>-</p>
24
-
<p class="text-neutral-700 text-xs">{new Date(data.photo.date).toLocaleDateString()}</p>
25
-
</div>
26
-
</div>
27
-
</div>
11
+
<div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-16">
12
+
<div class="flex-6 min-w-0">
13
+
<img class="max-w-full h-auto block" src={data.photo.image} alt={data.photo.title} />
14
+
</div>
15
+
<div class="flex flex-col p-4 flex-1 min-w-0 justify-between">
16
+
<div class="flex flex-col gap-1 flex-1 min-w-0">
17
+
<h2 class="text-lg">{data.photo.title.toUpperCase()}</h2>
18
+
<h3 class="text-sm">{data.photo.make} {data.photo.camera}</h3>
19
+
<div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4">
20
+
<p>{data.photo.focalLength}</p>
21
+
<p>{data.photo.aperture}</p>
22
+
<p>{data.photo.exposure}</p>
23
+
<p>ISO {data.photo.iso}</p>
24
+
<p>-</p>
25
+
<p class="text-neutral-700 text-xs">{new Date(data.photo.date).toLocaleDateString()}</p>
26
+
</div>
27
+
</div>
28
+
<a class="text-zinc-400 hover:text-white text-xs sm:pt-0 pt-24" href="/">Back to gallery</a>
29
+
</div>
30
+
</div>
28
31
</div>