fix: local fonts via @fontsource, favicon, autocomplete attrs

- Replace Google Fonts with @fontsource/dm-sans and @fontsource/jetbrains-mono
- Add SVG favicon
- Add autocomplete attributes to login/setup form inputs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-20 00:13:21 +03:00
parent 786fe5ec3d
commit f9c41faf16
7 changed files with 49 additions and 9 deletions
+28
View File
@@ -13,6 +13,8 @@
"@codemirror/state": "^6.6.0",
"@codemirror/theme-one-dark": "^6.1.3",
"@codemirror/view": "^6.40.0",
"@fontsource/dm-sans": "^5.2.8",
"@fontsource/jetbrains-mono": "^5.2.8",
"@mdi/js": "^7.4.47",
"codemirror": "^6.0.2"
},
@@ -602,6 +604,22 @@
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
"dev": true
},
"node_modules/@fontsource/dm-sans": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
"integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/jetbrains-mono": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@internationalized/date": {
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
@@ -2851,6 +2869,16 @@
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
"dev": true
},
"@fontsource/dm-sans": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
"integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA=="
},
"@fontsource/jetbrains-mono": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ=="
},
"@internationalized/date": {
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
+2
View File
@@ -34,6 +34,8 @@
"@codemirror/state": "^6.6.0",
"@codemirror/theme-one-dark": "^6.1.3",
"@codemirror/view": "^6.40.0",
"@fontsource/dm-sans": "^5.2.8",
"@fontsource/jetbrains-mono": "^5.2.8",
"@mdi/js": "^7.4.47",
"codemirror": "^6.0.2"
}
+10 -2
View File
@@ -1,3 +1,11 @@
@import '@fontsource/dm-sans/300.css';
@import '@fontsource/dm-sans/400.css';
@import '@fontsource/dm-sans/500.css';
@import '@fontsource/dm-sans/600.css';
@import '@fontsource/dm-sans/700.css';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/500.css';
@import '@fontsource/jetbrains-mono/600.css';
@import 'tailwindcss';
@theme {
@@ -23,8 +31,8 @@
--color-glow-strong: rgba(13, 148, 136, 0.3);
--color-sidebar: #ffffff;
--color-sidebar-active: rgba(13, 148, 136, 0.08);
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
--radius: 0.625rem;
}
-3
View File
@@ -4,9 +4,6 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<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=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<title>Notify Bridge</title>
%sveltekit.head%
</head>
+2 -2
View File
@@ -28,11 +28,11 @@
<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }} class="space-y-4">
<div>
<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.username')}</label>
<input type="text" bind:value={username} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
<input type="text" bind:value={username} autocomplete="username" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
</div>
<div>
<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.password')}</label>
<input type="password" bind:value={password} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
<input type="password" bind:value={password} autocomplete="current-password" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
</div>
{#if error}
+2 -2
View File
@@ -29,11 +29,11 @@
<form onsubmit={(e) => { e.preventDefault(); handleSetup(); }} class="space-y-4">
<div>
<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.username')}</label>
<input type="text" bind:value={username} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
<input type="text" bind:value={username} autocomplete="username" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
</div>
<div>
<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.password')}</label>
<input type="password" bind:value={password} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required minlength="6" />
<input type="password" bind:value={password} autocomplete="new-password" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required minlength="6" />
</div>
{#if error}
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="6" fill="#0d9488"/>
<path d="M8 12l8-5 8 5v10l-8 5-8-5z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>
<circle cx="16" cy="17" r="3" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 277 B