See the best posts from any Bluesky account
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
+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
+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
+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> ·
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
+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
+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
+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>