chore: add rubik and ibmplexmono fonts

blue-build · Apr 3, 2024 · 7e53368 · 7e53368
1 parent 500d014
commit 7e53368
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,8 @@
     },
     "type": "module",
     "dependencies": {
+        "@fontsource-variable/rubik": "^5.0.21",
+        "@fontsource/ibm-plex-mono": "^5.0.12",
         "bits-ui": "^0.21.2",
         "clsx": "^2.1.0",
         "tailwind-merge": "^2.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script>
     import "../app.pcss";
+    import "@fontsource-variable/rubik";
+    import "@fontsource/ibm-plex-mono";
     // @ts-ignore
     // import { PUBLIC_ADAPTER } from "$env/static/public";
 </script>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,14 +4,14 @@
     import Input from "$lib/ui/components/ui/input/input.svelte";
 </script>
 
-<div class="min-w-screen">
+<div class="min-w-screen font-m">
     <Card.Root class="mx-auto mt-[10%] max-w-xl px-4 py-6">
         <Card.Header>
             <Card.Title>Card Title</Card.Title>
             <Card.Description>Card Description</Card.Description>
         </Card.Header>
         <Card.Content class="flex max-w-lg flex-col items-start justify-stretch gap-6">
-            <Input type="text" placeholder="weird-os"></Input>
+            <Input type="text" placeholder="weird-os" class="font-mono" required></Input>
             <Button href="/signin" size="lg" variant="default">
                 Sign in with GitHub to continue...
             </Button>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -58,7 +58,8 @@ const config = {
                 sm: "calc(var(--radius) - 4px)"
             },
             fontFamily: {
-                sans: [...fontFamily.sans]
+                sans: "Rubik Variable, system-ui, sans-serif",
+                mono: "IBM Plex Mono, monospace"
             }
         }
     }