feat: got the hero h1 up

SquiggleTools · Feb 20, 2024 · d32b43d · d32b43d
1 parent b5a3d4e
commit d32b43d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/app/HeroHeading.css.ts b/app/HeroHeading.css.ts
@@ -1,5 +1,8 @@
 import { style } from "@vanilla-extract/css";
 
+import { vars } from "./styles.css";
+
 export const root = style({
-	border: "solid 1px",
+	fontSize: vars.sizes.hero,
+	textAlign: "right",
 });
diff --git a/app/raw.css b/app/raw.css
@@ -0,0 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700;900&display=swap");
+
+body,
+html {
+	font-family: "League Spartan", monospace;
+	font-smooth: smooth;
+	-webkit-font-smoothing: antialiased;
+	overflow: overlay;
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -5,10 +5,12 @@ import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 import clsx from "clsx";
 
 import { HeroHeading } from "./HeroHeading.js";
+import raw from "./raw.css";
 import * as styles from "./root.css";
 import { themeClass } from "./styles.css.js";
 
 export const links: LinksFunction = () => [
+	{ href: raw, rel: "stylesheet" },
 	...(cssBundleHref ? [{ href: cssBundleHref, rel: "stylesheet" }] : []),
 ];
 
@@ -21,7 +23,7 @@ export default function App() {
 				<Links />
 			</head>
 			<body>
-				<HeroHeading>Hello world!</HeroHeading>
+				<HeroHeading>Boston TypeScript</HeroHeading>
 				<Outlet />
 
 				<Scripts />

diff --git a/app/styles.css.ts b/app/styles.css.ts
@@ -5,4 +5,7 @@ export const [themeClass, vars] = createTheme({
 		background: "#3178c6",
 		foreground: "#ffffff",
 	},
+	sizes: {
+		hero: "10rem",
+	},
 });