From e090f8df7c99a3f3e2b1a89705d9dcb062af3c20 Mon Sep 17 00:00:00 2001
From: David Allemang <david.allemang@kitware.com>
Date: Thu, 10 Sep 2026 14:09:49 -0400
Subject: [PATCH] tweak aspect ratio handling

---
 src/components.css |  5 ++---
 src/controller.js  |  2 +-
 src/diorama.js     | 10 +++++++---
 src/style.css      | 28 +++++++++++++++++++++++-----
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components.css b/src/components.css
index 2790d272..9c3441a4 100644
--- a/src/components.css
+++ b/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;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/controller.js b/src/controller.js
index b15e5554..6597f3e9 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -259,4 +259,4 @@ export class SpacetimeController {
 
         requestAnimationFrame(this.loop.bind(this));
     }
-}
\ No newline at end of file
+}
diff --git a/src/diorama.js b/src/diorama.js
index 9bcd62ac..cdd8c675 100644
--- a/src/diorama.js
+++ b/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;
     }
-}
\ No newline at end of file
+}
diff --git a/src/style.css b/src/style.css
index a648a3a5..2ba30f53 100644
--- a/src/style.css
+++ b/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%);