Made elements responsive

jobtalle · Jun 7, 2023 · 098940f · 098940f
1 parent 3baf6f4
commit 098940f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/js/sdfMaker.js b/js/sdfMaker.js
@@ -157,9 +157,10 @@ export class SDFMaker {
             if (this.#outputImage) {
                 const wasVisible = this.#previewVisible;
                 const previewRect = previewCanvas.getBoundingClientRect();
+                const previewScale = SDFMaker.#SIZE / previewRect.width;
 
-                this.#previewX = event.clientX - previewRect.left;
-                this.#previewY = event.clientY - previewRect.top;
+                this.#previewX = (event.clientX - previewRect.left) * previewScale;
+                this.#previewY = (event.clientY - previewRect.top) * previewScale;
 
                 this.#previewVisible =
                     this.#previewX > -SDFMaker.#PREVIEW_RADIUS &&

diff --git a/style.css b/style.css
@@ -4,6 +4,7 @@
     --link: #de5840;
     --background: #3d4549;
     --size: 500px;
+    --padding: 8px;
 }
 
 body {
@@ -12,6 +13,8 @@ body {
     color: var(--bright);
     display: flex;
     justify-content: center;
+    margin: 0;
+    overflow-x: hidden;
 }
 
 body a {
@@ -32,14 +35,10 @@ button {
     width: 100%;
 }
 
-.panel {
-    border: 1px solid var(--bright);
-    padding: 8px;
-}
-
 #wrapper {
     display: flex;
     flex-direction: column;
+    max-width: 100%;
 }
 
 #wrapper h1 {
@@ -57,22 +56,29 @@ button {
 #columns {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .column > .panel {
-    margin: 4px;
+    border: 1px solid var(--bright);
+    padding: var(--padding);
+    margin: var(--padding);
+    max-width: calc(100vw - 4 * var(--padding));
 }
 
 #input {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    flex-wrap: wrap;
     gap: 16px;
 }
 
 #input-left {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: var(--size);
+    max-width: calc(100% - 4 * var(--padding));
 }
 
 #input-right {
@@ -91,6 +97,7 @@ button {
     position: absolute;
     pointer-events: none;
     width: var(--size);
+    max-width: 100%;
 }
 
 #input-target {