santhoshj/style
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Santhosh Janardhanan
2026-04-12 22:44:24 -04:00
parent a12afb792e
commit 0cf703ccd9
3 changed files with 60 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/app.css
View File

@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:global(body) { :global(body) {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -8,20 +6,70 @@
color: #1f2937; color: #1f2937;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.5;
} }
:global(*) { :global(*),
:global(*::before),
:global(*::after) {
box-sizing: border-box; box-sizing: border-box;
} }
:global(h1, h2, h3, h4, h5, h6) { :global(h1, h2, h3, h4, h5, h6, p) {
margin: 0; margin: 0;
} }
:global(button) { :global(button, input, select, textarea) {
font-family: inherit; font-family: inherit;
font-size: inherit;
color: inherit;
} }
:global(textarea) { :global(select) {
font-family: inherit; appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}
:global(input[type='range']) {
appearance: none;
-webkit-appearance: none;
background: transparent;
cursor: pointer;
}
:global(input[type='range']::-webkit-slider-runnable-track) {
height: 6px;
border-radius: 3px;
background: #e5e7eb;
}
:global(input[type='range']::-webkit-slider-thumb) {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
border: 2px solid #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-top: -7px;
}
:global(input[type='range']::-moz-range-track) {
height: 6px;
border-radius: 3px;
background: #e5e7eb;
}
:global(input[type='range']::-moz-range-thumb) {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
border: 2px solid #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} }

8
src/app.html
View File

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

2
src/routes/+page.svelte
View File

@@ -304,8 +304,6 @@
input[type='range'] { input[type='range'] {
flex: 1; flex: 1;
accent-color: #3b82f6;
height: 6px;
} }
.convert-btn { .convert-btn {