Your calm window into the Atmosphere.
morgen.blue
rss
atproto
feat: implement core app layout
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+71
-4
+17
src/lib/components/HeaderBar.svelte
+17
src/lib/components/HeaderBar.svelte
···
1
+
<nav class="fixed top-0 inset-x-0 h-14 z-30 bg-bg-page flex items-center justify-between px-4">
2
+
<div class="flex items-center gap-6">
3
+
<span class="text-text-tertiary text-sm font-medium">Discover</span>
4
+
<span class="text-text-tertiary text-sm font-medium">Consume</span>
5
+
<span class="text-text-tertiary text-sm font-medium">Create</span>
6
+
</div>
7
+
8
+
<div class="flex items-center gap-4">
9
+
<span class="text-text-tertiary text-sm">12:00</span>
10
+
<span class="text-text-tertiary text-sm">Messages</span>
11
+
</div>
12
+
13
+
<div class="flex items-center gap-4">
14
+
<div class="w-6 h-6 rounded-full bg-text-tertiary/20"></div>
15
+
<div class="w-6 h-6 rounded-full bg-text-tertiary/20"></div>
16
+
</div>
17
+
</nav>
+18
-2
src/routes/+layout.svelte
+18
-2
src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
+
import favicon from '$lib/assets/favicon.svg';
3
+
import HeaderBar from '$lib/components/HeaderBar.svelte';
2
4
import './layout.css';
3
-
import favicon from '$lib/assets/favicon.svg';
4
5
5
6
let { children } = $props();
6
7
</script>
7
8
8
9
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
9
-
{@render children()}
10
+
11
+
<div>
12
+
<!-- Fixed card background (just the visual shape) -->
13
+
<div class="fixed top-14 right-2 bottom-2 left-2 -z-10 rounded-2xl bg-bg-front-1"></div>
14
+
15
+
<!-- Fixed nav bar -->
16
+
<HeaderBar />
17
+
18
+
<!-- Fixed bottom mask (covers area below card) -->
19
+
<div class="fixed inset-x-0 bottom-0 z-10 h-2 bg-bg-page"></div>
20
+
21
+
<!-- Scrollable content wrapper (normal document flow) -->
22
+
<main class="px-8 pt-32 pb-4">
23
+
{@render children()}
24
+
</main>
25
+
</div>
+32
-2
src/routes/+page.svelte
+32
-2
src/routes/+page.svelte
···
1
-
<h1>Welcome to SvelteKit</h1>
2
-
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
1
+
<!-- Fixed sub-header (calendar + filters) -->
2
+
<div class="fixed top-14 left-2 right-2 z-20 rounded-t-2xl bg-bg-front-1 px-6 py-4">
3
+
<div class="flex items-center justify-between">
4
+
<div class="flex items-center gap-4">
5
+
<span class="text-text-secondary text-sm">Mon 3</span>
6
+
<span class="text-text-secondary text-sm">Tue 4</span>
7
+
<span class="text-text-primary text-sm font-semibold">Wed 5</span>
8
+
<span class="text-text-secondary text-sm">Thu 6</span>
9
+
<span class="text-text-secondary text-sm">Fri 7</span>
10
+
</div>
11
+
<div class="flex items-center gap-2">
12
+
<button class="px-3 py-1 text-xs rounded-full bg-bg-front-2 text-text-primary border border-border-1">All</button>
13
+
<button class="px-3 py-1 text-xs rounded-full text-text-secondary border border-border-1">Events</button>
14
+
<button class="px-3 py-1 text-xs rounded-full text-text-secondary border border-border-1">Tasks</button>
15
+
</div>
16
+
</div>
17
+
</div>
18
+
19
+
<!-- Content (normal flow, scrolls with page) -->
20
+
<div class="flex flex-col gap-3">
21
+
{#each Array(20) as _, i}
22
+
<div class="rounded-xl bg-bg-front-2 border border-border-1 p-4">
23
+
<div class="flex items-center justify-between">
24
+
<div>
25
+
<p class="text-text-primary text-sm font-medium">Placeholder item {i + 1}</p>
26
+
<p class="text-text-secondary text-xs mt-1">Some description text here</p>
27
+
</div>
28
+
<span class="text-text-secondary text-xs">9:00 AM</span>
29
+
</div>
30
+
</div>
31
+
{/each}
32
+
</div>