restore modal animation on desktop

dist/index.html

@@ -1,35 +1,35 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
+    <head>
-    <title>Comms</title>
+        <title>Comms</title>
 
-    <meta charset="UTF-8" />
+        <meta charset="UTF-8" />
-    <meta
+        <meta
-      name="viewport"
+            name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
-    />
+        />
 
-    <meta
+        <meta
-      name="theme-color"
+            name="theme-color"
-      content="hsla(0, 0%, 100%, 100%)"
+            content="hsla(0, 0%, 100%, 100%)"
-      media="(prefers-color-scheme: light)"
+            media="(prefers-color-scheme: light)"
-    />
+        />
-    <meta
+        <meta
-      name="theme-color"
+            name="theme-color"
-      content="black"
+            content="black"
-      media="(prefers-color-scheme: dark)"
+            media="(prefers-color-scheme: dark)"
-    />
+        />
 
-    <link rel="stylesheet" href="/styles.css" />
+        <link rel="stylesheet" href="/styles.css" />
-    <link rel="stylesheet" href="/index.css" />
+        <link rel="stylesheet" href="/index.css" />
-    <link rel="manifest" href="/manifest.json" />
+        <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/icon.png" />
+        <link rel="icon" href="/icon.png" />
-    <script src="/support.js" defer></script>
+        <script src="/support.js" defer></script>
 
-    <script src="/index.js" defer></script>
+        <script src="/index.js" defer></script>
-  </head>
+    </head>
 
-  <body>
+    <body>
-    <main></main>
+        <main></main>
-  </body>
+    </body>
 </html>

dist/manifest.json

@@ -1,10 +1,10 @@
 {
-  "name": "Comms",
+    "name": "Comms",
-  "display": "fullscreen",
+    "display": "fullscreen",
-  "icons": [
+    "icons": [
-    {
+        {
-      "src": "icon.png",
+            "src": "icon.png",
-      "sizes": "any"
+            "sizes": "any"
-    }
+        }
-  ]
+    ]
 }

dist/support.js

@@ -1,32 +1,35 @@
 // TABS
 document.querySelector("main").addEventListener("scroll", () => {
-  const links = document.querySelectorAll(".tab-link");
+    const links = document.querySelectorAll(".tab-link");
-  links.forEach((element) => element.removeAttribute("active"));
+    links.forEach((element) => element.removeAttribute("active"));
 
-  const pageWidth = document.querySelector("main > article").offsetWidth;
+    const pageWidth = document.querySelector("main > article").offsetWidth;
-  const scroll = document.querySelector("main").scrollLeft;
+    const scroll = document.querySelector("main").scrollLeft;
-  const currentPage = Math.round(scroll / pageWidth);
+    const currentPage = Math.round(scroll / pageWidth);
 
-  if (links[currentPage]) links[currentPage].setAttribute("active", "");
+    if (links[currentPage]) links[currentPage].setAttribute("active", "");
 });
 
 // SERVICE WORKER
 async function registerServiceWorker() {
-  if ("serviceWorker" in navigator) {
+    if ("serviceWorker" in navigator) {
-    try {
+        try {
-      const registration = await navigator.serviceWorker.register("/sw.js", {
+            const registration = await navigator.serviceWorker.register(
-        scope: "/",
+                "/sw.js",
-      });
+                {
-      if (registration.installing) {
+                    scope: "/",
-        setTimeout(() => window.location.reload(), 500);
+                },
-      } else if (registration.active) {
+            );
-        console.log("Service worker active");
+            if (registration.installing) {
-        registration.update();
+                setTimeout(() => window.location.reload(), 500);
-      }
+            } else if (registration.active) {
-    } catch (error) {
+                console.log("Service worker active");
-      console.error(`Could not install service worker: ${error}`);
+                registration.update();
+            }
+        } catch (error) {
+            console.error(`Could not install service worker: ${error}`);
+        }
     }
-  }
 }
 
 registerServiceWorker();

dist/sw.js

@@ -1,31 +1,32 @@
 const CACHE_VERSION = "v2";
 
 self.addEventListener("fetch", (event) => {
-  event.respondWith(handleRequest(event));
+    event.respondWith(handleRequest(event));
 });
 
 async function handleRequest(event) {
-  const response = await getFromCache(event);
+    const response = await getFromCache(event);
-  if (response) {
+    if (response) {
-    fetchAndCache(event); // Call this but don't await, allowing the cache to update in the background
+        fetchAndCache(event); // Call this but don't await, allowing the cache to update in the background
-    return response;
+        return response;
-  }
+    }
-  return fetchAndCache(event);
+    return fetchAndCache(event);
 }
 
 async function getFromCache(event) {
-  const request = event.request;
+    const request = event.request;
-  const cache = await caches.open(CACHE_VERSION);
+    const cache = await caches.open(CACHE_VERSION);
-  const response = await cache.match(request);
+    const response = await cache.match(request);
-  return response;
+    return response;
 }
 
 async function fetchAndCache(event) {
-  const request = event.request;
+    const request = event.request;
-  const response = await fetch(request);
+    const response = await fetch(request);
-  if (response.status === 200) { // Only cache successful responses
+    if (response.status === 200) {
-    const cache = await caches.open(CACHE_VERSION);
+        // Only cache successful responses
-    cache.put(request, response.clone());
+        const cache = await caches.open(CACHE_VERSION);
-  }
+        cache.put(request, response.clone());
-  return response;
+    }
+    return response;
 }