a calm atproto client

idk i'm just a little guy

goose.art 88fb585b 163d4d79

verified
+103 -3
+14
src/components/AccountDetails.svelte
··· 1 + <script> 2 + let { user } = $props(); 3 + </script> 4 + 5 + <div id="account-details"> 6 + <hr /> 7 + <p>Logged in as {user.name}</p> 8 + </div> 9 + 10 + <style> 11 + #account-details { 12 + margin-top: 2rem; 13 + } 14 + </style>
+19
src/components/Porthole.svelte
··· 1 + <script lang="ts"> 2 + let { lexicon, children } = $props(); 3 + </script> 4 + 5 + <div class="porthole col-span-2"> 6 + <h1 class="text-lg font-bold">{lexicon}</h1> 7 + {@render children()} 8 + </div> 9 + 10 + <style> 11 + .porthole { 12 + border: 0.5rem solid var(--sunrise-orange); 13 + max-width: 60vw; 14 + padding: 1rem; 15 + border-radius: 40px; 16 + corner-shape: superellipse(1.5); 17 + box-shadow: 0 0 1rem 0rem var(--sunrise-purple); 18 + } 19 + </style>
+17
src/components/Sidebar.svelte
··· 1 + <script> 2 + let { children } = $props(); 3 + </script> 4 + 5 + <div class="sidebar"> 6 + {@render children()} 7 + </div> 8 + 9 + <style> 10 + .sidebar { 11 + padding: 1rem; 12 + background-color: var(--sunrise-pink); 13 + color: var(--sunrise-navy); 14 + mask: radial-gradient(30px at right, #0000 97%, #000) 0px / 100% 55.5px; 15 + font-size: 1.2rem; 16 + } 17 + </style>
src/components/lexicons/BskyPost.svelte

This is a binary file and will not be displayed.

+3 -1
src/routes/+layout.svelte
··· 6 6 </script> 7 7 8 8 <svelte:head><link rel="icon" href={favicon} /></svelte:head> 9 - {@render children()} 9 + <div> 10 + {@render children()} 11 + </div>
+28 -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 + <script> 2 + import AccountDetails from '../components/AccountDetails.svelte'; 3 + import Porthole from '../components/Porthole.svelte'; 4 + import Sidebar from '../components/Sidebar.svelte'; 5 + </script> 6 + 7 + <header class="m-3"> 8 + <h1 class="text-3xl font-bold">sunrise to suns@</h1> 9 + <p>a simple atproto client</p> 10 + </header> 11 + 12 + <div class="mainarea"> 13 + <div class="grid grid-cols-1 gap-4 md:grid-cols-3"> 14 + <Sidebar 15 + ><ul> 16 + <li>home</li> 17 + <li>about</li> 18 + <li>tangled</li> 19 + </ul> 20 + <AccountDetails 21 + user={{ name: 'goose.art', email: 'goose.art@example.com', joined: '2022-01-01' }} 22 + /> 23 + </Sidebar> 24 + <Porthole lexicon="Bluesky"> 25 + <h2 class="align-center">I am in the hole</h2> 26 + </Porthole> 27 + </div> 28 + </div>
+22
src/routes/layout.css
··· 1 1 @import 'tailwindcss'; 2 + 3 + :root { 4 + --sunrise-white: #cbd6dc; 5 + --sunrise-blue: #9ebfe0; 6 + --sunrise-orange: #d1bbb0; 7 + --sunrise-pink: #c19e9a; 8 + --sunrise-purple: #817d8c; 9 + --sunrise-navy: #425b79; 10 + --sunrise-gray: #6c8098; 11 + color-scheme: dark; 12 + } 13 + 14 + body { 15 + background-color: light-dark(var(--sunrise-blue), var(--sunrise-navy)); 16 + color: light-dark(var(--sunrise-navy), var(--sunrise-white)); 17 + } 18 + 19 + .porthole { 20 + background: var(--sunrise-white); 21 + border: 1px solid var(--sunrise-orange); 22 + color: light-dark(var(--sunrise-blue), var(--sunrise-navy)); 23 + }