updated font

isala404 · Nov 28, 2024 · a809b71 · a809b71
1 parent 69751b7
commit a809b71
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 83 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,22 +1,30 @@
+@font-face {
+  font-family: 'Nunito';
+  src: url('/Nunito-VariableFont_wght.ttf') format('truetype');
+  font-weight: 100 900;
+  font-display: swap;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
 	body {
 		@apply bg-white dark:bg-gray-900;
+		font-family: 'Nunito', sans-serif;
 	}
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
-    display: none;
+	display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .no-scrollbar {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
 }
 
 @layer components {

diff --git a/src/lib/about-me/stats.svelte b/src/lib/about-me/stats.svelte
@@ -25,7 +25,7 @@
 							' flex flex-col justify-center absolute opacity-50 h-full w-full z-10 rounded-xl'}
 					></div>
 					<div class="z-20 absolute w-full text-center">
-						<img src={stat.icon} alt={stat.title} class="w-10 h-10 mx-auto opacity-75" />
+						<img src={stat.icon} alt={stat.title} class="w-10 h-10 mx-auto opacity-75 dark-icon-white" />
 						<p class="text-lg text-gray-900 dark:text-gray-100">{stat.value} {stat.title}</p>
 					</div>
 				</div>

diff --git a/src/lib/medium.svelte b/src/lib/medium.svelte
@@ -14,7 +14,11 @@
 	class="border text-card-foreground bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden max-w-[26rem] text-left mix-h-40 flex flex-row m-4"
 >
 	<div class="max-w-40">
-		<img class={'max-w-40 object-cover w-96 h-full dark-icon-white' + align} src={image} alt="Article thumbnail" />
+		<img
+			class={'max-w-40 object-cover w-96 h-full dark-icon-white' + align}
+			src={image}
+			alt="Article thumbnail"
+		/>
 	</div>
 	<div class="p-2 flex flex-col max-w-[19rem]">
 		<h2 class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-gray-100">

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -1,19 +1,18 @@
 export type Post = {
-    title: string;
-    slug: string;
-    description: string;
-    date: string;
-    author: string;
-    author_image: string;
-    audio: string;
-    image: string;
-    genre: string;
-    keywords: string[];
+	title: string;
+	slug: string;
+	description: string;
+	date: string;
+	author: string;
+	author_image: string;
+	audio: string;
+	image: string;
+	genre: string;
+	keywords: string[];
 	read_time: string;
-    published: boolean;
+	published: boolean;
 };
 
-
 // ---
 // title: 'SVEX: Supercharging Markdown with Svelte Components'
 // description: 'Learn how to enhance your Markdown content with interactive Svelte components using SVEX - a powerful combination of Svelte and MDX.'

diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
@@ -1,68 +1,92 @@
 <script lang="ts">
-    import { formatDate } from '$lib/utils';
-    import { ArrowLeft, Clock } from 'lucide-svelte';
-    let { data } = $props();
+	import { formatDate } from '$lib/utils';
+	import { ArrowLeft, Clock } from 'lucide-svelte';
+	let { data } = $props();
 </script>
 
 <section class="max-w-4xl mx-auto px-2 sm:px-4 py-8 sm:py-12">
-    <div class="flex items-center mb-6 sm:mb-8">
-        <a href="/" class="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-600 transition-colors">
-            <ArrowLeft class="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
-            Back to Home
-        </a>
-    </div>    
-    <ul class="grid gap-4 sm:gap-6">
-        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white px-4 sm:px-8 mb-4 sm:mb-5">
-            Blog
-        </h1>
-        {#each data.posts as post}
-            <li class="group">
-                <article class="p-4 sm:p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100 dark:border-gray-700 relative">
-                    <header class="mb-3 sm:mb-4 flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
-                        <div class="flex-1">
-                            <div class="flex flex-wrap items-center gap-2 sm:gap-3 mb-2 text-sm text-gray-500 dark:text-gray-400">
-                                <time datetime={post.date}>
-                                    {formatDate(post.date)}
-                                </time>
-                                <span class="flex items-center gap-1">
-                                    <Clock class="w-3 h-3 sm:w-4 sm:h-4" />
-                                    {post.read_time}
-                                </span>
-                            </div>
-                            <h2>
-                                <a href={post.slug}
-                                   class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
-                                    {post.title}
-                                </a>
-                            </h2>
-                        </div>
-                        {#if post.image}
-                            <img src={post.image} alt={post.title} 
-                                 class="w-full sm:w-24 h-48 sm:h-24 object-cover rounded-lg" 
-                                 loading="lazy">
-                        {/if}
-                    </header>
-                    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2">
-                        {post.description}
-                    </p>
-                    <div class="mt-3 sm:mt-4 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between">
-                        <div class="flex flex-wrap gap-1.5 sm:gap-2">
-                            <span class="px-2 py-0.5 text-xs rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-                                {post.genre}
-                            </span>
-                            {#each post.keywords.slice(0, 3) as keyword}
-                                <span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
-                                    #{keyword}
-                                </span>
-                            {/each}
-                        </div>
-                        <a href={post.slug}
-                           class="text-sm sm:text-base text-right text-blue-600 dark:text-blue-400 transform transition-all duration-200 group-hover:translate-x-1">
-                            Read more →
-                        </a>
-                    </div>
-                </article>
-            </li>
-        {/each} 
-    </ul>
+	<div class="flex items-center mb-6 sm:mb-8">
+		<a
+			href="/"
+			class="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-600 transition-colors"
+		>
+			<ArrowLeft class="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
+			Back to Home
+		</a>
+	</div>
+	<ul class="grid gap-4 sm:gap-6">
+		<h1
+			class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white px-4 sm:px-8 mb-4 sm:mb-5"
+		>
+			Blog
+		</h1>
+		{#each data.posts as post}
+			<li class="group">
+				<article
+					class="p-4 sm:p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100 dark:border-gray-700 relative"
+				>
+					<header
+						class="mb-3 sm:mb-4 flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4"
+					>
+						<div class="flex-1">
+							<div
+								class="flex flex-wrap items-center gap-2 sm:gap-3 mb-2 text-sm text-gray-500 dark:text-gray-400"
+							>
+								<time datetime={post.date}>
+									{formatDate(post.date)}
+								</time>
+								<span class="flex items-center gap-1">
+									<Clock class="w-3 h-3 sm:w-4 sm:h-4" />
+									{post.read_time}
+								</span>
+							</div>
+							<h2>
+								<a
+									href={post.slug}
+									class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+								>
+									{post.title}
+								</a>
+							</h2>
+						</div>
+						{#if post.image}
+							<img
+								src={post.image}
+								alt={post.title}
+								class="w-full sm:w-24 h-48 sm:h-24 object-cover rounded-lg"
+								loading="lazy"
+							/>
+						{/if}
+					</header>
+					<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2">
+						{post.description}
+					</p>
+					<div
+						class="mt-3 sm:mt-4 flex flex-col sm:flex-row gap-3 sm:items-center sm:justify-between"
+					>
+						<div class="flex flex-wrap gap-1.5 sm:gap-2">
+							<span
+								class="px-2 py-0.5 text-xs rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
+							>
+								{post.genre}
+							</span>
+							{#each post.keywords.slice(0, 3) as keyword}
+								<span
+									class="px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
+								>
+									#{keyword}
+								</span>
+							{/each}
+						</div>
+						<a
+							href={post.slug}
+							class="text-sm sm:text-base text-right text-blue-600 dark:text-blue-400 transform transition-all duration-200 group-hover:translate-x-1"
+						>
+							Read more →
+						</a>
+					</div>
+				</article>
+			</li>
+		{/each}
+	</ul>
 </section>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -149,13 +149,14 @@
 		<div class="flex overflow-x-auto no-scrollbar pb-2">
 			<div class="flex gap-2 flex-nowrap">
 				{#each data.meta.keywords as keyword}
-					<span class="px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-gray-800 whitespace-nowrap">
+					<span
+						class="px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-gray-800 whitespace-nowrap"
+					>
 						#{keyword}
 					</span>
 				{/each}
 			</div>
 		</div>
-
 	</header>
 
 	<!-- Featured Image -->

diff --git a/static/Nunito-VariableFont_wght.ttf b/static/Nunito-VariableFont_wght.ttf
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,4 @@
-import daisyui from 'daisyui'
+import daisyui from 'daisyui';
 
 /** @type {import('tailwindcss').Config} */
 export default {