one javascript file less 😄

DDP-Projekt · Jun 13, 2024 · 738e5d9 · 738e5d9
1 parent 5e9cf85
commit 738e5d9
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 103 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -3,7 +3,7 @@
 	--content-size: calc(100% - var(--sidebar-size));
 }
 
-[data-theme="dark"] {
+:has(#dark-mode-check:checked) {
 	--text-color: antiquewhite;
 	--link-hover-color: aliceblue;
 	--bg-color: #444;
@@ -23,9 +23,7 @@
 	--hamburger-background: black;
 }
 
-[data-theme="dark"] #dark-mode-toggle { filter: invert(); }
-
-[data-theme="light"] {
+:has(#dark-mode-check:not(:checked)) {
 	--text-color: #454545;
 	--link-hover-color: #212121;
 	--bg-color: #fafafa;
@@ -182,16 +180,32 @@ a:hover {
 }
 
 #kopf #titel {
+	background-color: var(--text-color);
+	mask: url(/Bedienungsanleitung/img/title2.svg) 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;
 }
 
 #kopf #toggles {
 	margin-top: 1rem;
 }
 
-#kopf #toggles img {
+#kopf #toggles #dark-mode-check {
+	background: url(/Bedienungsanleitung/img/theme-light-dark.svg) no-repeat center;
 	width: 30px;
 	height: 20px;
+	appearance: none;
+	cursor: pointer;
+	margin: 0;
+}
+
+#dark-mode-check:checked {
+	filter: invert();
 }
 
 #artikel {

diff --git a/assets/img/line.svg b/assets/img/line.svg
diff --git a/assets/img/title.svg b/assets/img/title.svg
diff --git a/assets/js/darkmode-toggle.js b/assets/js/darkmode-toggle.js
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}" data-theme="dark">
+<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
 	{{ partial "head.html" . -}}
 	<body>
 		{{ partial "sidebar.html" . }}
@@ -11,4 +11,10 @@
 			{{ partial "navigation.html" . }}
 		</main>
 	</body>
+	<script>
+		window.addEventListener("beforeunload", () => {
+			localStorage.setItem("sidebar-scroll", document.getElementById("seitenleiste").scrollTop);
+			localStorage.setItem("dark-mode", document.querySelector('#dark-mode-check').checked);
+		});
+	</script>
 </html>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -28,7 +28,6 @@
 
 	<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="$style.Data.Integrity">
 	<link rel="stylesheet" href="{{ $mdStyle.RelPermalink }}" integrity="$mdStyle.Data.Integrity">
-	<script src="js/darkmode-toggle.js"></script>
 
 	<script src="js/todoElement.js" defer></script>
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,16 +1,18 @@
 <header id="kopf">
-	<a href="https://ddp.le0n.dev"><img src="img/title.svg" alt="titel" id="titel"/></a>
-	<script>
-		if (document.querySelector('html').getAttribute('data-theme') === 'light') {
-			document.querySelector('#titel').src = 'img/title-dark.svg';
-		}
-	</script>
+	<s id="linie"><a href="https://ddp.le0n.dev" alt="titel" id="titel"></a></s>
 	<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>
+			<a href="{{ (index .Translations 0).Permalink}}"><img id="sprach-toggle" alt="sprach-toggle" src="img/en.svg" title="to German site" width="30" height="20"></a>
 		{{- else }}
-			<a href="{{ (index .Translations 0).Permalink}}"><img id="sprach-toggle" alt="sprach-toggle" src="img/de.svg" title="zur Englischen Seite"></a>
+			<a href="{{ (index .Translations 0).Permalink}}"><img id="sprach-toggle" alt="sprach-toggle" src="img/de.svg" title="zur Englischen Seite" width="30" height="20"></a>
 		{{- end }}
-		<img src="img/theme-light-dark.svg" alt="dark mode toggeln" id="dark-mode-toggle" class="btn" onclick="toggleDarkMode()" title="light/dark mode">
+		<input type="checkbox" id="dark-mode-check" title="light/dark mode" checked>
 	</div>
+	<script>
+		if (window.localStorage.getItem("dark-mode") === "false") {
+			document.querySelector('#dark-mode-check').checked = false;
+		} else {
+			document.querySelector('#dark-mode-check').checked = true;
+		}
+	</script>
 </header>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -41,11 +41,8 @@ <h2 id="überschrift">{{ T "toc" }}</h2>
 	</div>
 </nav>
 <script>
-	const sb = document.getElementById("seitenleiste");
 	const sbtop = localStorage.getItem("sidebar-scroll");
 	if (sbtop !== null) {
-		sb.scrollTop = parseInt(sbtop, 10);
+		document.getElementById("seitenleiste").scrollTop = parseInt(sbtop, 10);
 	}
-
-	window.addEventListener("beforeunload", () => localStorage.setItem("sidebar-scroll", sb.scrollTop));
 </script>