4 files changed, 198 insertions, 0 deletions
diff --git a/assets/index.css b/assets/index.css
new file mode 100644
index 0000000..96e775c
--- /dev/null
+++ b/assets/index.css
@@ -0,0 +1,125 @@
+:root {
+    color-scheme: dark light;
+}
+
+@media screen {
+    body {
+        max-width: min(calc(100vw - 1rem), 58rem);
+        min-height: calc(100vh - 1rem);
+        box-sizing: border-box;
+        margin: 0.5rem auto;
+        display: grid;
+        grid: "head" auto "main" auto "footer" 1fr / auto;
+    }
+    body>header {
+        grid-area: head;
+    }
+     :is(header, footer) {
+        background-color: rgb(139 0 0);
+        font-weight: bold;
+        color: rgb(255 255 255);
+        padding: 1rem;
+    }
+     :is(header, footer) *:any-link {
+        text-decoration: none;
+    }
+    body>footer {
+        align-self: end;
+        grid-area: footer;
+    }
+    body>main {
+        margin: 0.5rem 0;
+        grid-area: main;
+        hyphens: auto;
+    }
+}
+
+* :any-link {
+    color: inherit;
+    text-decoration: underline;
+}
+
+* .header-anchor:any-link{
+	text-decoration: inherit;
+}
+
+* .header-anchor:any-link:hover,
+* .header-anchor:any-link:active {
+        font-style: inherit;
+}
+
+@media screen {
+    * :any-link:hover,
+    * :any-link:active {
+        font-style: italic;
+    }
+}
+
+a[href^="mailto:"]::after {
+    content: "📧";
+}
+
+.err {
+    color: rgb(139 0 0);
+}
+
+aside {
+    width: 40%;
+    padding: 0.5rem;
+    margin-left: 0.5rem;
+    float: right;
+    background-color: rgb(139 0 0);
+    color: rgb(255 255 255);
+}
+
+iframe,
+img,
+input,
+select,
+textarea {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+:is(iframe, img, input, select, textarea).side {
+    max-width: 40%;
+    padding: 0.5rem;
+    float: right;
+}
+
+@media screen and (max-width: 30rem) {
+     :is(iframe, img, input, select, textarea).side {
+        width: 100%;
+        float: none;
+    }
+}
+
+@media screen {
+    nav>a {
+        margin-right: 1rem;
+        padding-left: 0;
+        padding-right: 0;
+    }
+    @media (max-width: 30rem) {
+        nav>a {
+            display: block;
+            margin: auto;
+            text-align: center;
+            padding: 16px;
+        }
+        nav>a.navlinks {
+            display: none;
+        }
+        nav>a.navlinks.navopen {
+            display: block;
+        }
+    }
+}
+
+@media print {
+    header,
+    footer {
+        display: none;
+    }
+}
diff --git a/assets/index.js b/assets/index.js
new file mode 100644
index 0000000..f2f8def
--- /dev/null
+++ b/assets/index.js
@@ -0,0 +1,12 @@
+document.getElementById("nav-toogle").addEventListener("click", async() => {
+    const navlinks = Array.from(document.getElementsByClassName("navlinks"));
+    for (const navlink of navlinks) {
+        navlink.classList.toggle("navopen");
+    }
+    return false;
+});
+window.addEventListener("load", async() => {
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("/sw.js", { type: "module" });
+    }
+});
+\ No newline at end of file
diff --git a/assets/mandle.png b/assets/mandle.png
new file mode 100644
index 0000000..c1195fd
--- /dev/null
+++ b/assets/mandle.png
diff --git a/assets/sw.js b/assets/sw.js
new file mode 100644
index 0000000..e6b6538
--- /dev/null
+++ b/assets/sw.js
@@ -0,0 +1,61 @@
+import metadata from "/assets/metadata.js"
+
+const data = metadata()
+
+const sw_cache = {
+    offline: "/offline.html",
+    default: [
+        "/assets/index.css",
+        "/vendor/prism.css",
+        "/assets/index.js",
+        "/favicon/icon.svg",
+        "/offline.html",
+    ],
+    store: data.version,
+};
+
+(function() {
+    self.addEventListener("install", event => {
+        self.skipWaiting();
+        event.waitUntil((async() => {
+            const cache = await self.caches.open(sw_cache.store);
+            return cache.addAll(sw_cache.default);
+        })());
+    });
+
+    self.addEventListener("activate", event => {
+        event.waitUntil((async() => {
+            const keys = await self.caches.keys();
+            return Promise.all(keys.map(key => {
+                if (key !== sw_cache.store) {
+                    return self.caches.delete(key);
+                }
+            }));
+        })());
+    });
+
+    self.addEventListener("fetch", event => {
+        event.respondWith((async() => {
+            if (event.request.method != "GET") {
+                return fetch(event.request);
+            }
+
+            const req_url = new URL(event.request.url);
+            if (req_url.origin != self.location.origin) {
+                return fetch(event.request);
+            }
+
+            const cacheres = await self.caches.match(event.request);
+            return cacheres || (async() => {
+                try {
+                    const response = await self.fetch(event.request);
+                    const cache = await self.caches.open(sw_cache.store);
+                    cache.put(event.request, response.clone());
+                    return response;
+                } catch {
+                    return self.caches.match(sw_cache.offline);
+                }
+            })();
+        })());
+    });
+})();
+\ No newline at end of file