Skip to content

Commit eaf0323

Browse files
WarningImHack3rWarningImHack3r
committed
style!: use custom font & tweak theme
1 parent a7dcdb8 commit eaf0323

File tree

7 files changed

+159
-25
lines changed

7 files changed

+159
-25
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
},
1616
"devDependencies": {
1717
"@eslint/js": "^9.22.0",
18+
"@fontsource/dm-serif-display": "^5.2.5",
19+
"@fontsource/pretendard": "^5.2.5",
1820
"@lucide/svelte": "^0.483.0",
1921
"@neoconfetti/svelte": "^2.2.2",
2022
"@octokit/graphql-schema": "^15.26.0",

‎pnpm-lock.yaml‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.css‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import "tailwindcss" theme(static);
2+
23
@plugin "@tailwindcss/typography";
34
@import "tw-animate-css";
5+
@import "./fonts.css";
46

57
@variant dark (&:is(.dark *));
68

@@ -41,16 +43,15 @@
4143
--color-ring: hsl(var(--ring));
4244

4345
/*
44-
--color-sidebar: hsl(var(--sidebar-background));
45-
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
46-
--color-sidebar-primary: hsl(var(--sidebar-primary));
47-
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
48-
--color-sidebar-accent: hsl(var(--sidebar-accent));
49-
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
50-
--color-sidebar-border: hsl(var(--sidebar-border));
51-
--color-sidebar-ring: hsl(var(--sidebar-ring));
52-
*/
53-
46+
--color-sidebar: hsl(var(--sidebar-background));
47+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
48+
--color-sidebar-primary: hsl(var(--sidebar-primary));
49+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
50+
--color-sidebar-accent: hsl(var(--sidebar-accent));
51+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
52+
--color-sidebar-border: hsl(var(--sidebar-border));
53+
--color-sidebar-ring: hsl(var(--sidebar-ring));
54+
*/
5455
--radius-xl: calc(var(--radius) + 4px);
5556
--radius-lg: var(--radius);
5657
--radius-md: calc(var(--radius) - 2px);
@@ -68,11 +69,11 @@
6869
/* shadcn theme */
6970
@layer base {
7071
:root {
71-
--background: 0 0% 100%;
72+
--background: 17.14 100% 98.63%;
7273
--foreground: 20 14.3% 4.1%;
73-
--card: 0 0% 100%;
74+
--card: 17.14 100% 98.68%;
7475
--card-foreground: 20 14.3% 4.1%;
75-
--popover: 0 0% 100%;
76+
--popover: 17.14 100% 98.63%;
7677
--popover-foreground: 20 14.3% 4.1%;
7778
--primary: 24.6 95% 53.1%;
7879
--primary-foreground: 60 9.1% 97.8%;
@@ -82,19 +83,20 @@
8283
--muted-foreground: 25 5.3% 44.7%;
8384
--accent: 60 4.8% 95.9%;
8485
--accent-foreground: 24 9.8% 10%;
85-
--destructive: 0 72.22% 50.59%;
86+
--destructive: 0 84.2% 60.2%;
8687
--destructive-foreground: 60 9.1% 97.8%;
8788
--border: 20 5.9% 90%;
8889
--input: 20 5.9% 90%;
8990
--ring: 24.6 95% 53.1%;
9091
--radius: 0.5rem;
9192
}
93+
9294
.dark {
93-
--background: 20 14.3% 4.1%;
95+
--background: 20 32.17% 6.4%;
9496
--foreground: 60 9.1% 97.8%;
95-
--card: 20 14.3% 4.1%;
97+
--card: 20 33.72% 4.6%;
9698
--card-foreground: 60 9.1% 97.8%;
97-
--popover: 20 14.3% 4.1%;
99+
--popover: 20 31.41% 4.68%;
98100
--popover-foreground: 60 9.1% 97.8%;
99101
--primary: 20.5 90.2% 48.2%;
100102
--primary-foreground: 60 9.1% 97.8%;
@@ -114,6 +116,9 @@
114116

115117
/* custom themes */
116118
@theme {
119+
--font-sans: "Pretendard", sans-serif;
120+
--font-display: "DM Serif Display", serif;
121+
117122
--animate-major-gradient: major-gradient 7s ease-in-out infinite;
118123
@keyframes major-gradient {
119124
from,
@@ -135,6 +140,11 @@
135140
@apply border-border;
136141
}
137142

143+
h1,
144+
h2 {
145+
@apply font-display;
146+
}
147+
138148
body {
139149
@apply flex min-h-screen flex-col bg-background text-foreground;
140150
}

‎src/fonts.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@font-face {
2+
font-family: "DM Serif Display";
3+
font-style: normal;
4+
font-display: auto;
5+
font-weight: 400;
6+
src:
7+
url(@fontsource/dm-serif-display/files/dm-serif-display-latin-400-normal.woff2) format("woff2"),
8+
url(@fontsource/dm-serif-display/files/dm-serif-display-latin-400-normal.woff) format("woff");
9+
unicode-range:
10+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
11+
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
12+
}
13+
14+
@font-face {
15+
font-family: "Pretendard";
16+
font-style: normal;
17+
font-display: auto;
18+
font-weight: 100;
19+
src:
20+
url(@fontsource/pretendard/files/pretendard-latin-100-normal.woff2) format("woff2"),
21+
url(@fontsource/pretendard/files/pretendard-latin-100-normal.woff) format("woff");
22+
}
23+
24+
@font-face {
25+
font-family: "Pretendard";
26+
font-style: normal;
27+
font-display: auto;
28+
font-weight: 200;
29+
src:
30+
url(@fontsource/pretendard/files/pretendard-latin-200-normal.woff2) format("woff2"),
31+
url(@fontsource/pretendard/files/pretendard-latin-200-normal.woff) format("woff");
32+
}
33+
34+
@font-face {
35+
font-family: "Pretendard";
36+
font-style: normal;
37+
font-display: auto;
38+
font-weight: 300;
39+
src:
40+
url(@fontsource/pretendard/files/pretendard-latin-300-normal.woff2) format("woff2"),
41+
url(@fontsource/pretendard/files/pretendard-latin-300-normal.woff) format("woff");
42+
}
43+
44+
@font-face {
45+
font-family: "Pretendard";
46+
font-style: normal;
47+
font-display: auto;
48+
font-weight: 400;
49+
src:
50+
url(@fontsource/pretendard/files/pretendard-latin-400-normal.woff2) format("woff2"),
51+
url(@fontsource/pretendard/files/pretendard-latin-400-normal.woff) format("woff");
52+
}
53+
54+
@font-face {
55+
font-family: "Pretendard";
56+
font-style: normal;
57+
font-display: auto;
58+
font-weight: 500;
59+
src:
60+
url(@fontsource/pretendard/files/pretendard-latin-500-normal.woff2) format("woff2"),
61+
url(@fontsource/pretendard/files/pretendard-latin-500-normal.woff) format("woff");
62+
}
63+
64+
@font-face {
65+
font-family: "Pretendard";
66+
font-style: normal;
67+
font-display: auto;
68+
font-weight: 600;
69+
src:
70+
url(@fontsource/pretendard/files/pretendard-latin-600-normal.woff2) format("woff2"),
71+
url(@fontsource/pretendard/files/pretendard-latin-600-normal.woff) format("woff");
72+
}
73+
74+
@font-face {
75+
font-family: "Pretendard";
76+
font-style: normal;
77+
font-display: auto;
78+
font-weight: 700;
79+
src:
80+
url(@fontsource/pretendard/files/pretendard-latin-700-normal.woff2) format("woff2"),
81+
url(@fontsource/pretendard/files/pretendard-latin-700-normal.woff) format("woff");
82+
}
83+
84+
@font-face {
85+
font-family: "Pretendard";
86+
font-style: normal;
87+
font-display: auto;
88+
font-weight: 800;
89+
src:
90+
url(@fontsource/pretendard/files/pretendard-latin-800-normal.woff2) format("woff2"),
91+
url(@fontsource/pretendard/files/pretendard-latin-800-normal.woff) format("woff");
92+
}
93+
94+
@font-face {
95+
font-family: "Pretendard";
96+
font-style: normal;
97+
font-display: auto;
98+
font-weight: 900;
99+
src:
100+
url(@fontsource/pretendard/files/pretendard-latin-900-normal.woff2) format("woff2"),
101+
url(@fontsource/pretendard/files/pretendard-latin-900-normal.woff) format("woff");
102+
}

‎src/routes/+layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@
8585
<!-- Left part -->
8686
<a href="/" class="flex items-center gap-2">
8787
<img src={FAVICON_URL} alt="Svelte" class="size-8" />
88-
<h2 class="hidden text-xl font-semibold xs:inline-block">
88+
<span class="hidden text-xl font-semibold xs:inline-block">
8989
Svelte
9090
<span class="text-primary">Changelog</span>
91-
</h2>
91+
</span>
9292
</a>
9393

9494
<!-- Right part -->

‎src/routes/package/[...package]/ReleaseCard.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,9 @@
171171
</Tooltip.Root>
172172
</Tooltip.Provider>
173173
{:else}
174-
<span class="text-lg group-hover:underline">{packageName}@{releaseVersion}</span>
174+
<span class="font-display text-lg group-hover:underline">
175+
{packageName}@{releaseVersion}
176+
</span>
175177
{/if}
176178
<div class="mb-auto flex items-center gap-2 xs:hidden">
177179
{@render badges()}

‎src/routes/package/[...package]/SidePanel.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<div class={cn("flex flex-col *:shadow-lg *:shadow-black", className)}>
3939
<Card.Root class="z-10 border border-muted-foreground/25 bg-secondary">
4040
<Card.Header class="flex-row items-start justify-between">
41-
<Card.Title>Packages</Card.Title>
41+
<Card.Title class="font-display">Packages</Card.Title>
4242
<a
4343
href="/packages"
4444
class="group inline-flex items-center gap-1 text-primary underline-offset-4 hover:underline"
@@ -55,7 +55,7 @@
5555
{/if}
5656
<li class="space-y-2">
5757
{#if packages.length > 1}
58-
<h3 class="text-xl font-bold text-primary">{category.name}</h3>
58+
<h3 class="font-display text-xl font-bold text-primary">{category.name}</h3>
5959
<ul class="space-y-2">
6060
{#each packages as { pkg } (pkg.name)}
6161
<li>
@@ -78,13 +78,15 @@
7878
{:else}
7979
{@const firstPackageName = packages[0]?.pkg.name ?? ""}
8080
{#if page.url.pathname.endsWith(`/${firstPackageName}`)}
81-
<span class="text-xl font-bold text-primary underline underline-offset-4">
81+
<h3
82+
class="font-display text-xl font-bold text-primary underline underline-offset-4"
83+
>
8284
{category.name}
83-
</span>
85+
</h3>
8486
{:else}
8587
<a
8688
href="/package/{firstPackageName}"
87-
class="group inline-flex w-full items-center text-xl font-bold text-primary underline-offset-4 hover:underline"
89+
class="group inline-flex w-full items-center font-display text-xl font-bold text-primary underline-offset-4 hover:underline"
8890
>
8991
{category.name}
9092
<ChevronRight

0 commit comments

Comments
 (0)