mirror of
https://github.com/hex248/sprint.git
synced 2026-02-07 18:23:03 +00:00
CommitMono
This commit is contained in:
BIN
packages/frontend/public/fonts/CommitMono-Variable.woff2
Normal file
BIN
packages/frontend/public/fonts/CommitMono-Variable.woff2
Normal file
Binary file not shown.
@@ -133,7 +133,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: "IBM Plex Mono", monospace;
|
font-family: "Commit Mono", monospace;
|
||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|||||||
@@ -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-face {
|
||||||
font-family: "Basteleur";
|
font-family: "Basteleur";
|
||||||
@@ -37,7 +51,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.font-mono {
|
.font-mono {
|
||||||
font-family: "IBM Plex Mono", monospace;
|
font-family: "Commit Mono", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-basteleur {
|
.font-basteleur {
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
|
|||||||
import { RequireAuth, SessionProvider } from "@/components/session-provider";
|
import { RequireAuth, SessionProvider } from "@/components/session-provider";
|
||||||
import { ThemeProvider } from "@/components/theme-provider";
|
import { ThemeProvider } from "@/components/theme-provider";
|
||||||
import App from "@/pages/App";
|
import App from "@/pages/App";
|
||||||
|
import Font from "@/pages/Font";
|
||||||
import Landing from "@/pages/Landing";
|
import Landing from "@/pages/Landing";
|
||||||
import Login from "@/pages/Login";
|
import Login from "@/pages/Login";
|
||||||
import NotFound from "@/pages/NotFound";
|
import NotFound from "@/pages/NotFound";
|
||||||
@@ -18,6 +19,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|||||||
<Routes>
|
<Routes>
|
||||||
{/* public routes */}
|
{/* public routes */}
|
||||||
<Route path="/" element={<Landing />} />
|
<Route path="/" element={<Landing />} />
|
||||||
|
<Route path="/font" element={<Font />} />
|
||||||
<Route path="/login" element={<Login />} />
|
<Route path="/login" element={<Login />} />
|
||||||
|
|
||||||
{/* authed routes */}
|
{/* authed routes */}
|
||||||
|
|||||||
25
packages/frontend/src/pages/Font.tsx
Normal file
25
packages/frontend/src/pages/Font.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user