Fix footer not always sticking to the bottom

[flowirtz]

When the page content is fairly small, the footer doesn't stick to the bottom of the page.

In this case we want the footer to be at the bottom of the viewport, not floating above it as seen.

[geekayush]

@fwirtz Hey! I am taking this up.

[flowirtz]

Hey @geekayush that's amazing, thanks!

Please make sure to work off the v1 branch here: https://github.com/openclimatefix/openclimatefix.github.io/tree/v1

I'll move that into master hopefully on Wednesday.

[flowirtz]

Hey @geekayush, would you still like to work on this? 😊

[flowirtz]

Hey @geekayush I'll unassign you for now, feel free to ping me if you want to pick it up again.

[ollicle]

The CSS necessary to make this happen:

html,
body,
#___gatsby,
#gatsby-focus-wrapper  {
  height: 100%;
}

 #gatsby-focus-wrapper {
  display: flex;
  flex-direction: column;
}

main {
  flex: auto;
}

I’ll leave it to someone who knows their way around tailwind and/or react to implement :)

[ollicle]

Alternatively with CSS grid:

html,
body,
#___gatsby,
#gatsby-focus-wrapper  {
  height: 100%;
}

#gatsby-focus-wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

[geekayush]

@fwirtz Got stuck up into some important work. I am taking this up.
@ollicle Hey, Thanks!

[flowirtz]

@geekayush ah even better! Thanks so much. No worries at all. I appreciate your help!