Skip to content

Commit

Permalink
Add new font
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ananto30
Ananto30 committed Jan 30, 2024
1 parent 10e1bcf commit 79180f0
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 44 deletions.
1 change: 1 addition & 0 deletions web/src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@layer base {
html {
@apply antialiased;
font-size: 14px;
}
}

Expand Down
9 changes: 1 addition & 8 deletions web/src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Domine:wght@400;500;600;700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nanum+Gothic:wght@400;700;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Varela+Round&family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
Expand Down
12 changes: 6 additions & 6 deletions web/src/lib/Hadith.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
transition:slide
class="max-w-4xl space-y-2 bg-white p-4 shadow dark:bg-storm-600 md:rounded-lg md:p-6"
>
<div class="flex flex-row items-center font-semibold">
<div class="flex flex-row items-center">
<div class="w-full dark:text-gray-300">
<h2 class="leading-tight">{hadith.collection}</h2>
<span class="flex text-xs text-gray-600 dark:text-gray-400">
Expand All @@ -124,29 +124,29 @@
</div>
<div class="text-md flex flex-col gap-2 py-2">
{#if hadith.narrator_en}
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">
<p class="text-sm text-gray-500 dark:text-gray-400">
{hadith.narrator_en}
</p>
{/if}
<p class="font-serif dark:text-gray-300">
{#each hadith.body_en.split(' ') as word}
{#if hadith.highlights && hadith.highlights.includes(word.replace(/[.,/#!$%^&*;:{}=\-_`~()"']/g, ''))}
<span class="font-bold dark:text-emerald-600">{word} </span>
<span class="font-bold text-emerald-600">{word} </span>
{:else}
<span class="">{word} </span>
{/if}
{/each}
</p>
</div>
<div class="flex space-x-2">
<div class="flex w-full flex-col pt-2 text-xs font-medium text-gray-500 dark:text-gray-400">
<div class="flex w-full flex-col pt-2 text-xs text-gray-500 dark:text-gray-400">
<span>Book: {hadith.book_en} </span>
<p class="">
{#if hadith.chapter_en}
Chapter:
{#each hadith.chapter_en.split(' ') as word}
{#if hadith.highlights && hadith.highlights.includes(word.replace(/[.,/#!$%^&*;:{}=\-_`~()"']/g, ''))}
<span class="font-bold dark:text-emerald-600">{word} </span>
<span class="font-bold text-emerald-600">{word} </span>
{:else}
<span class="">{word} </span>
{/if}
Expand All @@ -160,7 +160,7 @@
<div class="mt-2 flex justify-end">
<button
aria-label="Copy Hadith"
class="my-auto h-7 rounded-lg border border-gray-300 px-2 text-xs font-semibold text-gray-600 transition duration-200 ease-in-out hover:bg-gray-800 hover:text-white dark:border-gray-700 dark:bg-storm-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200"
class="my-auto h-7 rounded-lg border border-gray-300 px-2 text-xs text-gray-600 transition duration-200 ease-in-out hover:bg-gray-800 hover:text-white dark:border-gray-700 dark:bg-storm-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200"
on:click={copyText}
>
{copied ? 'Copied' : 'Copy'}
Expand Down
8 changes: 3 additions & 5 deletions web/src/lib/Nav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,10 @@
</script>

<nav
class="sticky top-0 z-10 border-b border-gray-200 bg-white p-2 shadow-sm dark:border-gray-700 dark:bg-storm-800 md:p-4"
class="sticky top-0 z-10 border-b border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-storm-800"
>
<div class="mx-auto max-w-7xl">
<ul
class="flex flex-row justify-end gap-4 text-sm font-medium text-gray-600 dark:text-gray-300"
>
<ul class="flex flex-row justify-end gap-4 text-sm text-gray-600 dark:text-gray-300">
<li>
<a class="flex flex-row items-center gap-1 hover:underline" href="/">
<SearchSvg />
Expand All @@ -58,7 +56,7 @@
<li>
<button
aria-label="Install App"
class="flex flex-row items-center gap-1 font-medium hover:underline"
class="flex flex-row items-center gap-1 hover:underline"
on:click={install}
>
<DownloadSvg />
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/book/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</div>
{/if}
{#if $searchKey}
<div class="mb-20 mt-10 flex items-center justify-center font-normal underline">
<div class="mb-20 mt-10 flex items-center justify-center underline">
<a
href="/?search={$searchKey}"
class="text-sm text-blue-700 hover:text-blue-500 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
Expand Down
44 changes: 20 additions & 24 deletions web/tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,29 @@ module.exports = {
800: '#111111',
900: '#0d0d0d'
}
},
fontSize: {
reading: '1.05rem'
}
},
fontFamily: {
sans: [
'Open Sans',
'Work Sans',
'Rubik',
'Inter',
'PT Sans',
'Lato',
'Nunito',
'Poppins',
'Varela Round',
'Fira Sans',
'Roboto Slab',
'sans-serif'
],
serif: [
'Bitter',
'Domine',
'PT Serif',
'Lora',
'Vollkorn',
'Merriweather',
'Poppins',
'serif'
]
sans: ['Merriweather Sans', 'sans-serif'],
serif: ['Merriweather', 'serif']
},
fontSize: {
xs: ['10px', '12px'],
sm: ['12px', '16px'],
base: ['14px', '20px'],
lg: ['16px', '24px'],
xl: ['18px', '28px'],
'2xl': ['20px', '32px'],
'3xl': ['24px', '36px'],
'4xl': ['30px', '42px'],
'5xl': ['36px', '48px'],
'6xl': ['48px', '56px'],
'7xl': ['64px', '72px'],
'8xl': ['72px', '80px'],
'9xl': ['96px', '104px']
}
},
plugins: [],
Expand Down

0 comments on commit 79180f0

Please sign in to comment.