Stick footer at bottom of page using CSS grid

sciwhiz12 commented 2 years ago

This PR fixes #53 by implementing the solution I proposed in https://github.com/QuiltMC/quiltmc.org/issues/53#issuecomment-1194545380 to stick the footer at the bottom of the page at all times, even if the viewport is larger in height than the page height.

This leverages CSS grid to expand the main content to use the free space, and min-height[^1] to force the document body to fill the viewport at minimum, if the content doesn't stretch the page height enough to fill the viewport.

This solution is currently reliant on the fact that there are three (viewable) elements underneath <body>: the header, the main content of the page, and the footer. Comments are added to aid in fixing this in the future if this fact changes (which probably won't).

[^1]: Using min-height: 100vh on <body> is better than the most often known solution of height: 100% on <html> and <body>, as that old solution forces the height of the page to match exactly the height of the viewport.

  The newer one I implemented forces only the page height to be at minimum the height of the viewport, allowing it to naturally expand with the page content's height. See [_CSS: Do not put height 100% on html, body in 2020_](https://greggod.medium.com/css-do-not-put-height-100-on-the-body-html-e36bda3551b3) for a bit more detail.

netlify[bot] commented 2 years ago

Deploy Preview for ecstatic-booth-88897a ready!

Name	Link
Latest commit	7c66125682ab0ecc635e0b41a58434007840d10e
Latest deploy log	https://app.netlify.com/sites/ecstatic-booth-88897a/deploys/62def8e385f440000834de8b
Deploy Preview	https://deploy-preview-56--ecstatic-booth-88897a.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

gdude2002 commented 2 years ago

This looks good to me, thanks for that work. We'll just need to remember to stick with our basic layout!

QuiltMC / quiltmc.org