wip: use baloo-bhaijaan-2 as english font

cdsctf · Sep 5, 2024 · 01e22f3 · 01e22f3
1 parent 3fadbc6
commit 01e22f3
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
         "format": "prettier --write ."
     },
     "dependencies": {
+        "@fontsource-variable/baloo-bhaijaan-2": "^5.0.21",
         "chroma-js": "^3.0.0",
         "install": "^0.13.0",
         "luxon": "^3.5.0",
@@ -28,10 +29,10 @@
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/chroma-js": "^2.4.4",
+        "@types/luxon": "^3.4.2",
         "@types/node": "^22.4.0",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@types/luxon": "^3.4.2",
         "@types/react-transition-group": "^4.4.11",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "eslint": "^9.9.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import { router } from "@/routers";
 import { useEffect } from "react";
 import Toaster from "@/components/Toaster";
 
-function App() {
+export default function App() {
     const themeStore = useThemeStore();
 
     useEffect(() => {
@@ -32,5 +32,3 @@ function App() {
         </>
     );
 }
-
-export default App;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -51,6 +51,27 @@ export default function Page() {
                         123
                     </Button>
                 </div>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Integer nec odio. Praesent libero. Sed cursus ante dapibus
+                    diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
+                    Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed
+                    augue semper porta. Mauris massa. Vestibulum lacinia arcu
+                    eget nulla. Class aptent taciti sociosqu ad litora torquent
+                    per conubia nostra, per inceptos himenaeos. Curabitur
+                    sodales ligula in libero. Sed dignissim lacinia nunc.
+                    Curabitur tortor. Pellentesque nibh. Aenean quam. In
+                    scelerisque sem at dolor. Maecenas mattis. Sed convallis
+                    tristique sem. Proin ut ligula vel nunc egestas porttitor.
+                    Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
+                    massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris
+                    ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,
+                    euismod in, nibh. Quisque volutpat condimentum velit. Class
+                    aptent taciti sociosqu ad litora torquent per conubia
+                    nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia,
+                    urna non tincidunt mattis, tortor neque adipiscing diam, a
+                    cursus ipsum ante quis turpis.
+                </p>
                 <TextInput
                     clearable
                     // passwd
@@ -81,17 +102,18 @@ export default function Page() {
                     }}
                 />
                 <div
-                style={{
-                    display: "flex",
-                    gap: 20,
-                }}>
+                    style={{
+                        display: "flex",
+                        gap: 20,
+                    }}
+                >
                     <DatetimePicker
                         value={datetime}
                         onChange={(datetime) => {
                             setDatetime(datetime);
                         }}
                     />
-                    <p style={{alignItems:"center"}}>To</p>
+                    <p style={{ alignItems: "center" }}>To</p>
                     <DatetimePicker
                         value={datetime}
                         onChange={(datetime) => {

diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
@@ -1,3 +1,15 @@
+@font-face {
+    font-family: "Baloo Bhaijaan 2";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400 800;
+    src: url(@fontsource-variable/baloo-bhaijaan-2/files/baloo-bhaijaan-2-latin-wght-normal.woff2)
+        format("woff2-variations");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
+        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 @mixin text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;

diff --git a/src/styles/components/atoms/Button.module.scss b/src/styles/components/atoms/Button.module.scss
@@ -85,10 +85,9 @@ $text-color: var(--text-color);
 
         .content {
             color: $text-color;
-            font-size: 15px;
-            font:
-                700 12.5px din-ronud,
-                sans-serif;
+            font-size: 0.875rem;
+            font-weight: 700;
+            line-height: 15px;
             letter-spacing: 0.8px;
         }
     }

diff --git a/src/styles/tailwind.scss b/src/styles/tailwind.scss
@@ -9,12 +9,13 @@
 
 html,
 :host {
-    line-height: 1.5;
+    line-height: 1.5rem;
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     tab-size: 4;
-    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: "Baloo Bhaijaan 2", ui-sans-serif, system-ui, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
     font-feature-settings: normal;
     font-variation-settings: normal;
     -webkit-tap-highlight-color: transparent;