👁️
new fonts!
+85
-37
public/fonts/fraunces/Fraunces-Italic-VF.woff2
public/fonts/fraunces/Fraunces-Italic-VF.woff2
This is a binary file and will not be displayed.
public/fonts/fraunces/Fraunces-VF.woff2
public/fonts/fraunces/Fraunces-VF.woff2
This is a binary file and will not be displayed.
public/fonts/recursive/Recursive-VF.woff2
public/fonts/recursive/Recursive-VF.woff2
This is a binary file and will not be displayed.
+1
-1
src/components/DeckPreview.tsx
+1
-1
src/components/DeckPreview.tsx
···
106
106
<div className="h-5 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse" />
107
107
))}
108
108
109
-
<h2 className="text-lg font-bold text-gray-900 dark:text-white truncate">
109
+
<h2 className="text-lg font-bold text-gray-900 dark:text-white truncate font-display">
110
110
{deck.name}
111
111
</h2>
112
112
{deck.format && (
+7
-2
src/components/Header.tsx
+7
-2
src/components/Header.tsx
···
29
29
>
30
30
<Menu size={24} />
31
31
</button>
32
-
<h1 className="ml-2 sm:ml-4 text-lg sm:text-xl font-semibold hidden sm:block">
33
-
<Link to="/">DeckBelcher</Link>
32
+
<h1
33
+
className="ml-2 sm:ml-4 text-lg sm:text-xl font-medium hidden sm:block font-display"
34
+
style={{
35
+
fontVariationSettings: '"WONK" 1, "SOFT" 70, "opsz" 20',
36
+
}}
37
+
>
38
+
<Link to="/">deck belcher</Link>
34
39
</h1>
35
40
</div>
36
41
+1
-1
src/components/ListPreview.tsx
+1
-1
src/components/ListPreview.tsx
···
117
117
<div className="h-5 w-24 bg-gray-200 dark:bg-slate-700 rounded animate-pulse" />
118
118
))}
119
119
120
-
<h2 className="text-lg font-bold text-gray-900 dark:text-white truncate">
120
+
<h2 className="text-lg font-bold text-gray-900 dark:text-white truncate font-display">
121
121
{list.name}
122
122
</h2>
123
123
<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+2
-2
src/components/deck/DeckHeader.tsx
+2
-2
src/components/deck/DeckHeader.tsx
···
49
49
onChange={(e) => setEditedName(e.target.value)}
50
50
onBlur={handleNameSubmit}
51
51
onKeyDown={handleNameKeyDown}
52
-
className="text-4xl font-bold text-gray-900 dark:text-white bg-transparent border-b-2 border-cyan-500 focus:outline-none flex-1"
52
+
className="text-4xl font-bold text-gray-900 dark:text-white bg-transparent border-b-2 border-cyan-500 focus:outline-none flex-1 font-display"
53
53
/>
54
54
) : (
55
55
<h1
56
-
className="text-4xl font-bold text-gray-900 dark:text-white cursor-pointer hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors"
56
+
className="text-4xl font-bold text-gray-900 dark:text-white cursor-pointer hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors font-display"
57
57
onClick={handleNameClick}
58
58
onKeyDown={(e) => {
59
59
if (e.key === "Enter" || e.key === " ") {
+4
-4
src/components/deck/DraggableCard.tsx
+4
-4
src/components/deck/DraggableCard.tsx
···
71
71
{...attributes}
72
72
{...(disabled ? {} : listeners)}
73
73
type="button"
74
-
className="relative rounded px-2 py-1 w-full text-left md:touch-none bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700"
74
+
className="group relative rounded px-2 py-1 w-full text-left md:touch-none bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700"
75
75
style={{
76
76
opacity: isDragging ? 0.5 : 1,
77
77
cursor: disabled ? "pointer" : isDragging ? "grabbing" : "grab",
···
96
96
ref={highlightRef}
97
97
className="absolute inset-0 rounded bg-amber-100 dark:bg-slate-700 opacity-0 pointer-events-none"
98
98
/>
99
-
<div className="flex items-center gap-2">
99
+
<div className="flex items-baseline gap-2">
100
100
<span className="text-gray-600 dark:text-gray-400 font-mono text-xs w-4 text-right flex-shrink-0">
101
101
{card.quantity}
102
102
</span>
103
-
<span className="text-gray-900 dark:text-white text-sm truncate flex-1 min-w-0">
103
+
<span className="text-gray-900 dark:text-white text-sm truncate flex-1 min-w-0 transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'wght'_400] group-hover:[font-variation-settings:'wght'_500]">
104
104
{primaryFace ? primaryFace.name : isLoading ? "" : "Unknown Card"}
105
105
</span>
106
106
{violations && violations.length > 0 && (
···
114
114
/>
115
115
</span>
116
116
)}
117
-
<div className="flex-shrink-0 flex items-center ml-auto">
117
+
<div className="flex-shrink-0 flex items-center ml-auto self-center">
118
118
{primaryFace?.mana_cost ? (
119
119
<ManaCost cost={primaryFace.mana_cost} size="small" />
120
120
) : isLoading ? (
+1
-1
src/components/richtext/RichtextRenderer.tsx
+1
-1
src/components/richtext/RichtextRenderer.tsx
···
221
221
<Link
222
222
to="/card/$id"
223
223
params={{ id: scryfallId }}
224
-
className="inline-flex items-center px-1.5 py-0.5 rounded bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 text-sm font-medium hover:bg-sky-100 dark:hover:bg-sky-900/50"
224
+
className="inline-flex items-center px-1.5 py-0.5 rounded bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 text-sm font-medium hover:bg-sky-100 dark:hover:bg-sky-900/50 transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'CASL'_0,'wght'_500] hover:[font-variation-settings:'CASL'_0.5,'wght'_600]"
225
225
{...hoverProps}
226
226
>
227
227
{children}
+16
-11
src/routes/index.tsx
+16
-11
src/routes/index.tsx
···
12
12
<div className="min-h-[calc(100vh-64px)] bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950">
13
13
<div className="max-w-5xl mx-auto px-6 py-16 md:py-24">
14
14
<div className="text-center mb-16">
15
-
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
16
-
DeckBelcher
15
+
<h1
16
+
className="text-5xl md:text-6xl font-medium text-gray-900 dark:text-white mb-4 tracking-tight font-display"
17
+
style={{
18
+
fontVariationSettings: '"WONK" 1, "SOFT" 70, "opsz" 72',
19
+
}}
20
+
>
21
+
deck belcher dot com
17
22
</h1>
18
23
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
19
-
MTG deck building and sharing powered by AT Protocol
24
+
organize, build, and share decks on the atmosphere
20
25
</p>
21
26
</div>
22
27
···
29
34
<div className="w-12 h-12 bg-cyan-100 dark:bg-cyan-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-800/40 transition-colors">
30
35
<Plus size={24} className="text-cyan-600 dark:text-cyan-400" />
31
36
</div>
32
-
<span className="font-semibold text-gray-900 dark:text-white">
37
+
<span className="font-semibold text-gray-900 dark:text-white transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'wght'_600] group-hover:[font-variation-settings:'wght'_700]">
33
38
Create Deck
34
39
</span>
35
-
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1">
40
+
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'CASL'_0] group-hover:[font-variation-settings:'CASL'_1]">
36
41
Start building
37
42
</span>
38
43
</Link>
···
44
49
<div className="w-12 h-12 bg-cyan-100 dark:bg-cyan-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-800/40 transition-colors">
45
50
<User size={24} className="text-cyan-600 dark:text-cyan-400" />
46
51
</div>
47
-
<span className="font-semibold text-gray-900 dark:text-white">
52
+
<span className="font-semibold text-gray-900 dark:text-white transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'wght'_600] group-hover:[font-variation-settings:'wght'_700]">
48
53
Sign In
49
54
</span>
50
-
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1">
55
+
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'CASL'_0] group-hover:[font-variation-settings:'CASL'_1]">
51
56
Get started
52
57
</span>
53
58
</Link>
···
62
67
<div className="w-12 h-12 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-gray-200 dark:group-hover:bg-slate-600 transition-colors">
63
68
<User size={24} className="text-gray-600 dark:text-gray-300" />
64
69
</div>
65
-
<span className="font-semibold text-gray-900 dark:text-white">
70
+
<span className="font-semibold text-gray-900 dark:text-white transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'wght'_600] group-hover:[font-variation-settings:'wght'_700]">
66
71
My Decks
67
72
</span>
68
-
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1">
73
+
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'CASL'_0] group-hover:[font-variation-settings:'CASL'_1]">
69
74
View your collection
70
75
</span>
71
76
</Link>
···
91
96
<div className="w-12 h-12 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4 group-hover:bg-gray-200 dark:group-hover:bg-slate-600 transition-colors">
92
97
<Search size={24} className="text-gray-600 dark:text-gray-300" />
93
98
</div>
94
-
<span className="font-semibold text-gray-900 dark:text-white">
99
+
<span className="font-semibold text-gray-900 dark:text-white transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'wght'_600] group-hover:[font-variation-settings:'wght'_700]">
95
100
Browse Cards
96
101
</span>
97
-
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1">
102
+
<span className="text-sm text-gray-500 dark:text-gray-400 mt-1 transition-[font-variation-settings] duration-200 ease-out [font-variation-settings:'CASL'_0] group-hover:[font-variation-settings:'CASL'_1]">
98
103
Search the database
99
104
</span>
100
105
</Link>
+1
-1
src/routes/profile/$did/index.tsx
+1
-1
src/routes/profile/$did/index.tsx
···
161
161
<div className="min-h-screen bg-white dark:bg-slate-900">
162
162
<div className="max-w-7xl mx-auto px-6 py-16">
163
163
<div className="mb-8">
164
-
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
164
+
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2 font-display">
165
165
Decklists
166
166
</h1>
167
167
<p className="text-gray-600 dark:text-gray-400">
+2
-2
src/routes/profile/$did/list/$rkey/index.tsx
+2
-2
src/routes/profile/$did/list/$rkey/index.tsx
···
175
175
onChange={(e) => setEditedName(e.target.value)}
176
176
onBlur={handleNameSubmit}
177
177
onKeyDown={handleNameKeyDown}
178
-
className="text-3xl font-bold text-gray-900 dark:text-white bg-transparent border-b-2 border-cyan-500 focus:outline-none w-full"
178
+
className="text-3xl font-bold text-gray-900 dark:text-white bg-transparent border-b-2 border-cyan-500 focus:outline-none w-full font-display"
179
179
/>
180
180
) : (
181
181
<h1
182
-
className={`text-3xl font-bold text-gray-900 dark:text-white truncate ${isOwner ? "cursor-pointer hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors" : ""}`}
182
+
className={`text-3xl font-bold text-gray-900 dark:text-white truncate font-display ${isOwner ? "cursor-pointer hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors" : ""}`}
183
183
onClick={handleNameClick}
184
184
onKeyDown={(e) => {
185
185
if (e.key === "Enter" || e.key === " ") {
+1
-1
src/routes/signin.tsx
+1
-1
src/routes/signin.tsx
···
141
141
<LogIn size={32} className="text-white" />
142
142
</div>
143
143
</div>
144
-
<h1 className="text-3xl font-bold text-gray-900 dark:text-white text-center mb-2">
144
+
<h1 className="text-3xl font-bold text-gray-900 dark:text-white text-center mb-2 font-display">
145
145
Sign In
146
146
</h1>
147
147
<p className="text-gray-600 dark:text-gray-400 text-center mb-8">
+49
-11
src/styles.css
+49
-11
src/styles.css
···
1
1
@import "tailwindcss";
2
2
3
3
/**
4
+
* Recursive - Body/UI/Mono font
5
+
* https://www.recursive.design/
6
+
* Licensed under SIL OFL 1.1
7
+
* Variable axes: MONO (0-1), CASL (0-1), wght (300-1000), slnt (-15-0), CRSV (0-1)
8
+
*/
9
+
@font-face {
10
+
font-family: "Recursive";
11
+
src: url("/fonts/recursive/Recursive-VF.woff2") format("woff2");
12
+
font-weight: 300 1000;
13
+
font-style: oblique -15deg 0deg;
14
+
font-display: swap;
15
+
}
16
+
17
+
/**
18
+
* Fraunces - Display/heading font
19
+
* https://github.com/undercasetype/Fraunces
20
+
* Licensed under SIL OFL 1.1
21
+
* Variable axes: SOFT (0-100), WONK (0-1), opsz (9-144), wght (100-900)
22
+
*/
23
+
@font-face {
24
+
font-family: "Fraunces";
25
+
src: url("/fonts/fraunces/Fraunces-VF.woff2") format("woff2");
26
+
font-weight: 100 900;
27
+
font-style: normal;
28
+
font-display: swap;
29
+
}
30
+
31
+
@font-face {
32
+
font-family: "Fraunces";
33
+
src: url("/fonts/fraunces/Fraunces-Italic-VF.woff2") format("woff2");
34
+
font-weight: 100 900;
35
+
font-style: italic;
36
+
font-display: swap;
37
+
}
38
+
39
+
/**
4
40
* Keyrune set symbol font
5
41
* https://github.com/andrewgioia/keyrune
6
-
* Font licensed under SIL OFL 1.1
42
+
* Licensed under SIL OFL 1.1
7
43
*/
8
44
@font-face {
9
45
font-family: "Keyrune";
···
14
50
}
15
51
16
52
@theme {
53
+
--font-sans: "Recursive", ui-sans-serif, system-ui, sans-serif;
54
+
--font-display: "Fraunces", ui-serif, Georgia, serif;
55
+
--font-mono: "Recursive", ui-monospace, monospace;
56
+
17
57
/* MTG rarity colors (from Keyrune) */
18
58
--color-rarity-common: #1a1718;
19
59
--color-rarity-uncommon: #707883;
···
25
65
@custom-variant dark (&:where(.dark, .dark *));
26
66
27
67
html {
28
-
@apply bg-white dark:bg-slate-900;
68
+
@apply bg-white dark:bg-slate-900;
29
69
}
30
70
31
71
body {
32
-
@apply m-0 bg-white dark:bg-slate-900;
33
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
34
-
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
35
-
sans-serif;
36
-
-webkit-font-smoothing: antialiased;
37
-
-moz-osx-font-smoothing: grayscale;
72
+
@apply m-0 bg-white dark:bg-slate-900 font-sans;
73
+
-webkit-font-smoothing: antialiased;
74
+
-moz-osx-font-smoothing: grayscale;
38
75
}
39
76
40
-
code {
41
-
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
42
-
monospace;
77
+
code,
78
+
.font-mono {
79
+
font-family: var(--font-mono);
80
+
font-variation-settings: "MONO" 1, "CASL" 0;
43
81
}
44
82
45
83
/* Dark mode scrollbar styling */