improved resource loading

assets/css/style.css

@@ -1,6 +1,9 @@
 :root {
 	--sidebar-size: 280px;
 	--content-size: calc(100% - var(--sidebar-size));
+	--theme-toggle-img: url(/Bedienungsanleitung/img/theme-light-dark.svg);
+	--title-img: url(/Bedienungsanleitung/img/title.svg);
+	--line-img: url(/Bedienungsanleitung/img/line.svg);
 }
 
 :root:has(#dark-mode-check:checked) {
@@ -172,22 +175,22 @@ a:hover {
 
 #kopf #titel {
 	background-color: var(--text-color);
-	mask: url(/Bedienungsanleitung/img/title.svg) no-repeat center / contain;
+	mask: var(--title-img) no-repeat center / contain;
 	display: block;
 	width: clamp(310px, 60vw, 550px);
 	aspect-ratio: 9/1;
 }
 
 #linie {
-	background: url(/Bedienungsanleitung/img/line.svg) no-repeat center / contain;
+	background: var(--line-img) no-repeat center / contain;
 }
 
 #kopf #toggles {
 	margin-top: 1rem;
 }
 
 #kopf #toggles #dark-mode-check {
-	background: url(/Bedienungsanleitung/img/theme-light-dark.svg) no-repeat center;
+	background: var(--theme-toggle-img) no-repeat center;
 	width: 30px;
 	height: 20px;
 	appearance: none;

i18n/de.toml

@@ -11,4 +11,4 @@ externImpl = "Implementiert in"
 type = "Typ"
 siteLink = "zur Englischen Seite"
 ldMode = "Hell-/Dunkelmodus"
-otherFlag = "en.svg"
+otherFlag = "assets/img/en.svg"

i18n/en.toml

@@ -11,4 +11,4 @@ externImpl = "Implemented in"
 type = "Type"
 siteLink = "to German site"
 ldMode = "light/dark mode"
-otherFlag = "de.svg"
+otherFlag = "assets/img/de.svg"

layouts/partials/head.html

@@ -17,15 +17,19 @@
 	<link rel="shortcut icon" href="favicon/favicon.ico">
 
 	{{- range resources.Match "fonts/*" -}} 
-		{{.Publish}}
 		<link rel="preload" as="font" href="{{ .RelPermalink }}" type="font/ttf" crossorigin>
 	{{ end }}
-
-	{{- range resources.Match "img/*" -}} {{.Publish}} {{ end }}
-
+
+	<link rel="preload" href="/Bedienungsanleitung/img/line.svg" as="image" type="image/svg+xml">
+	<link rel="preload" href="/Bedienungsanleitung/img/theme-light-dark.svg" as="image" type="image/svg+xml">
+	<link rel="preload" href="/Bedienungsanleitung/img/title.svg" as="image" type="image/svg+xml" crossorigin>
+
+	{{- $mdStyle := resources.Get "css/md-style.css" | fingerprint }}
+	<link rel="preload" as="style" href="{{ $mdStyle.RelPermalink }}" integrity="{{ $mdStyle.Data.Integrity }}">
+
 	{{- $style := resources.Get "css/style.css" | fingerprint }}
 	<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
-	
+
 	<script defer>
 		class TODOElement extends HTMLElement {
 			constructor() {

layouts/partials/header.html

@@ -1,8 +1,8 @@
 <header id="kopf">
 	<s id="linie"><a href="https://ddp.le0n.dev" alt="titel" id="titel" title="homepage"></a></s>
 	<div id="toggles">
-		<a href="{{ (index .Translations 0).Permalink}}">
-			<img id="sprach-toggle" alt="sprach-toggle" src='img/{{ T "otherFlag" }}' title='{{ T "siteLink" }}' width="30" height="20">
+		<a href="{{ (index .Translations 0).Permalink}}" title='{{ T "siteLink" }}'>
+			{{ readFile (T "otherFlag") | safeHTML }}
 		</a>
 		<input type="checkbox" id="dark-mode-check" title='{{ T "ldMode" }}' checked>
 	</div>