typography

Author: ReKylee

package-lock.json

@@ -15,8 +15,9 @@
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.0.0",
+		"@types/node": "^24.0.12",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.0.0",

package.json

@@ -12,3 +12,11 @@ body {
 html {
   scroll-behavior: smooth;
 }
+
+.lang-en {
+  font-family: "JetBrains Mono", sans-serif;
+}
+
+.lang-he {
+  font-family: "Noto Sans Hebrew", sans-serif;
+}

src/app.css

@@ -9,9 +9,9 @@
     language.init();
 </script>
 
-<div class="bg-ctp-base text-ctp-text transition-colors duration-300" dir={$language === "he" ? "rtl" : "ltr"}>
+<div class="bg-ctp-base text-ctp-text transition-colors duration-300 {$language === 'he' ? 'lang-he' : 'lang-en'}" dir={$language === "he" ? "rtl" : "ltr"}>
     <Header />
-    <main>
+    <main class="prose lg:prose-xl max-w-none">
         <slot />
     </main>
     <Footer />

src/routes/+layout.svelte

@@ -1,8 +1,22 @@
 import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import typography from '@tailwindcss/typography';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [tailwindcss({
+		content: [
+			'./src/**/*.{html,js,svelte,ts}',
+		],
+		theme: {
+			extend: {
+			fontFamily: {
+				sans: ['"JetBrains Mono"', 'sans-serif'],
+				hebrew: ['"Noto Sans Hebrew"', 'sans-serif'],
+			},
+		},
+		},
+		plugins: [typography],
+	}), sveltekit()],
 	base: process.env.BASE_PATH
 });