Improve readability and randomize guest landing pet.

Pair Share Tech Mono body text with Press Start 2P display accents, and show a randomized dressed pixel character for signed-out homepage previews.

app/globals.css

@@ -19,7 +19,7 @@
     --secondary: 198 100% 45%;
     --secondary-foreground: 252 38% 10%;
     --muted: 252 24% 20%;
-    --muted-foreground: 52 40% 68%;
+    --muted-foreground: 52 35% 74%;
     --accent: 142 70% 45%;
     --accent-foreground: 252 38% 10%;
     --destructive: 0 84% 58%;
@@ -51,7 +51,7 @@
     --secondary: 198 100% 45%;
     --secondary-foreground: 252 38% 10%;
     --muted: 252 24% 20%;
-    --muted-foreground: 52 40% 68%;
+    --muted-foreground: 52 35% 74%;
     --accent: 142 70% 45%;
     --accent-foreground: 252 38% 10%;
     --destructive: 0 84% 58%;
@@ -73,9 +73,16 @@
   }
 
   body {
-    @apply overflow-x-hidden bg-background text-foreground text-xs leading-relaxed;
-    font-family: var(--font-pixel), monospace;
-    image-rendering: pixelated;
+    @apply overflow-x-hidden bg-background text-foreground text-sm leading-relaxed;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-pixel leading-snug;
   }
 }
 

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from "next";
-import { Press_Start_2P } from "next/font/google";
+import { Press_Start_2P, Share_Tech_Mono } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
 import { GlobalBottomNav } from "@/components/layout/global-bottom-nav";
@@ -30,6 +30,13 @@ const pixelFont = Press_Start_2P({
   display: "swap",
 });
 
+const bodyFont = Share_Tech_Mono({
+  weight: "400",
+  subsets: ["latin"],
+  variable: "--font-body",
+  display: "swap",
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -37,7 +44,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${pixelFont.variable} font-sans`}>
+      <body className={`${pixelFont.variable} ${bodyFont.variable} font-sans antialiased`}>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"