mobile fixed and mogged

nginx/vue/src/components/Overlay.vue

@@ -6,8 +6,11 @@
 
 <style scoped>
 .overlay {
-    position: absolute;
-    inset: 0; /* full width & height of parent */
-    pointer-events: none; /* overlay does not block clicks */
+    position: fixed; /* not absolute */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
 }
 </style>

nginx/vue/src/components/backgrounds/Halftone.vue

@@ -4,12 +4,13 @@
 
 <style scoped>
 div {
-    width: 100vw;
-    height: 100vh;
     position: fixed;
-    left: 0px;
-    top: 0px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: -1;
+    object-fit: cover; /* optional if it’s an img background */
 }
 
 .halftone {

nginx/vue/src/views/Home.vue

@@ -42,10 +42,27 @@ import Overlay from "@/components/Overlay.vue";
 <style scoped>
 .grid {
     display: grid;
-    grid-gap: 10px;
+    grid-gap: 5px;
     grid-template-columns: repeat(10, 1fr);
     grid-template-rows: repeat(10, 1fr);
 }
+.ov4 {
+    position: fixed; /* instead of absolute */
+    bottom: 0;
+    right: 0;
+    width: 250px; /* keeps size fixed */
+}
+
+@media (max-width: 850px) {
+    .grid {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    .ov4 {
+        width: 100px; /* keeps size fixed */
+    }
+}
 
 .intro {
     grid-column: 1 / span 6;
@@ -110,12 +127,6 @@ import Overlay from "@/components/Overlay.vue";
     bottom: -50px;
     left: -200px;
 }
-.ov4 {
-    width: 250px;
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
-}
 .ov5 {
     height: 100px;
     position: absolute;