Enhance Tailwind configuration with new font families and warm color palette; update global styles for typography; refactor layout to use Google Fonts; improve landing page styling and links.

tyler-dane · tyler-dane · commit d4186fb5addb · 2026-04-02T10:15:44.000-07:00
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,20 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-mono;
   }
 }
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,16 +1,15 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Roboto_Mono, Roboto_Slab } from "next/font/google";
 import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
+const robotoSlab = Roboto_Slab({
+  subsets: ["latin"],
+  variable: "--font-roboto-slab",
 });
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
 });
 
 export const metadata: Metadata = {
@@ -26,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${robotoSlab.variable} ${robotoMono.variable} min-h-screen bg-warm-50 text-warm-900 antialiased font-sans`}
       >
         {children}
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -15,9 +15,9 @@ export default function LandingPage() {
   }, []);
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-gray-800 to-black text-white font-mono">
+    <div className="min-h-screen flex flex-col items-center justify-center text-warm-900">
       <div className="max-w-2xl mx-auto p-8 space-y-8 animate-fade-in h-56">
-        <h1 className="text-4xl font-bold mb-4">
+        <h1 className="text-4xl font-bold mb-4 text-warm-800">
           {mounted && (
             <Typewriter
               options={{
@@ -32,13 +32,15 @@ export default function LandingPage() {
           )}
         </h1>
       </div>
-      <div className="space-y-4 ">
-        <p className="text-xl mb-4">Learn more about me and my work</p>
+      <div className="space-y-4">
+        <p className="text-xl mb-4 text-warm-600">
+          Learn more about me and my work
+        </p>
         <div className="space-y-4 flex flex-col justify-center">
           <LinkItem
             href="https://www.youtube.com/@tylerdane-com"
             target="_blank"
-            className="flex items-center space-x-2"
+            className="flex items-center space-x-2 text-warm-700 transition-colors hover:text-warm-900"
           >
             <FaYoutube size="1.4em" />
             <u>
@@ -49,9 +51,9 @@ export default function LandingPage() {
             </span>
           </LinkItem>
           <LinkItem
-            href="https://www.compasscalendar.com/"
+            href="https://github.com/SwitchbackTech/compass"
             target="_blank"
-            className="flex items-center space-x-2"
+            className="flex items-center space-x-2 text-warm-700 transition-colors hover:text-warm-900"
           >
             <FaCompass size="1.4em" />
             <u>
@@ -63,29 +65,29 @@ export default function LandingPage() {
           </LinkItem>
 
           <LinkItem
-            href="https://www.tylerdane.com/"
+            href="https://newsletter.fullstack.zip/"
             target="_blank"
-            className="flex items-center space-x-2"
+            className="flex items-center space-x-2 text-warm-700 transition-colors hover:text-warm-900"
           >
             <FaPenNib size="1.4em" />
             <u>
               <span>Blog:</span>
             </u>
             <span>
-              <em>Lessons learned</em>
+              <em>Sane system design</em>
             </span>
           </LinkItem>
           <LinkItem
             href="https://www.linkedin.com/in/tyler-dane/"
             target="_blank"
-            className="flex items-center space-x-2"
+            className="flex items-center space-x-2 text-warm-700 transition-colors hover:text-warm-900"
           >
             <TiSocialLinkedin size="1.4em" />
             <u>
               <span>LinkedIn:</span>
             </u>
             <span>
-              <em>Condensed blogs</em>
+              <em>Humble brags</em>
             </span>
           </LinkItem>
         </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,9 +8,23 @@ export default {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["var(--font-roboto-slab)", "ui-serif", "Georgia", "serif"],
+        mono: ["var(--font-roboto-mono)", "ui-monospace", "monospace"],
+      },
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        warm: {
+          50: "#F3EEE2",
+          100: "#e7e2d8",
+          200: "#b4b1a8",
+          300: "#97938c",
+          400: "#7a7771",
+          500: "#5e5c57",
+          600: "#44423e",
+          700: "#2b2a27",
+          800: "#141412",
+          900: "#030303",
+        },
       },
     },
   },
