Improved UI to make it look nicer on mobile

public/index.html

@@ -110,6 +110,7 @@
               viewBox="0 10 100 70"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
+              style="@media only screen and (max-width: 600px) { viewBox: -50 10 200 100 }"
             >
               <defs>
                 <path

public/styles.css

@@ -396,6 +396,41 @@ button.selected {
   cursor: pointer;
 }
 
+@media only screen and (max-width: 600px) {
+  .properties {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 80px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .palette-selector {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    height: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+    font-family: "Martel", serif;
+  }
+
+  .wheel-header {
+    padding: 2px 16px;
+    background-color: #2f2f2f;
+    color: white;
+    text-align: center;
+  }
+}
+
 #others {
   margin-top: 2%;
   display: flex;
@@ -448,4 +483,4 @@ button.selected {
       format("truetype"),
     url("./assets/fonts/martel-v4-latin/martel-v4-latin-regular.svg#Martel")
       format("svg");
-}
+}
\ No newline at end of file

src/app.js

@@ -137,6 +137,18 @@ HTML.slider.oninput = function() {
   canvas.setStrokeRadius(this.value / 10)
 }
 
+var x = window.matchMedia(
+  "only screen and (orientation: landscape) and (max-width: 600px)",
+)
+x.addListener(() => {
+  if (x.matches) {
+    HTML.wheel.setAttribute("viewBox", "-50 10 200 100")
+    HTML.palette.setAttribute("style", "padding-top: 50px")
+  } else {
+    HTML.wheel.setAttribute("viewBox", "0 10 100 100")
+  }
+})
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")