defunkt/nose-pluto
1
0
Fork 0
Code Issues Pull Requests Activity

here we go

Browse Source
This commit is contained in:
Chris Wanstrath 2025-09-19 13:58:09 -07:00
parent e9439531c8
commit 0235b8dbf0
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout.tsx
View File

@ -9,7 +9,7 @@ export const Layout: FC = async ({ children, title }) => (
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<script src="/js/main.js" async></script> <script src="/js/main.js" async></script>
</head> </head>
<body> <body data-mode="tall">
<main> <main>
<div id="content"> <div id="content">
{children} {children}

14
src/css/main.css
View File

@ -16,6 +16,10 @@
--purple: #7C3AED; --purple: #7C3AED;
--blue: #1565C0; --blue: #1565C0;
--magenta: #ff66cc; --magenta: #ff66cc;
--c64-light-blue: #6C6FF6;
--c64-dark-blue: #40318D;
--c64-light-gray: #BEBEBE;
} }
.black { .black {
@ -64,7 +68,8 @@ body {
margin: 0; margin: 0;
height: 100%; height: 100%;
/* black bars */ /* black bars */
background: black; background: var(--c64-light-blue);
color: var(--c64-light-blue);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -81,8 +86,13 @@ main {
#content { #content {
width: 960px; width: 960px;
height: 540px; height: 540px;
background: white; background: var(--c64-dark-blue);
/* nearest-neighbor scaling */ /* nearest-neighbor scaling */
image-rendering: pixelated; image-rendering: pixelated;
transform-origin: center center; transform-origin: center center;
} }
body[data-mode=tall] #content {
height: 100%;
overflow-x: hidden;
}

21
src/js/main.ts
View File

@ -1,9 +1,26 @@
const content = document.getElementById("content")!
function resize() { 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( const scale = Math.min(
window.innerWidth / 960, window.innerWidth / 960,
window.innerHeight / 540 window.innerHeight / 540
); )
const content = document.getElementById("content")!
content.style.transformOrigin = 'center center'
content.style.transform = `scale(${scale})` content.style.transform = `scale(${scale})`
} }