an atproto based link aggregator
Add stylized 'p' logo
Monospace 'p' in a rounded square with violet gradient.
Clean, modern look distinct from other AT Protocol apps.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+64
-1
+62
src/lib/components/Logo.svelte
+62
src/lib/components/Logo.svelte
···
1
+
<script lang="ts">
2
+
interface Props {
3
+
size?: 'sm' | 'md';
4
+
}
5
+
6
+
let { size = 'md' }: Props = $props();
7
+
</script>
8
+
9
+
<a href="/" class="logo {size}" aria-label="papili home">
10
+
<span class="mark" aria-hidden="true">p</span>
11
+
<span class="text">papili</span>
12
+
</a>
13
+
14
+
<style>
15
+
.logo {
16
+
display: inline-flex;
17
+
align-items: center;
18
+
gap: 0.5rem;
19
+
text-decoration: none;
20
+
color: white;
21
+
}
22
+
23
+
.logo.sm {
24
+
gap: 0.375rem;
25
+
}
26
+
27
+
.mark {
28
+
display: inline-flex;
29
+
align-items: center;
30
+
justify-content: center;
31
+
width: 1.5rem;
32
+
height: 1.5rem;
33
+
background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%);
34
+
border-radius: 0.375rem;
35
+
font-weight: 800;
36
+
font-size: 1rem;
37
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
38
+
color: #1e1b4b;
39
+
line-height: 1;
40
+
}
41
+
42
+
.logo.sm .mark {
43
+
width: 1.25rem;
44
+
height: 1.25rem;
45
+
font-size: 0.875rem;
46
+
border-radius: 0.25rem;
47
+
}
48
+
49
+
.text {
50
+
font-weight: 700;
51
+
font-size: 1rem;
52
+
letter-spacing: -0.025em;
53
+
}
54
+
55
+
.logo.sm .text {
56
+
font-size: 0.875rem;
57
+
}
58
+
59
+
.logo:hover .mark {
60
+
background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 50%, #8b5cf6 100%);
61
+
}
62
+
</style>
+2
-1
src/routes/+layout.svelte
+2
-1
src/routes/+layout.svelte
···
2
2
import '../app.css';
3
3
import favicon from '$lib/assets/favicon.svg';
4
4
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
5
+
import Logo from '$lib/components/Logo.svelte';
5
6
6
7
let { children, data } = $props();
7
8
</script>
···
13
14
<div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100">
14
15
<header class="bg-violet-600 dark:bg-violet-700">
15
16
<nav class="mx-auto flex max-w-4xl items-center gap-4 px-4 py-2 text-sm">
16
-
<a href="/" class="font-bold text-white">papili</a>
17
+
<Logo />
17
18
<a href="/new" class="text-violet-200 hover:text-white">new</a>
18
19
<div class="flex-1"></div>
19
20
{#if data.user}