Spaces:
Running
Running
Commit ·
8384347
1
Parent(s): 613d675
SF Pro system stack for body text; Press Start 2P back for UI chrome
Browse filesBody/chat text uses -apple-system (SF Pro on Apple devices, platform
equivalent elsewhere) at 17px — the 24px sizing was tuned for VT323's
small x-height and would be oversized in SF Pro. The original arcade
font returns for the title, tabs, toggles, statuses, and panel
headings. VT323 dropped.
- frontend/app/globals.css +4 -3
- frontend/app/layout.tsx +5 -11
frontend/app/globals.css
CHANGED
|
@@ -10,14 +10,15 @@
|
|
| 10 |
--color-background: var(--background);
|
| 11 |
--color-foreground: var(--foreground);
|
| 12 |
--font-pixel: var(--font-pixel);
|
| 13 |
-
--font-term: var(--font-term);
|
| 14 |
}
|
| 15 |
|
| 16 |
body {
|
| 17 |
background: var(--background);
|
| 18 |
color: var(--foreground);
|
| 19 |
-
|
| 20 |
-
font-
|
|
|
|
|
|
|
| 21 |
image-rendering: pixelated;
|
| 22 |
}
|
| 23 |
|
|
|
|
| 10 |
--color-background: var(--background);
|
| 11 |
--color-foreground: var(--foreground);
|
| 12 |
--font-pixel: var(--font-pixel);
|
|
|
|
| 13 |
}
|
| 14 |
|
| 15 |
body {
|
| 16 |
background: var(--background);
|
| 17 |
color: var(--foreground);
|
| 18 |
+
/* SF Pro on Apple devices; the platform equivalent elsewhere */
|
| 19 |
+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
|
| 20 |
+
"Segoe UI", Roboto, sans-serif;
|
| 21 |
+
font-size: 17px;
|
| 22 |
image-rendering: pixelated;
|
| 23 |
}
|
| 24 |
|
frontend/app/layout.tsx
CHANGED
|
@@ -1,17 +1,11 @@
|
|
| 1 |
import type { Metadata } from "next";
|
| 2 |
-
import {
|
| 3 |
import "./globals.css";
|
| 4 |
|
| 5 |
-
//
|
| 6 |
-
//
|
| 7 |
-
const pixelFont =
|
| 8 |
variable: "--font-pixel",
|
| 9 |
-
weight: ["400", "500", "600", "700"],
|
| 10 |
-
subsets: ["latin"],
|
| 11 |
-
});
|
| 12 |
-
|
| 13 |
-
const termFont = VT323({
|
| 14 |
-
variable: "--font-term",
|
| 15 |
weight: "400",
|
| 16 |
subsets: ["latin"],
|
| 17 |
});
|
|
@@ -30,7 +24,7 @@ export default function RootLayout({
|
|
| 30 |
return (
|
| 31 |
<html
|
| 32 |
lang="en"
|
| 33 |
-
className={`${pixelFont.variable}
|
| 34 |
>
|
| 35 |
<body className="min-h-full flex flex-col">{children}</body>
|
| 36 |
</html>
|
|
|
|
| 1 |
import type { Metadata } from "next";
|
| 2 |
+
import { Press_Start_2P } from "next/font/google";
|
| 3 |
import "./globals.css";
|
| 4 |
|
| 5 |
+
// The original arcade font for UI chrome (title, tabs, toggles, panel
|
| 6 |
+
// headings); body text uses the system SF Pro stack (see globals.css)
|
| 7 |
+
const pixelFont = Press_Start_2P({
|
| 8 |
variable: "--font-pixel",
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
weight: "400",
|
| 10 |
subsets: ["latin"],
|
| 11 |
});
|
|
|
|
| 24 |
return (
|
| 25 |
<html
|
| 26 |
lang="en"
|
| 27 |
+
className={`${pixelFont.variable} h-full`}
|
| 28 |
>
|
| 29 |
<body className="min-h-full flex flex-col">{children}</body>
|
| 30 |
</html>
|