{children}
diff --git a/src/css/main.css b/src/css/main.css
index df4d5df..b44e680 100644
--- 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;
}
\ No newline at end of file
diff --git a/src/js/main.ts b/src/js/main.ts
index 5dd101a..0261ce6 100644
--- 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})`
}