fix(ui/web): text rendered as sans instead of mono

cuhacking · Dec 2, 2024 · 208bc77 · 208bc77
1 parent 678b94d
commit 208bc77
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 30 deletions.
diff --git a/apps/website/app/root.tsx b/apps/website/app/root.tsx
@@ -1,5 +1,4 @@
-import type { LinksFunction, MetaFunction } from '@remix-run/node'
-
+import type { MetaFunction } from '@remix-run/node'
 import {
   Links,
   Meta,
@@ -16,24 +15,11 @@ export const meta: MetaFunction = () => [
   },
 ]
 
-export const links: LinksFunction = () => [
-  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-  {
-    rel: 'preconnect',
-    href: 'https://fonts.gstatic.com',
-    crossOrigin: 'anonymous',
-  },
-  {
-    rel: 'stylesheet',
-    href: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap',
-  },
-]
-
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html
       lang="en"
-      className="dark scroll-smooth scroll-pt-16 overflow-x-hidden"
+      className="dark scroll-smooth scroll-pt-16 overflow-x-hidden font-mono"
     >
       <head>
         <meta charSet="utf-8" />

diff --git a/libs/external/shadcn/tailwind.config.ts b/libs/external/shadcn/tailwind.config.ts
@@ -18,7 +18,7 @@ export function buildConfig(
     theme: {
       extend: {
         fontFamily: {
-          sans: ['JetBrains Mono', 'sans-serif'],
+          mono: ['JetBrains Mono'],
         },
         backgroundImage: {
           'greendiant': 'linear-gradient(200deg, hsl(var(--secondary)) 10%, hsl(var(--primary)) 90%)',

diff --git a/libs/shared/ui/global.css b/libs/shared/ui/global.css
@@ -2,10 +2,11 @@
  * Don't forget to update your APPs global.css to include this file!
  */
 
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 @layer base {
   :root {
@@ -68,6 +69,7 @@
     @apply border-border;
   }
   body {
+    font-family: 'JetBrains Mono', monospace;
     @apply bg-background text-foreground;
     font-feature-settings:
       'rlig' 1,

diff --git a/libs/shared/ui/terminal-text/terminal-text.tsx b/libs/shared/ui/terminal-text/terminal-text.tsx
@@ -21,7 +21,7 @@ const callToActionVariation = cva('', {
 })
 
 const terminalTextVariation = cva(
-  'flex flex-row gap-x-3 font-sans items-start',
+  'flex flex-row gap-x-3 items-start',
 )
 
 export function TerminalText({

diff --git a/libs/shared/ui/typography/typgoraphy.tsx b/libs/shared/ui/typography/typgoraphy.tsx
@@ -20,15 +20,15 @@ interface TypographyProps {
 const typographyVariants = cva('', {
   variants: {
     variant: {
-      'h1': 'text-6xl font-bold font-sans',
-      'h2': 'text-5xl font-normal font-sans',
-      'h3': 'font-sans font-medium leading-10 font-sans text-4xl tracking-normal uppercase no-underline',
-      'h4': 'text-2xl font-normal font-sans',
-      'h5': 'text-lg font-normal font-sans',
-      'h6': 'font-sans font-medium leading-5 text-sm tracking-normal uppercase no-underline',
-      'paragraph-base': 'text-base font-normal font-sans',
-      'paragraph-sm': 'text-sm font-normal font-sans',
-      'paragraph-xs': 'text-xs font-normal font-sans',
+      'h1': 'text-6xl font-bold',
+      'h2': 'text-5xl font-normal',
+      'h3': 'font-medium leading-10 text-4xl tracking-normal uppercase no-underline',
+      'h4': 'text-2xl font-normal',
+      'h5': 'text-lg font-normal',
+      'h6': 'font-medium leading-5 text-sm tracking-normal uppercase no-underline',
+      'paragraph-base': 'text-base font-normal',
+      'paragraph-sm': 'text-sm font-normal',
+      'paragraph-xs': 'text-xs font-normal',
     },
   },
 })

diff --git a/libs/website/feature/events/ui/event-presenter/event-presenter.tsx b/libs/website/feature/events/ui/event-presenter/event-presenter.tsx
@@ -9,7 +9,7 @@ interface EventContainerProps {
 export function EventPresenter({ events }: EventContainerProps) {
   return (
     <GlassmorphicCard variant="default" className="p-3.5 sm:p-6 flex flex-col gap-6">
-      <h2 className="font-sans text-4xl text-left">
+      <h2 className="text-4xl text-left">
         EVENTS
       </h2>
       <section className="grid gap-4 grid-col-1 md:grid-cols-2">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,7 +7,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['JetBrains Mono', 'sans-serif'],
+        mono: ['JetBrains Mono'],
       },
       backgroundImage: {
         'greendiant': 'linear-gradient(200deg, hsl(var(--secondary)) 10%, hsl(var(--primary)) 90%)',