melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reorder head and use non-blocking font loading

Browse Source
This commit is contained in:
mkelvers
2026-06-09 18:21:16 +02:00
parent 1d4364d63e
commit 070375eaa5
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/base.gohtml
View File

@@ -3,19 +3,20 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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> <script>
const preferredTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"; const preferredTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.dataset.theme = preferredTheme; document.documentElement.dataset.theme = preferredTheme;
document.documentElement.style.colorScheme = preferredTheme; document.documentElement.style.colorScheme = preferredTheme;
</script> </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"> <link rel="stylesheet" href="/dist/tailwind.css">
<style> <style>
/* Prevent transition on load */ /* Prevent transition on load */

8
templates/login.gohtml
View File

@@ -1,7 +1,7 @@
{{define "title"}}Login{{end}} {{define "title"}}Login{{end}}
{{define "scripts"}}{{end}} {{define "scripts"}}{{end}}
{{define "content"}} {{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"> <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"> <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 Sign in to your account
@@ -21,7 +21,7 @@
placeholder="you@example.com" placeholder="you@example.com"
required required
value="{{.Username}}" 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> </div>
@@ -29,7 +29,7 @@
<label for="password" class="block font-normal text-foreground"> <label for="password" class="block font-normal text-foreground">
Password Password
</label> </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 <input
id="password" id="password"
name="password" name="password"
@@ -37,7 +37,7 @@
autocomplete="current-password" autocomplete="current-password"
placeholder="Enter your password" placeholder="Enter your password"
required 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 <button
type="button" type="button"