From d051309253db2ad92a5cc6c170de802931e27bf7 Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Sat, 7 Sep 2024 11:32:43 +0200
Subject: [PATCH] Adjust for mobile and HTML5/ECMAScript2023

---
 _includes/page_end.liquid   |  8 ++++++++
 _includes/page_start.liquid |  7 +------
 _sass/_block-alert.scss     | 41 ++++++++++++++++++++++++-------------
 assets/js/navigation.mjs    | 18 ----------------
 assets/site.js              |  5 +++++
 5 files changed, 41 insertions(+), 38 deletions(-)
 delete mode 100644 assets/js/navigation.mjs

diff --git a/_includes/page_end.liquid b/_includes/page_end.liquid
index 20e37a0..e491956 100644
--- a/_includes/page_end.liquid
+++ b/_includes/page_end.liquid
@@ -1,4 +1,12 @@
 		</div>
 		{% include footer.liquid %}
 	</body>
+	<script>
+		(function() {
+			// Support for Mobile Devices
+			document.querySelector("#navigation-toggle").addEventListener("click", (ev) => {
+				document.querySelector("#header #navigation").classList.toggle("open");
+			});
+		})();
+	</script>
 </html>
diff --git a/_includes/page_start.liquid b/_includes/page_start.liquid
index 3db4e42..4620209 100644
--- a/_includes/page_start.liquid
+++ b/_includes/page_start.liquid
@@ -55,10 +55,5 @@
 		<!-- Code, Fonts, Styles -->
 		<link rel="stylesheet" href="{{ site.xaymar.data.fonts | absolute_url }}?ts={{ site.time | date_to_xmlschema }}">
 		<link rel="stylesheet" href="{{ site.xaymar.data.css | absolute_url }}?ts={{ site.time | date_to_xmlschema }}">
-		<script defer src="{{ site.xaymar.data.assets | absolute_url }}/js/lazyload.mjs?ts={{ site.time | date_to_xmlschema }}"></script>
-		<script defer src="{{ site.xaymar.data.assets | absolute_url }}/js/navigation.mjs?ts={{ site.time | date_to_xmlschema }}"></script>
-		<script defer src="{{ site.xaymar.data.assets | absolute_url }}/js/mediaPlayer.mjs?ts={{ site.time | date_to_xmlschema }}"></script>
-		<script defer src="{{ site.xaymar.data.assets | absolute_url }}/js/highlight.mjs?ts={{ site.time | date_to_xmlschema }}"></script>
 		<script defer src="{{ site.xaymar.data.js | absolute_url }}?ts={{ site.time | date_to_xmlschema }}"></script>
-		<!-- Highlight.js: https://highlightjs.org/ -->
-		<link rel="stylesheet" href="{{ site.xaymar.data.assets | absolute_url }}/js/highlightjs/styles/default.min.css?ts={{ site.time | date_to_xmlschema }}">
\ No newline at end of file
+		<link rel="stylesheet" href="{{ site.xaymar.data.assets | absolute_url }}/js/highlightjs/styles/default.min.css?ts={{ site.time | date_to_xmlschema }}">
diff --git a/_sass/_block-alert.scss b/_sass/_block-alert.scss
index ff5a00b..f8dcb0e 100644
--- a/_sass/_block-alert.scss
+++ b/_sass/_block-alert.scss
@@ -16,7 +16,7 @@ alert.block {
 }
 
 alert::before {
-	content: "✅";
+	content: "📌";
 
 	position: absolute;
 	top: 0px;
@@ -38,49 +38,62 @@ alert::before {
 }
 
 alert.block[data-type*="good"] {
-	border-color: oklch(75.52%, 0.1158, 150.35);
-	background: oklch(54.45%, 0.1158, 150.35);
+	border-color: oklch(60.0% 0.75 150.0);
+	background: oklch(30.0% 0.75 150.0);
 }
 alert[data-type*="good"]::before {
 	content: "👍";
 }
 
 alert.block[data-type*="bad"] {
-	border-color: oklch(62.8%, 0.2568, 29.234);
-	background: oklch(52.37%, 0.1576, 29.234);
+	border-color: oklch(60.0% 0.2568 29.234);
+	background: oklch(30.00% 0.2576 29.234);
 }
 alert[data-type*="bad"]::before {
 	content: "👎";
 }
 
+alert.block[data-type*="info"] {
+	border-color: oklch(69.41% 0.138 238.24);
+	background: oklch(45.00% 0.0785 238.24);
+}
+alert[data-type*="info"]::before {
+	content: "ℹ";
+	border: 2px solid black;
+	margin: .5rem;
+	min-width: 3rem;
+	min-height: 3rem;
+	background: #0078d7;
+}
+
 alert.block[data-type*="hint"] {
-	border-color: oklch(69.41%, 0.138, 238.24);
-	background: oklch(49.11%, 0.0785, 238.24);
+	border-color: oklch(69.41% 0.138 238.24);
+	background: oklch(45.00% 0.0785 238.24);
 }
 alert[data-type*="hint"]::before {
 	content: "❔";
 }
 
 alert.block[data-type*="notice"] {
-	border-color: oklch(69.41%, 0.138, 238.24);
-	background: oklch(49.11%, 0.0785, 238.24);
+	border-color: oklch(69.41% 0.138 238.24);
+	background: oklch(49.11% 0.0785 238.24);
 }
 alert[data-type*="notice"]::before {
 	content: "🔍";
 }
 
 alert.block[data-type*="warning"] {
-	border-color: oklch(71.76%, 0.187, 49.76);
-	background: oklch(52.65%, 0.113, 49.76);
+	border-color: oklch(71.76% 0.187 49.76);
+	background: oklch(52.65% 0.113 49.76);
 }
 alert[data-type*="warning"]::before {
 	content: "⚠";
 }
 
 alert.block[data-type*="error"] {
-	border-color: oklch(62.8%, 0.2568, 29.234);
-	background: oklch(52.37%, 0.1576, 29.234);
+	border-color: oklch(62.8% 0.2568 29.234);
+	background: oklch(52.37% 0.1576 29.234);
 }
 alert[data-type*="error"]::before {
 	content: "❌";
-}
\ No newline at end of file
+}
diff --git a/assets/js/navigation.mjs b/assets/js/navigation.mjs
deleted file mode 100644
index 31e2d4c..0000000
--- a/assets/js/navigation.mjs
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict';
-
-function addNavigationControl() {
-	// Support for Mobile Devices
-	document.querySelector("#navigation-toggle").addEventListener("click", (ev) => {
-		document.querySelector("#header #navigation").classList.toggle("open");
-	});
-}
-
-if (document.readyState === "complete"
-	|| document.readyState === "loaded"
-	|| document.readyState === "interactive") {
-	addNavigationControl();
-} else {
-	document.addEventListener('DOMContentLoaded', () => {
-		addNavigationControl();
-	});
-}
\ No newline at end of file
diff --git a/assets/site.js b/assets/site.js
index e69de29..a064cd6 100644
--- a/assets/site.js
+++ b/assets/site.js
@@ -0,0 +1,5 @@
+//import("js/navigation.mjs");
+import("./js/lazyload.mjs");
+import("./js/highlight.mjs");
+import("./js/mediaplayer.mjs");
+import("./js/mediabox.mjs");