fixed doodle for mobile

index.html

@@ -72,7 +72,7 @@ <h1>anna y lin</h1>
                     <select id="select">
                         <optgroup>
                             <option selected value="center" id="d">
-                                <script>for(i=0; i < d.parentElement.parentElement.clientWidth/10;i++)d.innerHTML+=`"~._.~`</script>
+                                <script>for(i=0; i < Math.max(7, d.parentElement.parentElement.clientWidth/40);i++)d.innerHTML+=`"~._.~`</script>
                             </option>
                             <option>about</option>
                             <option>projects</option>

index.js

@@ -152,5 +152,19 @@ window.addEventListener("load", () => {
     dot.style.top = `${e.y}px`;
     dot.innerText = '.';
     document.body.appendChild(dot);
-  })
+  });
+
+  document.body.addEventListener("touchmove", (e) => {
+    if (getComputedStyle(center).display == "none") {
+      document.body.style.overflow = "visible";
+      return;
+    }
+    e.preventDefault();
+    document.body.style.overflow = "hidden";
+    const dot = document.createElement("dot");
+    dot.style.left = `${e.targetTouches[0].pageX}px`;
+    dot.style.top = `${e.targetTouches[0].pageY}px`;
+    dot.innerText = '.';
+    document.body.appendChild(dot);
+  });
 });

small.css

@@ -1,7 +1,11 @@
+body {
+  overflow-y: hidden;
+}
+
 #main {
   display: flex;
   width: 100vw;
-  height: 100%;
+  height: 100vh;
   flex-flow: column;
   justify-content: stretch; 
   align-items: center;
@@ -14,7 +18,6 @@
 #top {
   display: flex;
   width: 100%;
-  /* border: 2px solid yellow; */
   flex: 1;
   padding: 16px 12px;
   justify-content: center;
@@ -41,6 +44,10 @@
   border: 2px solid var(--default-border);
 }
 
+body {
+  overflow-y: hidden;
+}
+
 #center {
   display: flex;
   flex: 25;