driver-vault/DriverVault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The panel's webfonts, in the one position CSS accepts them

Browse Source 
The lockup was the visible symptom and the wrong suspect. Matching it to the Web
App's component changed nothing a reader would notice, because the panel was not
rendering Archivo at all — it was rendering system-ui's italic bold, which is a
different letterform at the same size, and had been since the stylesheet was
written.

The Google Fonts @import sat after @import "tailwindcss". Tailwind v4 inlines
its import into the rules it generates, so anything importing after it is no
longer at the top of the sheet, and CSS drops an @import that follows real
rules. The built stylesheet carried zero occurrences of fonts.googleapis.com;
the build had been saying so on every run, in a warning easy to read as noise
about a comment. Moving the font import above Tailwind's is the whole fix, and
the Web App's own stylesheet has always had that order with a comment explaining
it — that comment comes across, plus what it cost here.

This was never only the wordmark. Every rule reaching for --font-sans or
--font-mono was falling back too, which is the entire panel: the section nav,
the card titles, and the endpoint tables whose monospace is how a path reads as
a path. Checked against the built bundle rather than the dev server, since the
dev pipeline is exactly what was hiding it: the page now reports Archivo italic
800 loaded, and the wordmark measures 115.05px — the same width the Web App's
rail lockup measures.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tajniak81
2026-08-30 18:17:09 +02:00
co-authored by Claude Opus 5
parent e648634ce1
commit a49d48f659
5 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
API Server/internal/api/dist/assets/index-C26jpIre.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
API Server/internal/api/dist/assets/index-BjBOfjar.js → API Server/internal/api/dist/assets/index-CvY2-bIX.js
Vendored
View File
API Server/internal/api/dist/assets/index-nQWOOvsA.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
API Server/internal/api/dist/index.html
Vendored
+2 -2
View File
@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#2563eb" />
<title>DriverVault · API Server</title>
<script type="module" crossorigin src="/assets/index-BjBOfjar.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-nQWOOvsA.css">
<script type="module" crossorigin src="/assets/index-CvY2-bIX.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C26jpIre.css">
</head>
<body>
<div id="app"></div>
API Server/panel/src/style.css
+7 -3
View File
@@ -1,8 +1,12 @@
@import "tailwindcss";
/* DriverVault webfonts — Archivo (UI + display, italic 800 is the brand voice) + DM Mono (data/labels). */
/* DriverVault webfonts — Archivo (UI + display, italic 800 is the brand voice) + DM Mono (data/labels).
Must precede @import "tailwindcss": Tailwind v4 inlines its import into many
rules, so any @import after it would violate CSS's "imports must come first"
and be dropped from the build — which left the panel on system-ui while the
Web App, which has always had this order, rendered the real wordmark. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&family=DM+Mono:ital,wght@0,400;0,500&display=swap");
@import "tailwindcss";
/* Tailwind v4 defaults dark: to prefers-color-scheme; switch to a class strategy
so theme.js can toggle `.dark` on <html>. */
@custom-variant dark (&:where(.dark, .dark *));