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 Figtree + Gabarito typography via Bunny Fonts

Replace the system font stack with intentional type choices that match
the "simple, soft, fun" brand: Figtree for body/UI text and Gabarito
for headings and brand elements. Clean up arbitrary font sizes and
strengthen the typographic hierarchy.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+15 -10
+2 -2
config/shield.ts
··· 7 7 directives: { 8 8 defaultSrc: [`'self'`], 9 9 scriptSrc: [`'self'`, '@nonce'], 10 - styleSrc: [`'self'`, `'unsafe-inline'`, 'https://cdn.jsdelivr.net'], 10 + styleSrc: [`'self'`, `'unsafe-inline'`, 'https://cdn.jsdelivr.net', 'https://fonts.bunny.net'], 11 11 imgSrc: [`'self'`, 'data:', 'https://cdn.bsky.app', 'https://video.bsky.app'], 12 12 connectSrc: app.inDev ? [`'self'`, '@viteUrl', 'ws://localhost:*'] : [`'self'`], 13 - fontSrc: [`'self'`, 'https://cdn.jsdelivr.net'], 13 + fontSrc: [`'self'`, 'https://cdn.jsdelivr.net', 'https://fonts.bunny.net'], 14 14 objectSrc: [`'none'`], 15 15 baseUri: [`'self'`], 16 16 formAction: [`'self'`],
+3
resources/css/app.css
··· 4 4 @custom-variant dark (&:where(.dark, .dark *)); 5 5 6 6 @theme { 7 + --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif; 8 + --font-heading: 'Gabarito', ui-sans-serif, system-ui, -apple-system, sans-serif; 9 + 7 10 /* ── Warm grays — noticeably tinted toward Bluesky blue ── */ 8 11 --color-gray-50: oklch(98% 0.014 255); 9 12 --color-gray-100: oklch(96% 0.016 255);
+5 -3
resources/views/components/layout.edge
··· 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 + <link rel="preconnect" href="https://fonts.bunny.net" /> 7 + <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700|gabarito:400,500,600,700&display=swap" rel="stylesheet" /> 6 8 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏆</text></svg>" /> 7 9 <script nonce="{{ cspNonce }}"> 8 10 (function(){var m=document.cookie.match(/(?:^|;\s*)theme=(dark|light)/);if(m){if(m[1]==='dark')document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark');return}var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var v=d?'dark':'light';document.cookie='theme='+v+';path=/;max-age=31536000;SameSite=Lax';if(d)document.documentElement.classList.add('dark')})() ··· 24 26 <link rel="canonical" href="{{ canonicalUrl }}" /> 25 27 @endif 26 28 </head> 27 - <body class="font-sans text-base leading-normal text-gray-900 bg-gray-50 dark:text-gray-100 dark:bg-gray-950"> 29 + <body class="font-sans text-base leading-relaxed text-gray-900 bg-gray-50 dark:text-gray-100 dark:bg-gray-950"> 28 30 <div class="max-w-[680px] mx-auto px-4"> 29 31 @if(!$props.has('hideHeader')) 30 32 <div class="flex items-center justify-between pt-6 pb-4"> 31 33 <a href="/" class="flex items-center gap-1.5 text-gray-900 dark:text-gray-100 no-underline hover:opacity-70"> 32 34 <i class="ph-fill ph-heart text-red-500 text-lg"></i> 33 - <span class="font-semibold text-sm">favs.blue</span> 35 + <span class="font-heading font-bold text-sm tracking-tight">favs.blue</span> 34 36 </a> 35 37 <div class="flex items-center gap-2"> 36 38 <form action="/search" method="GET"> ··· 50 52 </div> 51 53 @endif 52 54 {{{ await $slots.main() }}} 53 - <footer class="mt-12 py-6 border-t border-gray-200 dark:border-gray-800 text-[13px] text-gray-500 dark:text-gray-400 text-center"> 55 + <footer class="mt-12 py-6 border-t border-gray-200 dark:border-gray-800 text-xs text-gray-500 dark:text-gray-400 text-center"> 54 56 <a href="/" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:underline">favs.blue</a> &middot; 55 57 <a href="/about" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 hover:underline">about</a> 56 58 </footer>
+1 -1
resources/views/pages/about.edge
··· 5 5 6 6 @slot('main') 7 7 <div class="py-12 space-y-4"> 8 - <h1 class="text-3xl font-bold mb-6">About favs.blue</h1> 8 + <h1 class="font-heading text-3xl font-bold mb-6 tracking-tight">About favs.blue</h1> 9 9 <p> 10 10 favs.blue is a <a href="https://favstar.fm" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 hover:underline">favstar.fm</a>-style 11 11 site for <a href="https://bsky.app" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 hover:underline">Bluesky</a>.
+3 -3
resources/views/pages/landing.edge
··· 2 2 @slot('main') 3 3 <div class="pt-16 pb-12"> 4 4 <div class="flex items-center justify-between mb-2"> 5 - <h1 class="text-3xl font-bold flex items-center gap-2"> 5 + <h1 class="font-heading text-4xl font-bold flex items-center gap-2 tracking-tight"> 6 6 <i class="ph-fill ph-heart text-red-500"></i> 7 7 favs.blue 8 8 </h1> ··· 16 16 <i x-show="dark" class="ph-fill ph-sun text-base"></i> 17 17 </button> 18 18 </div> 19 - <p class="text-lg text-gray-600 dark:text-gray-400 mb-10"> 19 + <p class="font-heading text-lg text-gray-600 dark:text-gray-400 mb-10"> 20 20 See any Bluesky account's most popular posts. 21 21 </p> 22 22 ··· 26 26 </form> 27 27 28 28 @if(error) 29 - <p class="text-red-700 dark:text-red-400 mb-4 text-[0.95rem]">{{ error }}</p> 29 + <p class="text-red-700 dark:text-red-400 mb-4 text-sm font-medium">{{ error }}</p> 30 30 @endif 31 31 32 32 <p class="text-sm text-gray-400 dark:text-gray-500 mb-8">
+1 -1
resources/views/pages/profile/show.edge
··· 14 14 @endif 15 15 <div> 16 16 @if(displayName) 17 - <div class="text-lg font-semibold group-hover:underline">{{ displayName }}</div> 17 + <div class="font-heading text-xl font-bold group-hover:underline leading-tight">{{ displayName }}</div> 18 18 @endif 19 19 <div class="text-gray-600 dark:text-gray-400 group-hover:underline">{{ '@' + handle }}</div> 20 20 </div>