refactor: reorder head and use non-blocking font loading

This commit is contained in:
2026-06-09 18:21:16 +02:00
parent 1d4364d63e
commit 070375eaa5
2 changed files with 11 additions and 10 deletions

View File

@@ -3,19 +3,20 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyAnimeList: {{template "title" .}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap">
{{/* page title injected from child template */}}
<title>MyAnimeList: {{template "title" .}}</title>
<link rel="manifest" href="/static/assets/manifest.json">
<link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg">
<script>
const preferredTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.dataset.theme = preferredTheme;
document.documentElement.style.colorScheme = preferredTheme;
</script>
<link rel="manifest" href="/static/assets/manifest.json">
<link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"></noscript>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap"></noscript>
<link rel="stylesheet" href="/dist/tailwind.css">
<style>
/* Prevent transition on load */

View File

@@ -1,7 +1,7 @@
{{define "title"}}Login{{end}}
{{define "scripts"}}{{end}}
{{define "content"}}
<main class="flex min-h-dvh items-center justify-center bg-[url(/static/images/background.png)] bg-cover bg-center px-3 py-4 sm:px-4 sm:py-8">
<main class="flex min-h-dvh items-center justify-center bg-background px-3 py-4 sm:px-4 sm:py-8">
<div class="mx-auto w-full max-w-125 bg-background-surface px-5 pb-6 pt-7 shadow-sm sm:px-8 sm:pb-8 sm:pt-11 lg:px-12">
<h1 class="mb-6 text-2xl font-normal leading-tight tracking-[-0.02em] text-foreground sm:mb-8 sm:text-3xl sm:leading-none">
Sign in to your account
@@ -21,7 +21,7 @@
placeholder="you@example.com"
required
value="{{.Username}}"
class="h-10 w-full bg-background-surface px-3 text-foreground outline-none transition focus:ring-1 focus:ring-accent rounded-none!"
class="h-10 w-full bg-background-surface px-3 text-foreground outline-none transition focus:ring-1 focus:ring-accent "
/>
</div>
@@ -29,7 +29,7 @@
<label for="password" class="block font-normal text-foreground">
Password
</label>
<div class="flex h-10 w-full bg-background-surface transition focus-within:ring-1 focus-within:ring-accent rounded-none!">
<div class="flex h-10 w-full bg-background-surface transition focus-within:ring-1 focus-within:ring-accent ">
<input
id="password"
name="password"
@@ -37,7 +37,7 @@
autocomplete="current-password"
placeholder="Enter your password"
required
class="min-w-0 flex-1 bg-transparent px-3 text-foreground outline-none rounded-none!"
class="min-w-0 flex-1 bg-transparent px-3 text-foreground outline-none "
/>
<button
type="button"