tweak aspect ratio handling

src/components.css

@@ -6,7 +6,7 @@ mc-diorama {
     display: block;
     position: relative;
     width: 100%;
-    height: 20em;
+    aspect-ratio: 16 / 9;
 
     canvas {
         display: block;
@@ -14,7 +14,6 @@ mc-diorama {
         height: 100%;
     }
 
-
     .overlay {
         position: absolute;
         inset: 0;
@@ -92,4 +91,4 @@ mc-diorama {
             pointer-events: auto;
         }
     }
-}
+}

src/controller.js

@@ -259,4 +259,4 @@ export class SpacetimeController {
 
         requestAnimationFrame(this.loop.bind(this));
     }
-}
+}

src/diorama.js

@@ -92,8 +92,12 @@ export class Diorama {
             this.target[2] + this.radius * this.viewDir[2],
         ];
 
-        const size = this.radius * 0.5;
-        mat4Ortho(this.projMatrix, -size * aspectRatio, size * aspectRatio, -size, size, -50, 50);
+        const size = this.radius / 2;
+        if (aspectRatio < 1) {
+            mat4Ortho(this.projMatrix, -size * aspectRatio, size * aspectRatio, -size, size, -50, 50);
+        } else {
+            mat4Ortho(this.projMatrix, -size, size, -size / aspectRatio, size / aspectRatio, -50, 50);
+        }
 
         mat4LookAt(
             this.viewMatrix,
@@ -105,4 +109,4 @@ export class Diorama {
 
         return this.viewProjMatrix;
     }
-}
+}

src/style.css

@@ -10,11 +10,29 @@ h1, h2, h3, h4, h5, h6, nav li, .btn {
     font-family: "Mojangles", sans-serif;
 }
 
+:root {
+    line-height: 1.5;
+    font-family: sans-serif;
+}
+
 body {
-    max-width: 70ch;
-    padding-inline: 1ch;
-    margin-inline: auto;
-    font: 1rem / 1.5 sans-serif;
+    padding-inline: 1rch;
+
+    & > main {
+        max-width: 90rch;
+        margin-inline: auto;
+
+        & > * {
+            background: rgb(from red r g b / 0.3);
+            max-width: 70rch;
+            margin-inline: auto;
+        }
+
+        & > aside {
+            max-width: 20rch;
+            float: left;
+        }
+    }
 }
 
 .tip {
@@ -56,7 +74,7 @@ pre code {
 }
 
 .callout, details, table td {
-    margin: 1em 0;
+    margin-block: 1em;
     padding: 0.5em 1ch;
     background: rgb(from currentColor r g b / 5%);
     border: 1px outset rgb(from currentColor r g b / 30%);