Your calm window into the Atmosphere. morgen.blue
rss atproto
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: implement core app layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

+71 -4
+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
··· 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
··· 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>
+4
src/routes/layout.css
··· 2 2 @plugin '@tailwindcss/forms'; 3 3 @plugin '@tailwindcss/typography'; 4 4 5 + body { 6 + background-color: var(--color-bg-page); 7 + } 8 + 5 9 @theme { 6 10 --color-bg-page: oklch(13% 0.028 261.692); 7 11 --color-bg-front-1: oklch(98.5% 0.002 247.839);