The deployed redesign rendered dark-bg but unstyled, low-contrast text because none of the --color-* tokens or token utilities were in the output CSS. Two compounding causes, both fixed: 1. A CSS @import url(google-fonts) AFTER @import "tailwindcss" becomes a misplaced import once Tailwind inlines itself; Lightning CSS drops it and everything after — including @theme. Fonts now load via <link> in index.html. 2. A box-drawing-unicode comment immediately before @theme stopped Tailwind v4 from transforming the block. Replaced with plain ASCII. CSS 21.8KB → 26.3KB; tokens + utilities now present; theme applies. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
38 lines
1.7 KiB
HTML
38 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
|
|
<title>kez-chat</title>
|
|
<meta name="description" content="End-to-end encrypted chat on top of KEZ — portable cross-app identity." />
|
|
|
|
<!-- Fonts: Inter (UI) + JetBrains Mono (keys/handles/wordmark). Loaded
|
|
here, not via CSS @import — see app.css note. -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" />
|
|
|
|
<!-- Browser tab + Android Chrome favicon -->
|
|
<link rel="icon" href="/favicon.ico" sizes="48x48" />
|
|
<link rel="icon" type="image/svg+xml" href="/kez-icon.svg" />
|
|
|
|
<!-- iOS Add-to-Home-Screen icon + status-bar styling -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
|
|
<!-- mobile-web-app-capable is the standard; apple-mobile-web-app-capable
|
|
is the legacy iOS-only variant (Chrome flags it as deprecated). -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="kez-chat" />
|
|
|
|
<!-- Web App Manifest (generated by vite-plugin-pwa) + Android theme color -->
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<meta name="theme-color" content="#0b0c0e" />
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|