goose.art
a calm atproto client
idk i'm just a little guy
+14
src/components/AccountDetails.svelte
+14
src/components/AccountDetails.svelte
+19
src/components/Porthole.svelte
+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
+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
src/components/lexicons/BskyPost.svelte
This is a binary file and will not be displayed.
+3
-1
src/routes/+layout.svelte
+3
-1
src/routes/+layout.svelte
+28
-2
src/routes/+page.svelte
+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
+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
+
}