mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to Outfit/Newsreader/IBM Plex Mono, add Stackless global polish

Browse Source 
- Replace Geist with Outfit (sans), Newsreader (serif), IBM Plex Mono
  loaded via next/font for optimal performance and no layout shift
- Wire --font-sans/serif/mono CSS variables to new fonts
- body/button/input now render in Outfit by default
- Add Stackless global polish: 4px thin scrollbars (#d0ccc4 thumb),
  black ::selection, input placeholder color #b5b0a6

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-02 16:21:20 -08:00
parent 9858a7fa15
commit 59c8ec2e02
2 changed files with 44 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/globals.css
View File

@@ -1,6 +1,5 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@@ -12,8 +11,9 @@
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans); --font-sans: var(--font-outfit);
--font-mono: var(--font-geist-mono); --font-serif: var(--font-newsreader);
--font-mono: var(--font-ibm-plex-mono);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -125,5 +125,31 @@
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
font-family: var(--font-outfit), 'Outfit', sans-serif;
}
button {
font-family: var(--font-outfit), 'Outfit', sans-serif;
cursor: pointer;
}
input, textarea, select {
font-family: var(--font-outfit), 'Outfit', sans-serif;
}
input::placeholder {
color: #b5b0a6;
}
::selection {
background: #1a1a1a;
color: #fff;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d0ccc4;
border-radius: 10px;
} }
} }

21
app/layout.tsx
View File

@@ -1,17 +1,26 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Outfit, Newsreader, IBM_Plex_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { Providers } from "@/app/components/Providers"; import { Providers } from "@/app/components/Providers";
const geistSans = Geist({ const outfit = Outfit({
variable: "--font-geist-sans", variable: "--font-outfit",
subsets: ["latin"], subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
}); });
const geistMono = Geist_Mono({ const newsreader = Newsreader({
variable: "--font-geist-mono", variable: "--font-newsreader",
subsets: ["latin"], subsets: ["latin"],
weight: ["400", "500"],
style: ["normal", "italic"],
});
const ibmPlexMono = IBM_Plex_Mono({
variable: "--font-ibm-plex-mono",
subsets: ["latin"],
weight: ["400", "500"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -27,7 +36,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${outfit.variable} ${newsreader.variable} ${ibmPlexMono.variable} antialiased`}
> >
<Providers> <Providers>
{children} {children}