feat: enhance Tailwind configuration with new font families, update global styles, and improve landing page typography

tyler-dane · tyler-dane · commit 58f283de40c1 · 2026-04-03T12:47:51.000-07:00
diff --git a/src/app/bak.favicon.ico b/src/app/bak.favicon.ico
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,13 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply font-mono;
-  }
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,11 +5,13 @@ import "./globals.css";
 const robotoSlab = Roboto_Slab({
   subsets: ["latin"],
   variable: "--font-roboto-slab",
+  weight: ["400", "700"],
 });
 
 const robotoMono = Roboto_Mono({
   subsets: ["latin"],
   variable: "--font-roboto-mono",
+  weight: ["400", "700"],
 });
 
 export const metadata: Metadata = {
@@ -25,7 +27,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${robotoSlab.variable} ${robotoMono.variable} min-h-screen bg-warm-50 text-warm-900 antialiased font-sans`}
+        className={`${robotoSlab.variable} ${robotoMono.variable} min-h-screen bg-warm-50 text-warm-900 antialiased font-slab`}
       >
         {children}
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,10 +7,19 @@ import { SiSubstack } from "react-icons/si";
 
 import { useState, useEffect } from "react";
 
+/** Accent #77756e — link hover and typewriter name highlights. */
+const accentClass = "text-[#77756e]";
+
 const linkRowClass =
-  "group flex items-center space-x-2 text-warm-700 transition-colors duration-200 hover:text-red-900";
+  "group flex items-center space-x-2 text-warm-700 transition-colors duration-200 hover:text-[#77756e]";
+
+const linkLabelClass =
+  "font-mono font-bold transition-[font-weight] duration-200 group-hover:font-extrabold";
 
-const linkLabelClass = "font-bold transition-[font-weight] duration-200 group-hover:font-extrabold";
+const typewriterStrings = [
+  `Hey, I'm <span class="${accentClass}">Tyler</span> Dane.`,
+  `<span class="${accentClass}">Switchback</span> is the LLC I use as a contract Software Engineer.`,
+];
 
 export default function LandingPage() {
   const [mounted, setMounted] = useState(false);
@@ -26,10 +35,7 @@ export default function LandingPage() {
           {mounted && (
             <Typewriter
               options={{
-                strings: [
-                  "Hey, I'm Tyler Dane.",
-                  "Switchback is the LLC I use as a contract Software Engineer.",
-                ],
+                strings: typewriterStrings,
                 autoStart: true,
                 loop: true,
               }}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -9,8 +9,12 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-roboto-slab)", "ui-serif", "Georgia", "serif"],
+        /** Roboto Slab — primary UI text */
+        slab: ["var(--font-roboto-slab)", "ui-serif", "Georgia", "serif"],
+        /** Roboto Mono — monospace accents */
         mono: ["var(--font-roboto-mono)", "ui-monospace", "monospace"],
+        /** Alias of `slab` for Tailwind defaults that expect `sans` */
+        sans: ["var(--font-roboto-slab)", "ui-serif", "Georgia", "serif"],
       },
       colors: {
         warm: {
