aparker.io
an atproto based link aggregator
Change accent color to violet (butterfly-inspired)
The name "papili" references Papilioninae butterflies, so use a
violet/purple color scheme that evokes butterfly wings.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+17
-17
+11
-11
src/routes/+layout.svelte
+11
-11
src/routes/+layout.svelte
···
11
11
</svelte:head>
12
12
13
13
<div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100">
14
-
<header class="bg-amber-600 dark:bg-amber-700">
14
+
<header class="bg-violet-600 dark:bg-violet-700">
15
15
<nav class="mx-auto flex max-w-4xl items-center gap-4 px-4 py-2 text-sm">
16
16
<a href="/" class="font-bold text-white">papili</a>
17
-
<a href="/new" class="text-amber-100 hover:text-white">new</a>
17
+
<a href="/new" class="text-violet-200 hover:text-white">new</a>
18
18
<div class="flex-1"></div>
19
19
{#if data.user}
20
-
<a href="/submit" class="text-amber-100 hover:text-white">submit</a>
21
-
<span class="text-amber-200">|</span>
22
-
<a href="/profile/{data.user.did}" class="text-amber-100 hover:text-white">{data.user.handle}</a>
23
-
<span class="text-amber-200">|</span>
24
-
<a href="/logout" class="text-amber-100 hover:text-white">logout</a>
20
+
<a href="/submit" class="text-violet-200 hover:text-white">submit</a>
21
+
<span class="text-violet-300">|</span>
22
+
<a href="/profile/{data.user.did}" class="text-violet-200 hover:text-white">{data.user.handle}</a>
23
+
<span class="text-violet-300">|</span>
24
+
<a href="/logout" class="text-violet-200 hover:text-white">logout</a>
25
25
{:else if data.did}
26
-
<span class="text-amber-200">{data.did.slice(0, 16)}...</span>
27
-
<span class="text-amber-200">|</span>
28
-
<a href="/logout" class="text-amber-100 hover:text-white">logout</a>
26
+
<span class="text-violet-300">{data.did.slice(0, 16)}...</span>
27
+
<span class="text-violet-300">|</span>
28
+
<a href="/logout" class="text-violet-200 hover:text-white">logout</a>
29
29
{:else}
30
-
<a href="/login" class="text-amber-100 hover:text-white">login</a>
30
+
<a href="/login" class="text-violet-200 hover:text-white">login</a>
31
31
{/if}
32
32
<ThemeToggle />
33
33
</nav>
+1
-1
src/routes/+page.svelte
+1
-1
src/routes/+page.svelte
···
34
34
<div class="py-12 text-center text-gray-500 dark:text-gray-400">
35
35
<p>No posts yet.</p>
36
36
<p class="mt-2">
37
-
Be the first to <a href="/submit" class="text-amber-600 hover:underline dark:text-amber-400">submit a link</a>.
37
+
Be the first to <a href="/submit" class="text-violet-600 hover:underline dark:text-violet-400">submit a link</a>.
38
38
</p>
39
39
</div>
40
40
{:else}
+2
-2
src/routes/login/+page.svelte
+2
-2
src/routes/login/+page.svelte
···
50
50
placeholder="you.bsky.social"
51
51
required
52
52
disabled={loading}
53
-
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent disabled:opacity-50"
53
+
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent disabled:opacity-50"
54
54
/>
55
55
</div>
56
56
57
57
<button
58
58
type="submit"
59
59
disabled={loading || !handle}
60
-
class="w-full px-4 py-2 text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 rounded disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
60
+
class="w-full px-4 py-2 text-sm font-medium text-white bg-violet-600 hover:bg-violet-700 rounded disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
61
61
>
62
62
{loading ? 'Signing in...' : 'Sign in'}
63
63
</button>
+3
-3
src/routes/submit/+page.svelte
+3
-3
src/routes/submit/+page.svelte
···
40
40
required
41
41
value={form?.url ?? ''}
42
42
placeholder="https://"
43
-
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
43
+
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
44
44
/>
45
45
</div>
46
46
···
56
56
maxlength="300"
57
57
value={form?.title ?? ''}
58
58
placeholder="Title of the link"
59
-
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
59
+
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
60
60
/>
61
61
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Max 300 characters</p>
62
62
</div>
···
65
65
<button
66
66
type="submit"
67
67
disabled={submitting}
68
-
class="px-4 py-2 text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 rounded disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
68
+
class="px-4 py-2 text-sm font-medium text-white bg-violet-600 hover:bg-violet-700 rounded disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
69
69
>
70
70
{#if submitting}
71
71
Submitting...