Kyle Pope
4e1b59c0f9
Vite's initialization strips dynamically created elements from <head>. Place <style id="umbra-accent"> directly in the HTML source instead of creating it with createElement. Source-authored elements survive Vite's head cleanup. The inline script populates it via textContent (XSS-safe). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.8 KiB
HTML
41 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="theme-color" content="#09090b" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<title>UMBRA</title>
|
|
<!-- Static style tag — survives Vite's head cleanup (unlike dynamically created elements).
|
|
The inline script below populates it with accent color from localStorage cache. -->
|
|
<style id="umbra-accent"></style>
|
|
<script>
|
|
// Populate the static style tag with cached accent color before first paint.
|
|
// Uses textContent (safe from XSS) and !important (beats @layer base defaults).
|
|
(function() {
|
|
var h = '187', s = '85.7%', l = '53.3%';
|
|
try {
|
|
var c = localStorage.getItem('umbra-accent-color');
|
|
if (c) {
|
|
var p = JSON.parse(c);
|
|
if (p.h) h = p.h;
|
|
if (p.s) s = p.s;
|
|
if (p.l) l = p.l;
|
|
}
|
|
} catch(e) {}
|
|
document.getElementById('umbra-accent').textContent =
|
|
':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
|
|
})();
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|