Adjust for mobile and HTML5/ECMAScript2023

_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>

_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 }}">

_sass/_block-alert.scss

@@ -16,7 +16,7 @@ alert.block {
 }
 
 alert::before {
-	content: "✅";
+	content: "📌";
 
 	position: absolute;
 	top: 0px;
@@ -38,48 +38,61 @@ alert::before {
 }
 
 alert.block[data-type*="good"] {
-	border-color: oklch(75.52%, 0.1158, 150.35);
+	border-color: oklch(60.0% 0.75 150.0);
-	background: oklch(54.45%, 0.1158, 150.35);
+	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);
+	border-color: oklch(60.0% 0.2568 29.234);
-	background: oklch(52.37%, 0.1576, 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);
+	border-color: oklch(69.41% 0.138 238.24);
-	background: oklch(49.11%, 0.0785, 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);
+	border-color: oklch(69.41% 0.138 238.24);
-	background: oklch(49.11%, 0.0785, 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);
+	border-color: oklch(71.76% 0.187 49.76);
-	background: oklch(52.65%, 0.113, 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);
+	border-color: oklch(62.8% 0.2568 29.234);
-	background: oklch(52.37%, 0.1576, 29.234);
+	background: oklch(52.37% 0.1576 29.234);
 }
 alert[data-type*="error"]::before {
 	content: "❌";

assets/js/navigation.mjs

@@ -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();
-	});
-}

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");