See the best posts from any Bluesky account
Add custom OKLCH color palette with warm grays, Bluesky blue, and gold accents
Replace default Tailwind colors with brand-tuned OKLCH scales: warm blue-tinted
grays for ecosystem cohesion, Bluesky-matched blues, warmer reds, and a gold/amber
highlight for the top liked post. Add blue focus rings on inputs, hover states on
toggle pills, and a blue-tinted progress bar track.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+63
-12
+51
resources/css/app.css
+51
resources/css/app.css
···
2
2
@source '../views';
3
3
4
4
@theme {
5
+
/* ── Warm grays — noticeably tinted toward Bluesky blue ── */
6
+
--color-gray-50: oklch(98% 0.014 255);
7
+
--color-gray-100: oklch(96% 0.016 255);
8
+
--color-gray-200: oklch(92% 0.02 255);
9
+
--color-gray-300: oklch(87% 0.024 255);
10
+
--color-gray-400: oklch(70% 0.03 255);
11
+
--color-gray-500: oklch(55% 0.03 255);
12
+
--color-gray-600: oklch(45% 0.028 255);
13
+
--color-gray-700: oklch(37% 0.025 255);
14
+
--color-gray-800: oklch(28% 0.022 255);
15
+
--color-gray-900: oklch(21% 0.02 255);
16
+
--color-gray-950: oklch(14% 0.016 255);
17
+
18
+
/* ── Bluesky blue — tuned to the Bluesky brand ── */
19
+
--color-blue-50: oklch(96.5% 0.025 250);
20
+
--color-blue-100: oklch(93% 0.05 250);
21
+
--color-blue-200: oklch(88% 0.08 252);
22
+
--color-blue-300: oklch(78% 0.13 254);
23
+
--color-blue-400: oklch(70% 0.17 256);
24
+
--color-blue-500: oklch(63% 0.19 258);
25
+
--color-blue-600: oklch(56% 0.21 260);
26
+
--color-blue-700: oklch(49% 0.20 262);
27
+
--color-blue-800: oklch(42% 0.16 262);
28
+
--color-blue-900: oklch(35% 0.12 262);
29
+
--color-blue-950: oklch(27% 0.09 262);
30
+
31
+
/* ── Heart red — warmer, rosier for likes and engagement ── */
32
+
--color-red-50: oklch(96.5% 0.02 15);
33
+
--color-red-100: oklch(93% 0.04 15);
34
+
--color-red-200: oklch(88% 0.07 18);
35
+
--color-red-300: oklch(78% 0.13 20);
36
+
--color-red-400: oklch(70% 0.18 22);
37
+
--color-red-500: oklch(64% 0.22 22);
38
+
--color-red-600: oklch(57% 0.22 24);
39
+
--color-red-700: oklch(50% 0.19 25);
40
+
--color-red-800: oklch(43% 0.15 25);
41
+
--color-red-900: oklch(36% 0.12 25);
42
+
--color-red-950: oklch(27% 0.09 25);
43
+
44
+
/* ── Gold — celebratory highlight for top liked post ── */
45
+
--color-amber-50: oklch(97% 0.03 85);
46
+
--color-amber-100: oklch(94% 0.06 85);
47
+
--color-amber-200: oklch(89% 0.1 80);
48
+
49
+
/* ── Success green ── */
50
+
--color-green-600: oklch(62% 0.18 150);
51
+
52
+
/* ── Tinted neutral (embed borders) ── */
53
+
--color-neutral-200: oklch(92% 0.015 255);
54
+
55
+
/* ── Animation ── */
5
56
--animate-scale-up: scale-up 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
6
57
}
7
58
+4
-4
resources/views/components/layout.edge
+4
-4
resources/views/components/layout.edge
···
33
33
type="text"
34
34
name="q"
35
35
placeholder="@handle"
36
-
class="w-44 px-2.5 py-1.5 text-sm border border-gray-300 rounded-md outline-none focus:border-blue-500"
36
+
class="w-44 px-2.5 py-1.5 text-sm border border-gray-300 rounded-md outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
37
37
/>
38
38
<button
39
39
type="submit"
···
43
43
</div>
44
44
@endif
45
45
{{{ await $slots.main() }}}
46
-
<footer class="mt-12 py-6 border-t border-gray-200 text-[13px] text-gray-400 text-center">
47
-
<a href="/" class="text-blue-600 hover:underline">skystar.social</a> ·
48
-
<a href="/about" class="text-blue-600 hover:underline">about</a>
46
+
<footer class="mt-12 py-6 border-t border-gray-200 text-[13px] text-gray-500 text-center">
47
+
<a href="/" class="text-blue-600 hover:text-blue-700 hover:underline">skystar.social</a> ·
48
+
<a href="/about" class="text-blue-600 hover:text-blue-700 hover:underline">about</a>
49
49
</footer>
50
50
</div>
51
51
</body>
+2
-2
resources/views/pages/landing.edge
+2
-2
resources/views/pages/landing.edge
···
1
1
@component('components/layout', { hideHeader: true })
2
2
@slot('main')
3
3
<div class="pt-16 pb-12">
4
-
<h1 class="text-3xl font-bold mb-2">skystar ✦</h1>
4
+
<h1 class="text-3xl font-bold mb-2">skystar <span class="text-blue-500">✦</span></h1>
5
5
<p class="text-lg text-gray-600 mb-10">
6
6
See any Bluesky account's most-liked and most-reposted posts.
7
7
</p>
···
12
12
name="q"
13
13
placeholder="@handle or handle.bsky.social"
14
14
autofocus
15
-
class="flex-1 px-3.5 py-2.5 text-base border border-gray-300 rounded-md outline-none focus:border-blue-500"
15
+
class="flex-1 px-3.5 py-2.5 text-base border border-gray-300 rounded-md outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
16
16
/>
17
17
<button
18
18
type="submit"
+1
-1
resources/views/pages/profile/loading.edge
+1
-1
resources/views/pages/profile/loading.edge
···
28
28
aria-valuemin="0"
29
29
aria-valuemax="{{ totalPosts }}"
30
30
aria-labelledby="backfill-title"
31
-
class="w-80 max-w-[80%] h-3.5 mx-auto rounded-full bg-gray-200 overflow-hidden"
31
+
class="w-80 max-w-[80%] h-3.5 mx-auto rounded-full bg-blue-100 overflow-hidden"
32
32
>
33
33
<div
34
34
class="h-full rounded-full bg-blue-600 transition-[width] duration-500 ease-out"
+5
-5
resources/views/pages/profile/show.edge
+5
-5
resources/views/pages/profile/show.edge
···
22
22
<div class="flex gap-1">
23
23
<a
24
24
href="/profile/{{ handle }}/likes{{ daysWindow ? '?days=' + daysWindow : '' }}"
25
-
class="px-3.5 py-1.5 rounded-full text-sm {{ kind === 'likes' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }}"
25
+
class="px-3.5 py-1.5 rounded-full text-sm {{ kind === 'likes' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600 hover:bg-gray-300' }}"
26
26
>Most liked</a>
27
27
<a
28
28
href="/profile/{{ handle }}/reposts{{ daysWindow ? '?days=' + daysWindow : '' }}"
29
-
class="px-3.5 py-1.5 rounded-full text-sm {{ kind === 'reposts' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }}"
29
+
class="px-3.5 py-1.5 rounded-full text-sm {{ kind === 'reposts' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600 hover:bg-gray-300' }}"
30
30
>Most reposted</a>
31
31
</div>
32
32
···
34
34
<div class="flex gap-1">
35
35
<a
36
36
href="/profile/{{ handle }}/{{ kind }}"
37
-
class="px-3.5 py-1.5 rounded-full text-sm {{ !daysWindow ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }}"
37
+
class="px-3.5 py-1.5 rounded-full text-sm {{ !daysWindow ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600 hover:bg-gray-300' }}"
38
38
>All time</a>
39
39
<a
40
40
href="/profile/{{ handle }}/{{ kind }}?days=30"
41
-
class="px-3.5 py-1.5 rounded-full text-sm {{ daysWindow === 30 ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }}"
41
+
class="px-3.5 py-1.5 rounded-full text-sm {{ daysWindow === 30 ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600 hover:bg-gray-300' }}"
42
42
>Last month</a>
43
43
</div>
44
44
</div>
···
57
57
@else
58
58
<ol class="list-none p-0 m-0">
59
59
@each((post, index) in posts)
60
-
<li class="{{ index === 0 ? (kind === 'likes' ? 'bg-red-50/40 border-red-100' : 'bg-blue-50/40 border-blue-100') : 'bg-white border-neutral-200' }} border rounded-lg p-4 mb-3">
60
+
<li class="{{ index === 0 ? (kind === 'likes' ? 'bg-amber-50 border-amber-200' : 'bg-blue-50 border-blue-200') : 'bg-white border-gray-200' }} border rounded-lg p-4 mb-3">
61
61
<div class="flex items-start gap-3">
62
62
<div class="text-sm font-semibold text-gray-400 pt-0.5 shrink-0 tabular-nums min-w-4 text-right">{{ index + 1 }}</div>
63
63
<div class="flex-1 min-w-0">