here we go

2025-09-19 13:58:09 -07:00 · 2025-09-19 13:58:09 -07:00 · 0235b8dbf0
commit 0235b8dbf0
parent e9439531c8
3 changed files with 32 additions and 5 deletions
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@ -9,7 +9,7 @@ export const Layout: FC = async ({ children, title }) => (
      <link rel="stylesheet" href="/css/main.css" />
      <script src="/js/main.js" async></script>
    </head>
-    <body>
+    <body data-mode="tall">
      <main>
        <div id="content">
          {children}
--- a/src/css/main.css
+++ b/src/css/main.css
@ -16,6 +16,10 @@
  --purple: #7C3AED;
  --blue: #1565C0;
  --magenta: #ff66cc;
+
+  --c64-light-blue: #6C6FF6;
+  --c64-dark-blue: #40318D;
+  --c64-light-gray: #BEBEBE;
 }

 .black {
@ -64,7 +68,8 @@ body {
  margin: 0;
  height: 100%;
  /* black bars */
-  background: black;
+  background: var(--c64-light-blue);
+  color: var(--c64-light-blue);
  display: flex;
  justify-content: center;
  align-items: center;
@ -81,8 +86,13 @@ main {
 #content {
  width: 960px;
  height: 540px;
-  background: white;
+  background: var(--c64-dark-blue);
  /* nearest-neighbor scaling */
  image-rendering: pixelated;
  transform-origin: center center;
 }
+
+body[data-mode=tall] #content {
+  height: 100%;
+  overflow-x: hidden;
+}
--- a/src/js/main.ts
+++ b/src/js/main.ts
@ -1,9 +1,26 @@
+const content = document.getElementById("content")!
+
 function resize() {
+  if (document.body.dataset.mode === "tall") {
+    resizeTall()
+  } else {
+    resizeCinema()
+  }
+}
+
+function resizeTall() {
+  const scale = Math.min(1, window.innerWidth / 960)
+  content.style.transformOrigin = 'top center'
+  content.style.transform = `scaleX(${scale})`
+}
+
+function resizeCinema() {
  const scale = Math.min(
    window.innerWidth / 960,
    window.innerHeight / 540
-  );
-  const content = document.getElementById("content")!
+  )
+
+  content.style.transformOrigin = 'center center'
  content.style.transform = `scale(${scale})`
 }