See the best posts from any Bluesky account
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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> &middot; 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> &middot; 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
··· 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
··· 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
··· 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">