Skip to content

Commit e6a54ae

Browse files
prokawsarprokawsar
authored
Update font to Inter and Sebino (#27)
* Update GA to v4 * Font Inter * Landing page font update * Font update on blog page * Font weight and size fix * Update font for blog heading * Revert load test file * Heading fix * Apps menu and community font update
1 parent 8319ba3 commit e6a54ae

34 files changed

+111
-76
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"format": "prettier --write ."
1414
},
1515
"devDependencies": {
16+
"@fontsource-variable/inter": "^5.2.5",
1617
"@iconify/svelte": "^4.0.2",
1718
"@playwright/test": "^1.28.1",
1819
"@svelte-put/qr": "^1.2.1",
@@ -46,7 +47,6 @@
4647
},
4748
"type": "module",
4849
"dependencies": {
49-
"@fontsource/jost": "^5.0.18",
5050
"@lottiefiles/lottie-player": "^2.0.12",
5151
"github-slugger": "^2.0.0",
5252
"mdsvex": "^0.11.2",

‎src/lib/app.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,19 @@
99
html {
1010
scroll-behavior: smooth;
1111
}
12+
13+
@font-face {
14+
font-family: Sebino;
15+
font-style: normal;
16+
font-weight: 400;
17+
src: url('/fonts/Sebino-Regular.ttf') format('truetype');
18+
}
19+
20+
.font-sebino {
21+
font-family: Sebino, sans-serif;
22+
}
23+
24+
.font-inter {
25+
font-family: 'Inter Variable', sans-serif;
26+
font-display: swap;
27+
}

‎src/lib/components/AppMenus.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
<a
1616
class:active={$page.url.pathname.includes('/apps')}
1717
href={base + link.href}
18-
class="flex h-9 items-center gap-1 rounded-lg bg-white/10 p-1 px-4 font-medium text-arkGray7 hover:bg-arkOrangeLightM/10 hover:text-arkOrangeLightM dark:text-gray-100"
18+
class="font-sebino flex h-9 items-center gap-1 rounded-lg bg-white/10 p-1 px-4 text-arkGray7 hover:bg-arkOrangeLightM/10 hover:text-arkOrangeLightM dark:text-gray-100"
1919
>
2020
<Icon icon="tdesign:app-filled" width="19px" />
21-
{link.title}
21+
<span class="mt-1">
22+
{link.title}
23+
</span>
2224
</a>
2325
<div id="apps-menu" class="absolute left-20 top-9 pt-2">
2426
<div class="grid w-96 grid-cols-2 rounded-xl border border-gray-300 bg-white p-2">

‎src/lib/components/Author.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<dl class="whitespace-nowrap text-sm font-medium leading-5">
2525
<dt class="sr-only">Author</dt>
26-
<dd class="text-base font-bold leading-6 text-gray-600 dark:text-gray-300">{author}</dd>
26+
<dd class="font-sebino text-xl leading-6 text-arkGray">{author}</dd>
2727
{#if twitter}
2828
<dt class="sr-only">Twitter</dt>
2929
<dd>
@@ -34,7 +34,7 @@
3434
{/if}
3535
{#if postDate}
3636
<dt class="sr-only">Published on</dt>
37-
<dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
37+
<dd class="leading-6 text-arkGray">
3838
<time dateTime={postDate}>{formatDate(postDate)}</time>
3939
</dd>
4040
{/if}

‎src/lib/components/CommunityMenus.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
<div class="menus">
1111
<a
1212
href={base + link.href}
13-
class="flex h-9 items-center gap-1 rounded-lg bg-white/10 p-1 px-4 font-medium text-arkGray7 hover:bg-arkOrangeLightM/10 hover:text-arkOrangeLightM dark:text-gray-100"
13+
class="font-sebino flex h-9 items-center gap-1 rounded-lg bg-white/10 p-1 px-4 text-arkGray7 hover:bg-arkOrangeLightM/10 hover:text-arkOrangeLightM dark:text-gray-100"
1414
>
1515
<Icon icon="fluent:people-community-28-filled" width="22px" />
16-
{link.title}
16+
<span class="mt-1">
17+
{link.title}
18+
</span>
1719
</a>
1820
<div class="apps-menu absolute top-9 pt-2">
1921
<div class="grid w-96 grid-cols-2 rounded-xl border border-gray-300 bg-white p-4">

‎src/lib/components/GetStarted.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
href="{base}{href}"
1212
class="{bgOrange
1313
? 'bg-arkOrange hover:bg-arkOrangeDeep'
14-
: 'bg-black'} flex h-10 items-center rounded-md px-4 text-white {classes}"
14+
: 'bg-black'} font-sebino flex h-10 items-center rounded-md px-4 text-white {classes}"
1515
>
1616
Get Started
1717
</a>

‎src/lib/components/RenderMarkdown.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,10 @@
2020
</script>
2121

2222
{@html transformedContent}
23+
24+
<style lang="postcss">
25+
:global(h2) {
26+
font-family: 'Inter Variable', sans-serif;
27+
font-size: 24px !important;
28+
}
29+
</style>

‎src/lib/components/Title.svelte‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<script lang="ts">
22
export let title = 'Title'
33
export let subtitle = ''
4-
export let h2 = false
5-
let selected = h2 ? 'h2' : 'h1'
4+
export let h3 = false
5+
let selected = h3 ? 'h3' : 'h1'
66
</script>
77

88
{#if title}
99
<svelte:element
1010
this={selected}
11-
class="{h2
12-
? 'text-2xl sm:text-3xl md:text-5xl'
13-
: 'text-3xl sm:text-4xl md:text-6xl'} md:leading-14 font-extrabold capitalize leading-9 tracking-tight sm:leading-10"
11+
class="{h3 ? 'text-2xl sm:text-3xl md:text-5xl' : 'text-3xl sm:text-4xl md:text-6xl'}
12+
md:leading-14 font-extrabold capitalize leading-9 tracking-tight sm:leading-10"
1413
>
1514
{title}
1615
</svelte:element>

‎src/lib/components/blogs/Blog.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="space-y-1 text-center lg:text-start">
1919
<div class="py-5">
2020
<h1
21-
class="md:leading-14 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl"
21+
class="md:leading-14 text-3xl font-bold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-snug md:text-[56px]"
2222
>
2323
{post.title}
2424
</h1>
@@ -38,7 +38,7 @@
3838
</dl>
3939
<div class="flex flex-col border-s-2 pl-4 text-start">
4040
<dt class="sr-only">Published on</dt>
41-
<dd class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
41+
<dd class="font-sebino leading-6 text-arkGray">
4242
Published on: <time dateTime={post.date}>
4343
{new Date(post.date).toLocaleDateString(config.locale, {
4444
year: 'numeric',
@@ -47,7 +47,7 @@
4747
})}
4848
</time>
4949
</dd>
50-
<dd class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
50+
<dd class="font-sebino leading-6 text-arkGray">
5151
Last Update:
5252
<time dateTime={post.updated_at ?? post.date}>
5353
{new Date(post.updated_at ?? post.date).toLocaleDateString(config.locale, {
@@ -69,7 +69,7 @@
6969
{/if}
7070

7171
<dl class="space-y-10">
72-
<dd class="mt-4 text-justify lg:text-start">
72+
<dd class="font-sebino mt-4 text-justify text-[18px] lg:text-start">
7373
{post.summary}
7474
</dd>
7575
</dl>
@@ -83,7 +83,7 @@
8383
class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-4 xl:row-span-2 xl:pb-0"
8484
>
8585
<div
86-
class="prose max-w-none pb-8 pt-10 prose-a:text-arkOrange prose-a:no-underline hover:prose-a:underline"
86+
class="font-sebino prose max-w-none pb-8 pt-10 text-xl text-arkGray prose-a:text-arkOrange prose-a:no-underline hover:prose-a:underline"
8787
>
8888
{#if post.image}
8989
<img
@@ -105,9 +105,9 @@
105105
<div class="flex flex-row gap-4 py-4 xl:py-8">
106106
{#if post.prev}
107107
<div class="max-w-md flex-1">
108-
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
108+
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
109109
Previous Article
110-
</h2>
110+
</p>
111111
<div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
112112
<!-- <a href={base + `/blog/${post.prev.slug}`}>{post.prev.title}</a> -->
113113
<BlogItem post={post.prev} />
@@ -116,9 +116,9 @@
116116
{/if}
117117
{#if post.next}
118118
<div class="max-w-md flex-1">
119-
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
119+
<p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
120120
Next Article
121-
</h2>
121+
</p>
122122
<div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
123123
<!-- <a href={base + `/blog/${post.next.slug}`}>{post.next.title}</a> -->
124124
<BlogItem post={post.next} />

0 commit comments

Comments
 (0)