reduced javascript

DDP-Projekt · Jun 10, 2024 · f4c7a38 · f4c7a38
1 parent 9402c56
commit f4c7a38
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 95 deletions.
diff --git a/assets/css/dark-mode.css b/assets/css/dark-mode.css
diff --git a/assets/css/light-mode.css b/assets/css/light-mode.css
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -3,6 +3,48 @@
 	--content-size: calc(100% - var(--sidebar-size));
 }
 
+[data-theme="dark"] {
+	--text-color: antiquewhite;
+	--link-hover-color: aliceblue;
+	--bg-color: #444;
+	--sidebar-color: #3d3d3d;
+	--article-nav-bg-color: #303336;
+	--article-nav-hover-bg-color: #3b3d41;
+	--table-border-color: #303336;
+	--table-fill-dark: #3b3c3e;
+	--table-fill-light: #3f4043;
+	--md-link-color: #86ccff;
+	--md-link-hover-color: #cce9ff;
+	--md-code-bg-color: rgba(27,31,35,.5);
+	--light-mode-filter: none;
+	--scrollbar-track-bg-color: #333;
+	--scrollbar-thumb-bg-color: #666;
+	--scrollbar-thumb-hover-bg-color: #555;
+	--hamburger-background: black;
+}
+
+[data-theme="dark"] #dark-mode-toggle { filter: invert(); }
+
+[data-theme="light"] {
+	--text-color: #454545;
+	--link-hover-color: #212121;
+	--bg-color: #fafafa;
+	--sidebar-color: #eeeeee;
+	--article-nav-bg-color: #e6e6e6;
+	--article-nav-hover-bg-color: #d9d9d9;
+	--table-border-color: #d0d7de;
+	--table-fill-dark: #f4f4f5;
+	--table-fill-light: #f8f8f8;
+	--md-link-color: #3452c5;
+	--md-link-hover-color: #0a95ff;
+	--md-code-bg-color: rgb(220 221 223 / 50%);
+	--light-mode-filter: brightness(60%) saturate(350%) drop-shadow(0px 0px gray);
+	--scrollbar-track-bg-color: #d7d7d7;
+	--scrollbar-thumb-bg-color: #b4b4b4;
+	--scrollbar-thumb-hover-bg-color: #808080;
+	--hamburger-background: #d8dbdc;
+}
+
 @font-face {
 	font-family: 'Futura';
 	src: url('/Bedienungsanleitung/fonts/Futura.ttf');
@@ -11,40 +53,44 @@
 
 /* screen width larger than 830px (desktop/tablet) */
 @media screen and (min-width: 831px) {
-	#hamburger {
+	.hamburger-btn {
 		display: none; /* eat hamburger */
 	}
 }
 
 /* screen width smaller than 830px (phone) */
 @media screen and (max-width: 830px) {
-	#hamburger {
+	.hamburger-btn {
 		position: absolute;
 		left: 0;
 		font-size: 1.5em;
 		width: 30px;
 		height: 30px;
 		text-align: center;
-		background-color: black;
+		background-color: var(--hamburger-background);
 		z-index: 2; /* make the hamburger on top of everything */
 		font-weight: normal; /* to prevent the hamburger from going bold on click*/
 		transition: left 350ms ease-in-out;
 	}
-	#hamburger.opened {
-		left: calc(var(--sidebar-size) - 35px);
+	#hamburger {
+		display: none;
+		margin: 0;
 	}
 	#seitenleiste {
 		position: absolute; /* make sidebar an overlay */
 		z-index: 1; /* make sidebar on top of content */
 		transition: width 350ms ease-in-out;
 	}
-	#seitenleiste:not(.opened) {
+	#hamburger:checked, #hamburger:checked ~ label[for=hamburger] {
+		left: calc(var(--sidebar-size) - 35px);
+	}
+	#hamburger:not(:checked) ~ #seitenleiste {
 		width: 0;
 	}
-	#seitenleiste.opened {
+	#hamburger:checked ~ #seitenleiste {
 		box-shadow: 0 0 0 100vmax rgba(16, 16, 16, 0.6);
 	}
