fix fonts

Tietokilta · Jan 16, 2024 · 84cf999 · 84cf999
1 parent 232628e
commit 84cf999
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/apps/web/src/app/[lang]/[...path]/page.tsx b/apps/web/src/app/[lang]/[...path]/page.tsx
@@ -51,7 +51,7 @@ function Content({
   if (!content) return null;
 
   return (
-    <article className="prose prose-headings:scroll-mt-40 prose-headings:xl:scroll-mt-24 max-w-prose">
+    <article className="prose prose-headings:scroll-mt-40 prose-headings:font-mono prose-headings:xl:scroll-mt-24 max-w-prose">
       <LexicalSerializer nodes={content.root.children} />
     </article>
   );
@@ -68,7 +68,7 @@ const Page = async ({ params: { path, lang } }: Props) => {
       <AdminBar collection="pages" id={page.id} />
       <main className="relative mb-8 flex flex-col items-center gap-2 md:gap-6">
         <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 text-gray-100 md:h-[25svh]">
-          <h1 className="text-4xl md:text-5xl">{page.title}</h1>
+          <h1 className="font-mono text-4xl md:text-5xl">{page.title}</h1>
         </header>
 
         <div className="relative m-auto flex max-w-prose flex-col gap-8 p-4 md:p-6">

diff --git a/apps/web/src/app/[lang]/layout.tsx b/apps/web/src/app/[lang]/layout.tsx
@@ -4,12 +4,15 @@ import { Inter, Roboto_Mono } from "next/font/google";
 import { Footer } from "../../components/footer";
 import { MainNav } from "../../components/main-nav";
 import { MobileNav } from "../../components/mobile-nav";
-import { cn } from "../../lib/utils";
 import { getDictionary, type Locale } from "../../lib/dictionaries";
+import { cn } from "../../lib/utils";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
-const robotoMono = Roboto_Mono({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+});
 
 interface LayoutProps {
   params: {
@@ -52,7 +55,7 @@ export default async function RootLayout({
 
   return (
     <html lang={lang}>
-      <body className={cn(inter.className, robotoMono.className)}>
+      <body className={cn(inter.variable, robotoMono.variable, "font-sans")}>
         <div className="flex min-h-screen flex-col">
           <MobileNav
             className="sticky top-0 z-10 md:hidden"

diff --git a/apps/web/src/components/table-of-contents/index.tsx b/apps/web/src/components/table-of-contents/index.tsx
@@ -45,15 +45,14 @@ function HeadingList({
         <li
           className={cn(
             "before:me-[2ch] before:text-gray-600",
-            item.level === 2 && "mb-2 before:content-['#'] last:mb-0",
-            item.level === 3 && "mb-1 text-sm before:content-['##'] last:mb-0",
+            item.level === 2 && "mb-2 text-lg before:content-['#'] last:mb-0",
+            item.level === 3 && "mb-1 before:content-['##'] last:mb-0",
           )}
           key={`${item.level}-${item.text}`}
         >
           <Link
             className={cn(
               "underline-offset-2 hover:underline focus-visible:font-bold focus-visible:outline-2 focus-visible:outline-offset-8",
-              item.level === 3 && "text-sm",
               item.text.toLocaleLowerCase().replace(/\s/g, "-") ===
                 activeHeadingId && "font-bold underline",
             )}
@@ -80,7 +79,7 @@ function Desktop({
   return (
     <div
       className={cn(
-        "absolute h-full -translate-x-[calc(100%+1.5rem)]",
+        "absolute h-full -translate-x-[calc(100%+1.5rem)] font-mono",
         className,
       )}
     >
@@ -111,7 +110,7 @@ function Mobile({
   return (
     <details
       className={cn(
-        "group fixed left-0 top-24 -mt-4 flex w-screen flex-col gap-2 bg-gray-100/80 backdrop-blur-sm",
+        "group fixed left-0 top-24 -mt-4 flex w-screen flex-col gap-2 bg-gray-100/80 font-mono backdrop-blur-sm",
         className,
       )}
       ref={detailsRef}

diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
@@ -1,11 +1,20 @@
 const path = require("path");
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {import("tailwindcss").Config} */
 module.exports = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
     path.join(path.dirname(require.resolve("@tietokilta/ui")), "**/*.js"),
   ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
+        mono: ["var(--font-roboto-mono)", ...defaultTheme.fontFamily.mono],
+      },
+    },
+  },
   plugins: [
     require("@tietokilta/ui"),
     require("tailwindcss-animate"),