Kez/kez-chat/web/index.html
Jason Tudisco 7bbe336f6b fix(kez-chat/web): @theme block was being dropped — theme never applied
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>
2026-05-27 22:06:55 -06:00

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>