sites/trwnh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

hopefully fix ios aspect ratio

Browse source
This commit is contained in:
a 2022-01-14 22:23:18 -06:00
parent b9601ad2af
commit 4e86078310
1 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -26,18 +26,20 @@ h2 {font-size: 1.5em; line-height: 1.333}
p {font-size: 1em; line-height: 1.5} p {font-size: 1em; line-height: 1.5}
/* layout */ /* layout */
body {margin: auto; min-height: 100vh} body {margin: auto; min-height: 100vh}
@media (min-width: 40em) {
body {margin: 0; width: 20em}
header h1 {font-size: 1.5em}
header p {font-size: 1em}
}
header { header {
background: url(./images/sunset-bg-blue.jpg); background: url(./images/sunset-bg-blue.jpg);
background-size: contain; background-size: contain;
width: 100%; aspect-ratio: 1; background-repeat: no-repeat;
width: 100vw; height: 100vw;
padding: 1em; padding: 1em;
display: grid; grid-template-rows: 1fr auto auto display: grid; grid-template-rows: 1fr auto auto
} }
@media (min-width: 40em) {
body {margin: 0; width: 20em}
header {width: 20em; height: 20em;}
header h1 {font-size: 1.5em}
header p {font-size: 1em}
}
header h1 {grid-row: 2} header h1 {grid-row: 2}
header p {grid-row: 3} header p {grid-row: 3}
section {padding: 1rem} section {padding: 1rem}