fix: broken HTML structure, font loading, and global form styles

- Fix app.html: was malformed with duplicate <head> tags (first one never closed)
- Move Inter font from CSS @import to <link> in app.html with preconnect for faster loading
- Add global resets for select, input, textarea, button elements
- Add custom range slider styling (cross-browser webkit + moz)
- Add custom select dropdown arrow via SVG background-image
- Remove conflicting scoped slider styles from +page.svelte
This commit is contained in:
2026-04-12 22:44:24 -04:00
parent a12afb792e
commit 0cf703ccd9
3 changed files with 60 additions and 12 deletions

View File

@@ -1,14 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<title>English Style Converter</title>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<title>English Style Converter</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
</html>