adds responsive padding

hiddenist · Nov 24, 2023 · 21d3948 · 21d3948
1 parent 4947b9d
commit 21d3948
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
@@ -9,5 +9,7 @@ function main() {
   if (!root) {
     throw new Error("Root element not found")
   }
-  new WebDrawingApp(root, 500, 500)
+  const width = Math.min(window.innerWidth, 500)
+  const height = Math.min(window.innerHeight, 500)
+  new WebDrawingApp(root, width, height)
 }
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
@@ -28,3 +28,17 @@ canvas {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   cursor: none;
 }
+
+@media (max-width: 564px) {
+  main {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media (max-height: 564px) {
+  main {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
diff --git a/libs/webgl/src/WebDrawingApp.ts b/libs/webgl/src/WebDrawingApp.ts
@@ -4,7 +4,7 @@ import { VectorArray } from "./types/arrays"
 
 export class WebDrawingApp {
   public readonly canvas: HTMLCanvasElement
-  private engine: DrawingEngine
+  public readonly engine: DrawingEngine
 
   constructor(
     private readonly root: HTMLElement,