fixed site's language font

ReKylee · ReKylee · commit 3ab413d39b6a · 2025-07-13T15:42:56.000+03:00
diff --git a/src/app.css b/src/app.css
@@ -1,6 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;700&display=swap");
-
 @import "tailwindcss";
 @import "@catppuccin/tailwindcss/mocha.css";
 
@@ -12,6 +9,11 @@
     --font-sans: "JetBrains Mono", sans-serif;
     --font-hebrew: "Noto Sans Hebrew", sans-serif;
 }
+@layer base {
+    *:lang(he) {
+        @apply font-hebrew;
+    }
+}
 * {
     box-sizing: border-box;
 }
@@ -56,10 +58,6 @@ main {
 
 /* --- ASCII UI Styles --- */
 
-.ascii-border {
-    @apply border-2 border-ctp-surface0 p-4;
-}
-
 /* Base style for a clickable file line */
 .ascii-file-container {
     @apply relative pl-4 pr-4; /* Add padding to make space for brackets */
@@ -143,7 +141,7 @@ body::after {
     z-index: 101;
     animation: crt-noise 0.5s linear infinite;
 }
-/* FIX: CANT BE TURNED OFF WITH THE SLIDER */
+
 /* This wrapper applies the text glow to the entire app */
 .crt-wrapper {
     /* The blur is always active */
diff --git a/src/app.html b/src/app.html
@@ -4,6 +4,12 @@
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <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=JetBrains+Mono:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap"
+            rel="stylesheet" />
+
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover" class="bg-ctp-base text-ctp-text">
diff --git a/src/lib/components/features/terminal/Terminal.svelte b/src/lib/components/features/terminal/Terminal.svelte
@@ -28,6 +28,7 @@
 
 <div
     bind:this={terminalElement}
+    dir="ltr"
     class="
     relative
     w-full
@@ -42,7 +43,7 @@
     text-ctp-green
     p-4
     rounded
-    ascii-border
+    border-2 border-ctp-surface0
   ">
     {#if $terminalStore.state === "waiting"}
         <div class="absolute inset-0 p-4">
diff --git a/src/lib/stores/language.js b/src/lib/stores/language.js
@@ -12,15 +12,18 @@ const createLanguageStore = () => {
         subscribe,
         setLang: (/** @type {string} */ lang) => {
             if (browser) {
+                document.documentElement.lang = lang;
+                document.documentElement.dir = lang === "he" ? "rtl" : "ltr";
                 localStorage.setItem("language", lang);
-                console.log("Setting language to:", lang);
             }
             set(lang);
         },
         init: () => {
             if (browser) {
                 const savedLang = localStorage.getItem("language") || "en";
-                console.log("Initializing language to:", savedLang);
+                document.documentElement.lang = savedLang;
+                document.documentElement.dir =
+                    savedLang === "he" ? "rtl" : "ltr";
                 set(savedLang);
             }
         },
