made title an svg, removing need for font

assets/css/style.css

@@ -1,14 +1,6 @@
 :root {
 	--sidebar-size: 250px;
 	--content-size: calc(100% - var(--sidebar-size));
-	--de-underline-flag-url: url("/Bedienungsanleitung/img/de-flagge.png");
-}
-
-/* fonts */
-@font-face {
-	font-family: 'Trump Bold';
-	src: url('/Bedienungsanleitung/fonts/FetteTrumpDeutsch.ttf');
-	font-display: swap;
 }
 
 @font-face {
@@ -152,46 +144,15 @@ a:hover {
 }
 
 #kopf {
-	font-family: 'Trump Bold', serif;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
 
-#kopf h1 {
-	font-size: min(2em, 4vw);
-	margin-bottom: 0;
-	line-height: 1;
-	background: bottom var(--de-underline-flag-url) no-repeat;
-	background-size: 100% 2px;
-	padding-bottom: 2px;
-
-	/* um den unterstrich bei buchstaben, die drüber gehen würden abzubrechen */
-	text-shadow:
-		2px 2px var(--bg-color),
-		2px -2px var(--bg-color),
-		-2px 2px var(--bg-color),
-		-2px -2px var(--bg-color);
-}
-
-/* "Bedienungsanleitung" */
-#untertitel {
-	font-size: min(1em, 2.5vw);
-	display: flex;
-	align-items: center;
-}
-
-/* dünne linien neben dem Untertitel */
-.linie {
-	width: 3vmin;
-	height: 1px;
-	border: none;
-	margin: 0.5em;
-	background-color: rgba(250, 235, 215, 0.5);
-}
-
-#kopf p {
-	margin: 5px 0 5px 0;
+#kopf #titel {
+	width: clamp(310px, 60vw, 550px);
+	padding-top: 1rem;
+	padding-bottom: 5px;
 }
 
 #kopf #toggles * {

assets/js/darkmode-toggle.js

@@ -1,21 +1,25 @@
 if (window.localStorage.getItem("dark-mode") === "false") {
-	document.querySelector('#dark').media = "not all";
-	document.querySelector('#light').media = "all";
+	document.querySelector('#dark').media = 'not all';
+	document.querySelector('#light').media = 'all';
+	window.localStorage.setItem("dark-mode", "false");
 } else {
-	document.querySelector('#dark').media = "all";
-	document.querySelector('#light').media = "not all";
+	document.querySelector('#dark').media = 'all';
+	document.querySelector('#light').media = 'not all';
+	window.localStorage.setItem("dark-mode", "true");
 }
 
 function toggleDarkMode() {
 	let isDark = document.querySelector('#dark').media === 'all';
 	if (isDark) {
 		document.querySelector('#dark').media = 'not all';
 		document.querySelector('#light').media = 'all';
+		document.querySelector('#titel').src = 'img/title-dark.svg';
 		window.localStorage.setItem("dark-mode", "false");
 	}
 	else {
 		document.querySelector('#dark').media = 'all';
 		document.querySelector('#light').media = 'not all';
+		document.querySelector('#titel').src = 'img/title.svg';
 		window.localStorage.setItem("dark-mode", "true");
 	}
 }

layouts/partials/header.html

@@ -1,10 +1,9 @@
 <header id="kopf">
-	<h1><a href="https://ddp.le0n.dev">Die Deutsche Programmiersprache</a></h1>
-	<div id="untertitel">
-		<hr class="linie">
-		<p>Bedienungsanleitung</p>
-		<hr class="linie">
-	</div>
+	<a href="https://ddp.le0n.dev"><img src="img/title.svg" alt="titel" id="titel"/></a>
+	<script>
+		let isDark = document.querySelector('#dark').media === 'all';	
+		document.querySelector('#titel').src = !isDark ? 'img/title-dark.svg' : 'img/title.svg';
+	</script>
 	<div id="toggles">
 		{{- if eq .Language.Lang "de" }} 
 			<a href="{{ (index .Translations 0).Permalink}}"><img id="sprach-toggle" alt="sprach-toggle" src="img/en.svg" title="to German site"></a>