Correct aspect ratio

This commit is contained in:
Giulio De Pasquale 2022-12-07 19:08:40 +01:00
parent 4cebf9c081
commit 310783f382
2 changed files with 37 additions and 3 deletions

32
dist/css/style.css vendored
View File

@ -602,6 +602,14 @@ video {
display: none; display: none;
} }
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@ -678,6 +686,26 @@ video {
width: 75%; width: 75%;
} }
.w-1\/2 {
width: 50%;
}
.w-1\/3 {
width: 33.333333%;
}
.w-2\/3 {
width: 66.666667%;
}
.w-2\/5 {
width: 40%;
}
.w-3\/5 {
width: 60%;
}
.max-w-full { .max-w-full {
max-width: 100%; max-width: 100%;
} }
@ -763,3 +791,7 @@ video {
.will-change-contents { .will-change-contents {
will-change: contents; will-change: contents;
} }
.hover\:cursor-none:hover {
cursor: none;
}

6
dist/index.html vendored
View File

@ -1,3 +1,4 @@
<html>
<head> <head>
<link rel="stylesheet" href="/css/98.css"> <link rel="stylesheet" href="/css/98.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
@ -5,7 +6,7 @@
<body class="bg-gray-800 max-h-screen max-w-screen overflow-auto"> <body class="bg-gray-800 max-h-screen max-w-screen overflow-auto">
<div class="flex h-screen w-screen"> <div class="flex h-screen w-screen">
<div class="window container h-3/4 w-3/4 m-auto"> <div class="window container aspect-[4/3] max-h-screen w-3/5 m-auto">
<div class="title-bar" style="height: 3%;"> <div class="title-bar" style="height: 3%;">
<div class="title-bar-text">Doom 95</div> <div class="title-bar-text">Doom 95</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
@ -16,7 +17,7 @@
</div> </div>
<div class="window-body m-0" style="height: 97%;"> <div class="window-body m-0" style="height: 97%;">
<canvas class="h-full w-full m-0" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1" /> <canvas class="h-full w-full m-0 hover:cursor-none" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1" />
<script> <script>
var commonArgs = [ var commonArgs = [
"-iwad", "-iwad",
@ -100,3 +101,4 @@
</div></div> </div></div>
</div> </div>
</body> </body>
</html>