-	:root{
+	:root {
 		--content-size: 100%;
 	}
 }
@@ -124,7 +170,6 @@ a:hover {
 
 #inhalt {
 	width: 100%;
-	left: 20%;
 	overflow: auto;
 	padding: 10px 10px 40px;
 }
@@ -144,7 +189,7 @@ a:hover {
 	margin-top: 1rem;
 }
 
-#kopf #toggles * {
+#kopf #toggles img {
 	width: 30px;
 	height: 20px;
 }

diff --git a/assets/js/darkmode-toggle.js b/assets/js/darkmode-toggle.js
@@ -1,24 +1,19 @@
 if (window.localStorage.getItem("dark-mode") === "false") {
-	document.querySelector('#dark').media = 'not all';
-	document.querySelector('#light').media = 'all';
+	document.querySelector('html').setAttribute("data-theme", "light");
 	window.localStorage.setItem("dark-mode", "false");
 } else {
-	document.querySelector('#dark').media = 'all';
-	document.querySelector('#light').media = 'not all';
+	document.querySelector('html').setAttribute("data-theme", "dark");
 	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';
+	if (document.querySelector('html').getAttribute('data-theme') === 'dark') {
+		document.querySelector('html').setAttribute("data-theme", "light");
 		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('html').setAttribute("data-theme", "dark");
 		document.querySelector('#titel').src = 'img/title.svg';
 		window.localStorage.setItem("dark-mode", "true");
 	}

diff --git a/assets/js/script.js b/assets/js/script.js
diff --git a/assets/js/todoElement.js b/assets/js/todoElement.js
@@ -12,4 +12,6 @@ class TODOElement extends HTMLElement {
 
 		this.shadowRoot.append(div);
 	}
-}
+}
+
+customElements.define('to-do', TODOElement);
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
+<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}" data-theme="dark">
 	{{ partial "head.html" . -}}
 	<body>
 		{{ partial "sidebar.html" . }}
-		<main id="inhalt" onclick="closeNav()">
+		<main id="inhalt" onclick="document.getElementById('hamburger').checked = false;">
 			{{ partial "header.html" . }}
 
 			{{ block "main" . -}}{{ end }}

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -25,15 +25,10 @@
 
 	{{- $style := resources.Get "css/style.css" | fingerprint }}
 	{{- $mdStyle := resources.Get "css/md-style.css" | fingerprint }}
-	{{- $darkStyle := resources.Get "css/dark-mode.css" | fingerprint }}
-	{{- $lightStyle := resources.Get "css/light-mode.css"  | fingerprint }}
 
 	<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="$style.Data.Integrity">
 	<link rel="stylesheet" href="{{ $mdStyle.RelPermalink }}" integrity="$mdStyle.Data.Integrity">
-	<link id="dark" rel="stylesheet" href="{{ $darkStyle.RelPermalink }}" integrity="$darkStyle.Data.Integrity" media="all">
-	<link id="light" rel="stylesheet" href="{{ $lightStyle.RelPermalink }}" integrity="$lightStyle.Data.Integrity" media="not all">
 	<script src="js/darkmode-toggle.js"></script>
 
 	<script src="js/todoElement.js" defer></script>
-	<script src="js/script.js" defer></script>
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,8 +1,9 @@
 <header id="kopf">
 	<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';
+		if (document.querySelector('html').getAttribute('data-theme') === 'light') {
+			document.querySelector('#titel').src = 'img/title-dark.svg';
+		}
 	</script>
 	<div id="toggles">
 		{{- if eq .Language.Lang "de" }} 

diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -1,4 +1,5 @@
-<span id="hamburger" class="btn" onclick="toggleNav()">≡</span>
+<input type="checkbox" id="hamburger" class="hamburger-btn">
+<label for="hamburger" class="hamburger-btn btn">≡</label>
 <nav id="seitenleiste">
 	<div style="margin: 10px;">
 		<h2 id="überschrift">{{ T "toc" }}</h2>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,6 @@ class TODOElement extends HTMLElement { @@
     		this.shadowRoot.append(div);
     	}
-    }
+    }
+    customElements.define('to-do', TODOElement);