Adjust for mobile and HTML5/ECMAScript2023

This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2024-09-07 11:32:43 +02:00
parent 0c9b9f61b9
commit d051309253
5 changed files with 41 additions and 38 deletions
+8
View File
@@ -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>
+1 -6
View File
@@ -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 }}">
<link rel="stylesheet" href="{{ site.xaymar.data.assets | absolute_url }}/js/highlightjs/styles/default.min.css?ts={{ site.time | date_to_xmlschema }}">
+27 -14
View File
@@ -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: "";
}
}
-18
View File
@@ -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();
});
}
+5
View File
@@ -0,0 +1,5 @@
//import("js/navigation.mjs");
import("./js/lazyload.mjs");
import("./js/highlight.mjs");
import("./js/mediaplayer.mjs");
import("./js/mediabox.mjs");