Chad Curtis
1af6a45a77
Defer body inline style removal until CSS variables are injected by useApplyTheme, preventing a one-frame flash of unstyled background. Replace preloader logo <img> with CSS mask technique matching the React DittoLogo component, so the logo uses the theme's primary color instead of filter:invert() which turned purple into green.
48 lines
2.7 KiB
HTML
48 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<title>Ditto — A Nostr Client</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="Ditto — A Nostr Client" />
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Ditto" />
|
|
<meta property="og:description" content="A Nostr Client" />
|
|
<meta property="og:image" content="https://ditto.pub/og-image.jpg" />
|
|
<meta property="og:image:width" content="1424" />
|
|
<meta property="og:image:height" content="752" />
|
|
<meta property="og:image:type" content="image/png" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://ditto.pub" />
|
|
<meta property="og:site_name" content="Ditto" />
|
|
|
|
<!-- Twitter / X -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Ditto" />
|
|
<meta name="twitter:description" content="A Nostr Client" />
|
|
<meta name="twitter:image" content="https://ditto.pub/og-image.jpg" />
|
|
|
|
<meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:">
|
|
<link rel="icon" type="image/svg+xml" href="/logo.svg">
|
|
<link rel="apple-touch-icon" href="/logo.svg">
|
|
<link rel="manifest" href="/manifest.webmanifest">
|
|
<style>@keyframes ditto-spin{to{transform:rotate(360deg)}}</style>
|
|
</head>
|
|
<body style="margin:0;background:hsl(228 20% 10%)">
|
|
<!-- Pre-React loading screen. Lives OUTSIDE #root so React doesn't
|
|
touch it. Removed by main.tsx once the app has mounted. -->
|
|
<div id="preloader" style="position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:hsl(228 20% 10%)">
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:24px">
|
|
<div data-logo style="width:48px;height:48px;background:hsl(258 70% 60%);-webkit-mask:url(/logo.svg) center/contain no-repeat;mask:url(/logo.svg) center/contain no-repeat"></div>
|
|
<div data-spinner style="width:24px;height:24px;border:2.5px solid hsl(258 70% 60% / 0.25);border-top-color:hsl(258 70% 60%);border-radius:50%;animation:ditto-spin .7s linear infinite"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Blocking script: reads theme from localStorage and applies it
|
|
before first paint so the preloader matches the user's theme. -->
|
|
<script src="/theme.js"></script>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|