Skip to content

Use Geist with tabular figures for standalone numerals #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dewabisma merged 2 commits into from
Sep 8, 2026
Merged

Use Geist with tabular figures for standalone numerals #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55423e0
Use Geist with tabular figures for standalone numerals
sejhere Sep 8, 2026
fbbad3b
Split mainnet ticker item into label and value
sejhere Sep 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions website/src/components/features/home/HeroBanner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ const t = await createTranslator(locale);
data-i18n-qtps={t("home.hero_banner.ticker.qtps")}
data-i18n-uptime={t("home.hero_banner.ticker.uptime")}
data-i18n-nodes={t("home.hero_banner.ticker.nodes")}
data-i18n-mainnet={t("home.hero_banner.ticker.mainnet")}
data-i18n-mainnet-label={t("home.hero_banner.ticker.mainnet.label")}
data-i18n-mainnet-value={t("home.hero_banner.ticker.mainnet.value")}
>
</div>
</div>
Expand Down Expand Up @@ -334,7 +335,9 @@ const t = await createTranslator(locale);
color: var(--color-muted);
}
.t-val {
font-family: "Geist Mono", monospace;
font-family: "Geist", sans-serif;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-size: 12px;
font-weight: 500;
color: var(--color-content);
Expand Down Expand Up @@ -365,7 +368,6 @@ const t = await createTranslator(locale);
</style>

<script>
import { startGlitchLoop } from "@/scripts/home/glitch";
import {
calcHeroDims,
heroLoop,
Expand All @@ -376,7 +378,6 @@ const t = await createTranslator(locale);
calcHeroDims();
heroLoop();
buildTicker();
startGlitchLoop();

window.addEventListener("resize", calcHeroDims);
window.addEventListener("mousemove", updateMousePosition);
Expand Down
4 changes: 3 additions & 1 deletion website/src/components/features/home/ProblemSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,9 @@ const t = await createTranslator(locale);
margin-bottom: 10px;
}
.prob-data-row1 .cell-num {
font-family: "Geist Mono", monospace;
font-family: "Geist", sans-serif;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-size: 64px;
font-weight: 500;
line-height: 1;
Expand Down
4 changes: 3 additions & 1 deletion website/src/components/features/launch/FactsSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ const t = await createTranslator(locale);
}

.launch-stat-value {
font-family: "Geist Mono", monospace;
font-family: "Geist", sans-serif;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-size: 36px;
font-weight: 400;
color: var(--color-flare);
Expand Down
4 changes: 3 additions & 1 deletion website/src/components/features/technology/ScalabilitySection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ const t = await createTranslator(locale);
}

.tech-stat-num {
font-family: "Geist Mono", monospace;
font-family: "Geist", sans-serif;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
font-size: 96px;
font-weight: 500;
line-height: 1;
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/de-DE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "UPTIME",
"nodes": "MINER",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "UPTIME",
"nodes": "MINERS",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/es-ES.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "TIEMPO DE ACTIVIDAD",
"nodes": "MINEROS",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/hi-IN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "अपटाइम",
"nodes": "माइनर्स",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/id-ID.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "UPTIME",
"nodes": "PENAMBANG",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "稼働時間",
"nodes": "マイナー",
"mainnet": "メインネット: 9/9/26"
"mainnet": {
"label": "メインネット",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/ko-KR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "업타임",
"nodes": "채굴자",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/ru-RU.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "АПТАЙМ",
"nodes": "МАЙНЕРЫ",
"mainnet": "MAINNET: 9/9/26"
"mainnet": {
"label": "MAINNET",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
5 changes: 4 additions & 1 deletion website/src/i18n/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
"qtps": "QTPS",
"uptime": "运行时间",
"nodes": "矿工",
"mainnet": "主网: 9/9/26"
"mainnet": {
"label": "主网",
"value": "9/9/26"
}
}
},
"problem": {
Expand Down
55 changes: 0 additions & 55 deletions website/src/scripts/home/glitch.ts
View file
Open in desktop

This file was deleted.

19 changes: 15 additions & 4 deletions website/src/scripts/home/ticker-mainnet.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,22 @@ describe("home hero ticker mainnet", () => {

for (const file of localeFiles) {
const data = JSON.parse(readFileSync(join(i18nDir, file), "utf8")) as {
home: { hero_banner: { ticker: { mainnet: string } } };
home: {
hero_banner: { ticker: { mainnet: { label: string; value: string } } };
};
};
const mainnet = data.home.hero_banner.ticker.mainnet;
expect(mainnet.includes("9/9/26"), `${file}: ${mainnet}`).toBe(true);
expect(/\?{2}/.test(mainnet), `${file}: ${mainnet}`).toBe(false);
const { label, value } = data.home.hero_banner.ticker.mainnet;

// The date is the shared source of truth and is not localised.
expect(value, `${file}: ${value}`).toBe("9/9/26");

// The label is translated, so only assert it is present and legible.
expect(label.length > 0, `${file}: empty label`).toBe(true);
expect(/\?{2}/.test(label), `${file}: ${label}`).toBe(false);
expect(/\?{2}/.test(value), `${file}: ${value}`).toBe(false);

// The label must not still carry the date it was split away from.
expect(label.includes("9/9/26"), `${file}: ${label}`).toBe(false);
}
});
});
23 changes: 14 additions & 9 deletions website/src/scripts/home/ticker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,36 @@ export const buildTicker = () => {
qtps: track.dataset.i18nQtps || "QTPS",
uptime: track.dataset.i18nUptime || "UPTIME",
nodes: track.dataset.i18nNodes || "NODES",
mainnet: track.dataset.i18nMainnet || "MAINNET: 9/9/26",
mainnetLabel: track.dataset.i18nMainnetLabel || "MAINNET",
mainnetValue: track.dataset.i18nMainnetValue || "9/9/26",
};

const items = [
{ lbl: labels.blockHeight, val: "—", live: true, id: "block-height" },
{ lbl: labels.blockHeight, val: "—", live: true, ref: "block-height" },
{ lbl: labels.qtps, val: String(QTPS), live: false },
{ lbl: labels.uptime, val: "99.97%", live: false },
{ lbl: labels.nodes, val: "—", live: true, id: "nodes" },
{ lbl: "", val: labels.mainnet, live: false, id: "mainnet" },
{ lbl: labels.nodes, val: "—", live: true, ref: "nodes" },
{ lbl: labels.mainnetLabel, val: labels.mainnetValue, live: false },
];

// Every item is rendered twice so the marquee can loop seamlessly, so live
// values are addressed by data attribute rather than id.
[0, 1].forEach(() => {
items.forEach(({ lbl, val, live, id }) => {
items.forEach(({ lbl, val, live, ref }) => {
const el = document.createElement("div");
el.className = "t-item";
const idAttr = id ? ` id="ticker-${id}"` : "";
const refAttr = ref ? ` data-ticker="${ref}"` : "";
el.innerHTML = `${live ? '<div class="tdot"></div>' : ""}
${lbl ? '<span class="t-lbl">' + lbl + "</span>" : ""}
<span class="t-val${live ? " live" : ""}"${idAttr}>${val}</span>`;
<span class="t-val${live ? " live" : ""}"${refAttr}>${val}</span>`;
track.appendChild(el);
});
});

const nodesEls = document.querySelectorAll("#ticker-nodes");
const blockHeightEls = document.querySelectorAll("#ticker-block-height");
const nodesEls = document.querySelectorAll('[data-ticker="nodes"]');
const blockHeightEls = document.querySelectorAll(
'[data-ticker="block-height"]',
);

apiClient.nodeRpc.connect();
apiClient.nodeRpc.subscribe((state) => {
Expand Down