quartz
Code Issues

fix: win height not being full on mobile

Browse Source
This commit is contained in:
ruinivist
2026-03-29 10:31:44 +00:00
parent 23272666ff
commit 001b872638
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quartz/styles/base.scss
+10
View File
@@ -21,6 +21,10 @@ body {
background-color: var(--light); background-color: var(--light);
font-family: var(--bodyFont); font-family: var(--bodyFont);
color: var(--darkgray); color: var(--darkgray);
@media all and ($mobile) {
min-height: 100dvh;
}
} }
.text-highlight { .text-highlight {
@@ -162,6 +166,11 @@ a {
.page { .page {
max-width: calc(#{map.get($breakpoints, desktop)} + 300px); max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
margin: 0 auto; margin: 0 auto;
@media all and ($mobile) {
min-height: 100dvh;
}
& article { & article {
& > h1 { & > h1 {
font-size: 2rem; font-size: 2rem;
@@ -204,6 +213,7 @@ a {
grid-template-areas: #{map.get($tabletGrid, templateAreas)}; grid-template-areas: #{map.get($tabletGrid, templateAreas)};
} }
@media all and ($mobile) { @media all and ($mobile) {
min-height: 100dvh;
grid-template-columns: #{map.get($mobileGrid, templateColumns)}; grid-template-columns: #{map.get($mobileGrid, templateColumns)};
grid-template-rows: #{map.get($mobileGrid, templateRows)}; grid-template-rows: #{map.get($mobileGrid, templateRows)};
column-gap: #{map.get($mobileGrid, columnGap)}; column-gap: #{map.get($mobileGrid, columnGap)};