More iOS Styling

[skalnik]

A new round of iOS styling work that fixes a handful of problems and adds some improvements. Changes include:

• Footer is properly split across bottom and aligned as expected.
• Main text and footer are pushed into the "safe area" and do not overlap with the notch or home bar.
• Everything is sized to avoid scrolling if unnecessary. Currently I can scroll past the footer on my phone for no good reason. That’s fixed!
• Text is larger on iPhone and iPad.
• Fixes some small HTML issues. They weren't causing problems, but valid HTML is good.

Have some screen shots!

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/skalnik/aqi-wtf/7lm3k18oa
✅ Preview: https://aqi-wtf-git-more-ios-styling-work.skalnik.vercel.app

[skalnik]

Oh no, look like we got some footer overlap with the main text on my iPhone XS!

[skalnik]

Used even more flex box and resolved that!

[skalnik]

I wonder if I can fix the landscape scroll in that last comment by eliminating some upper padding. Also, this is useful for maybe making the notch look a bit better https://dev.to/oskarlarsson/designing-native-like-progressive-web-apps-for-ios-510o

[skalnik]

I wonder if I can fix the landscape scroll in that last comment by eliminating some upper padding.

Looking now, I don't think that will be reasonable. But that's ok, the layout is fine! Fixing the notch stuff will be nice, so I'll make that happen and then merge this.

[skalnik]

Fixing the notch stuff will be nice, so I'll make that happen and then merge this.

JK "black translucent" means that the status bar is unreadable if you get an error so I guess we'll leave it as is.