CommitMono

This commit is contained in:
Oliver Bryan
2026-01-11 22:19:04 +00:00
parent 7a74a2fe73
commit 5fc055d76a
5 changed files with 44 additions and 3 deletions

View File

@@ -133,7 +133,7 @@
}
* {
font-family: "IBM Plex Mono", monospace;
font-family: "Commit Mono", monospace;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;

View File

@@ -1,4 +1,18 @@
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@font-face {
font-family: "Commit Mono";
src: url("/fonts/CommitMono-Variable.woff2") format("woff2");
font-weight: 200 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Commit Mono";
src: url("/fonts/CommitMono-Variable.woff2") format("woff2");
font-weight: 200 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Basteleur";
@@ -37,7 +51,7 @@
}
.font-mono {
font-family: "IBM Plex Mono", monospace;
font-family: "Commit Mono", monospace;
}
.font-basteleur {

View File

@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
import { RequireAuth, SessionProvider } from "@/components/session-provider";
import { ThemeProvider } from "@/components/theme-provider";
import App from "@/pages/App";
import Font from "@/pages/Font";
import Landing from "@/pages/Landing";
import Login from "@/pages/Login";
import NotFound from "@/pages/NotFound";
@@ -18,6 +19,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<Routes>
{/* public routes */}
<Route path="/" element={<Landing />} />
<Route path="/font" element={<Font />} />
<Route path="/login" element={<Login />} />
{/* authed routes */}

View File

@@ -0,0 +1,25 @@
const WEIGHTS = [
200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700,
];
const SAMPLE_TEXT = "The quick brown fox jumps over the lazy dog 0123456789.";
export default function Font() {
return (
<main className="min-h-screen font-mono">
<div className="mx-auto w-fit px-8 py-10">
<h1 className="text-2xl font-500">Commit Mono</h1>
<div className="mt-6 flex flex-col divide-y divide-foreground/30">
{WEIGHTS.map((weight) => (
<div key={weight} className="grid grid-cols-[42px_1fr] items-center gap-3 px-3 py-3">
<span className="text-sm" style={{ fontWeight: weight }}>
{weight}
</span>
<span style={{ fontWeight: weight }}>{SAMPLE_TEXT}</span>
</div>
))}
</div>
</div>
</main>
);
}