TanStack Start}
+ >
+ Deploy a TanStack Start app built with Vite and Nitro.
+ .type-title-3xl · 30px/36px · weight 900 · width 125
The quick brown fox jumps over the lazy dog
+.type-title-2xl · 24px/32px · weight 800 · width 110
+The quick brown fox jumps over the lazy dog
+.type-title-xl · 20px/28px · weight 800 · width 110
The quick brown fox jumps over the lazy dog
@@ -69,6 +73,7 @@ Title styles use the **Mona Sans VF** display font with heavy weights and extend | `type-title-5xl` | Mona Sans VF | 64px (4rem) | 72px (4.5rem) | 900 | 125 | | | `type-title-4xl` | Mona Sans VF | 40px (2.5rem) | 48px (3rem) | 900 | 125 | | | `type-title-3xl` | Mona Sans VF | 30px (1.875rem) | 36px (2.25rem) | 900 | 125 | | +| `type-title-2xl` | Mona Sans VF | 24px (1.5rem) | 32px (2rem) | 800 | 110 | | | `type-title-xl` | Mona Sans VF | 20px (1.25rem) | 28px (1.75rem) | 800 | 110 | | | `type-title-lg` | Mona Sans VF | 18px (1.125rem) | 28px (1.75rem) | 800 | 110 | | | `type-title-md` | Mona Sans VF | 16px (1rem) | 24px (1.5rem) | 800 | 110 | | diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css index e1ef2e0348..7d5b5d6aad 100644 --- a/apps/eclipse/src/app/global.css +++ b/apps/eclipse/src/app/global.css @@ -5,26 +5,40 @@ @import "@prisma-docs/ui/styles"; #nd-sidebar { - @apply border-e; - background-color: var(--color-background); + @apply border-e; + background-color: var(--color-background); } header &[data-search-full] { - @apply rounded-xl; + @apply rounded-xl; } /* [data-header-tabs], */ [data-header-body] { - @apply border-none; + @apply border-none; } #nd-page { - @apply @container; + @apply @container; } h1, h2, h3, h4, h5 { - font-family: var(--font-sans-display); + font-family: var(--font-sans-display); +} + +/* Wire next/font/local preloaded fonts into the design-token variables. + Declared after the @import so this :root wins on cascade order (same + specificity, later position). Falls back to the @font-face family names + from fonts.css if the CSS variables haven't been set yet. */ +:root { + --font-sans-display: + var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto", + "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif; + --font-mono: + var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace, + "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", + "DejaVu Sans Mono", monospace; } diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx index e643a2fc9f..0d808330a5 100644 --- a/apps/eclipse/src/app/layout.tsx +++ b/apps/eclipse/src/app/layout.tsx @@ -2,6 +2,7 @@ import { Provider } from "@/components/provider"; import Script from "next/script"; import "./global.css"; import { Inter, Barlow } from "next/font/google"; +import localFont from "next/font/local"; import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse"; const inter = Inter({ @@ -15,11 +16,44 @@ const barlow = Barlow({ variable: "--font-barlow", }); +const monaSans = localFont({ + src: [ + { + path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2", + weight: "200 900", + style: "normal", + }, + { + path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2", + weight: "200 900", + style: "italic", + }, + ], + variable: "--font-mona-sans", + display: "swap", +}); + +const monaSansMono = localFont({ + src: "../../../../packages/eclipse/src/static/fonts/MonaSansMonoVF[wght].woff2", + variable: "--font-mona-mono", + display: "swap", + weight: "200 900", +}); + export default function Layout({ children }: LayoutProps<"/">) { return ( - + - +