Deploying to gh-pages from @ 47d85ec 🚀

arcadeperfect · Nov 27, 2024 · d09378b · d09378b
1 parent f38ba56
commit d09378b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 52 deletions.
diff --git a/index.html b/index.html
@@ -1,45 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bevy Vaporwave</title>
     <link rel="stylesheet" href="styles.css">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap"
-        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap" rel="stylesheet">
 </head>
 
 <body class="color-scheme-home">
-    <script>
-        window.addEventListener('DOMContentLoaded', (event) => {
-            // Find the canvas element created by Bevy
-            const canvas = document.querySelector('canvas');
-            if (canvas) {
-                // Save the original focus method
-                const originalFocus = canvas.focus.bind(canvas);
-                // Override the focus method to include preventScroll
-                canvas.focus = function(options) {
-                    if (!options || typeof options !== 'object') {
-                        options = { preventScroll: true };
-                    } else {
-                        options.preventScroll = true;
-                    }
-                    originalFocus(options);
-                };
-            }
-        });
-    </script>
     <div class="grid">
         <div class="main-column">
-            <!-- <a href="https://alexharding.ooo" class="back-arrow">alexharding.ooo</a> <a href="https://bsky.app/profile/alexharding.bsky.social" class="back-arrow">bluesky</a> -->
             <span class="nav-links">
                 <a href="https://alexharding.ooo" class="nice-links">alexharding.ooo</a>
                 &nbsp;&nbsp;&nbsp;
                 <a href="https://bsky.app/profile/alexharding.bsky.social" class="nice-links">bluesky</a>
             </span>
             <h1 class="main-heading">Bevy Vaporwave</h1>
-            <div id="wasm-container"></div>
+            <div id="wasm-container" tabindex="-1"></div>
             <br>
             <h2><a href="https://github.com/arcadeperfect/bevy_vaporwave">Github</a></h2>
             <br>
@@ -86,22 +64,30 @@ <h2>Blender Workflow</h2>
             </span>
             <br>
             <br>
-
         </div>
-
-    </div>
     </div>
 
     <script type="module">
         import init from './out/bevy_vaporwave.js';
 
         async function run() {
-            const wasmContainer = document.getElementById('wasm-container');
+            window.scrollTo(0, 0);
 
+            const wasmContainer = document.getElementById('wasm-container');
+
             const observer = new MutationObserver((mutations) => {
                 for (let mutation of mutations) {
                     for (let node of mutation.addedNodes) {
                         if (node.tagName === 'CANVAS') {
+                            node.setAttribute('tabindex', '-1');
+
+                            const originalFocus = node.focus.bind(node);
+                            node.focus = function() {
+                                const scrollPos = window.scrollY;
+                                originalFocus();
+                                requestAnimationFrame(() => window.scrollTo(0, scrollPos));
+                            };
+
                             node.style.width = '100%';
                             node.style.height = '100%';
                             wasmContainer.appendChild(node);
@@ -116,8 +102,15 @@ <h2>Blender Workflow</h2>
             await init();
         }
 
-        run();
+        if ('scrollRestoration' in history) {
+            history.scrollRestoration = 'manual';
+        }
+
+        if (document.readyState === 'complete') {
+            run();
+        } else {
+            window.addEventListener('load', run);
+        }
     </script>
 </body>
-
-</html>
+</html>
diff --git a/styles.css b/styles.css
@@ -1,5 +1,3 @@
-/* CSS File */
-
 :root {
     --base-main-bg: black;
     --base-main-text: rgb(35, 174, 151);
@@ -15,8 +13,6 @@
     --accent-main: #1fe0ac;
 }
 
-/* Alternate Color Schemes omitted for brevity */
-
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap');
 
 /* RESET */
@@ -28,20 +24,14 @@
 }
 
 html {
-    /* Remove smooth scrolling */
-    scroll-behavior: auto;
-    /* Prevent automatic scroll anchoring */
+    scroll-behavior: auto !important;
     overflow-anchor: none;
 }
 
-/* Ensure the page content starts at the top */
 body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    /* Force initial scroll position */
-    position: relative;
-    top: 0;
 }
 
 body {
@@ -64,7 +54,7 @@ p, h1, h2, h3, h4, h5, h6 {
 
 a {
     text-decoration: none;
-    color: var(--link) !important; /* Override the .main-column a color */
+    color: var(--link) !important;
 }
 
 ul {
@@ -99,7 +89,7 @@ p {
 .main-column {
     background-color: var(--base-main-bg);
     color: var(--base-main-text);
-    padding: 20px 100px 0 20px; /* top right bottom left */
+    padding: 20px 100px 0 20px;
 }
 
 .main-column a {
@@ -112,7 +102,6 @@ p {
 .main-column ol,
 .main-column li {
     max-width: 750px;
-    /* Text is aligned to the left by default */
 }
 
 li {
@@ -143,6 +132,7 @@ a:hover {
     height: 0;
     padding-bottom: 56.25%;
     position: relative;
+    isolation: isolate;
 }
 
 #wasm-container canvas {
@@ -151,6 +141,13 @@ a:hover {
     left: 0;
     width: 100%;
     height: 100%;
+    outline: none;
+    touch-action: none;
+}
+
+#wasm-container:focus,
+#wasm-container canvas:focus {
+    outline: none;
 }
 
 /* VIDEO WRAPPER */
@@ -159,7 +156,7 @@ a:hover {
     width: 100%;
     max-width: 750px;
     margin: 20px 0;
-    aspect-ratio: 16 / 9; /* Maintains the aspect ratio */
+    aspect-ratio: 16 / 9;
     overflow: hidden;
 }
 
@@ -187,8 +184,8 @@ a:hover {
     .video-wrapper {
         width: 100%;
         max-width: 100%;
-        margin: 10px 0; /* Adjusted for smaller screens */
-        padding-bottom: 56.25%; /* Ensure aspect ratio is maintained */
+        margin: 10px 0;
+        padding-bottom: 56.25%;
     }
 
     .main-column p,
@@ -201,10 +198,9 @@ a:hover {
 
 .nice-links {
     text-decoration: none;
-    color: var(--link) !important; /* Override the .main-column a color */
+    color: var(--link) !important;
     font-size: 20px;
     display: inline;
     position: static;
-    margin-left: 4px;  /* Align with heading */
-}
-
+    margin-left: 4px;
+}