Allow for proper zoom along with correct print sizing

This commit is contained in:
Kenneth Jao 2024-06-13 00:02:19 -05:00
parent 9c2a99e602
commit 2af6f293ec

View File

@ -1,22 +1,21 @@
@media (min-aspect-ratio: 8.5/11) { /* Aspect ratio larger than 1. */ @media (min-aspect-ratio: 11/8.5) { /* Aspect ratio larger than 1. */
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%); background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%);
font-size: calc(1vh * 8.5/11);
} }
body { body {
height: 100%; width: 100rem;
aspect-ratio: 8.5/11; aspect-ratio: 8.5/11;
margin: auto; margin: auto;
} }
} }
@media (max-aspect-ratio: 8.5/11) { /* Aspect ratio less than 1 */ @media (max-aspect-ratio: 11/8.5) { /* Aspect ratio less than 1 */
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -27,7 +26,24 @@
} }
body { body {
width: 100rem;
aspect-ratio: 8.5/11;
margin: auto;
}
}
@media print {
html {
height: 100%;
width: 100%; width: 100%;
display: flex;
align-items: center;
background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%);
font-size: 1vw;
}
body {
height: 100%;
aspect-ratio: 8.5/11; aspect-ratio: 8.5/11;
margin: auto; margin: auto;
} }