WIP: Restructure page to put sidenav on top of footer

[BrittanyIRL]

Overview

The sidenav was previously overlapping with the footer but really we want the sidenav to end on top of the footer. Addressing this change forced some structural updates to keep the header and side nav fixed but allow the different scroll for sidenav vs article and footer.

Updates

• Moving the header and footer outside of the main tag to separate html spaces.
• This also allows more natural breakage for the fixed header + fixed sidebar with the docs to fill as much space as necessary and then scroll to the footer.
• By making this move for the header/footer so that the <main> is just the nav and the articles we can more readily have the required fixed full 100vh <aside> when on docs and hide it on other pages. I tried a few ways of doing this and to me this was the most legible for future updates and the least convoluted.

Secondary updates to accommodate the switch to keep the sidenav above the footer

• While doing this I also adjusted the footer spacing and font size to match zeplin docs
• As well addressing the padding inconsistency between docs and gallery vs about pages
• Footer height should be 365px not 256px according to zeplin docs
• left page gutter needs to account for stripes width on smaller view ports given the updates i made to allow the fixed scroll with footer below.

Testing

• pull and run branch:
  • scroll through docs and see that in desktop the footer and aside do not overlap
  • on gallery and about see that the side nav does not show up on large viewports
  • view mobile size viewport and see that the sidenav is a drawer for all three pages and still does not overlap with the footer (I kinda feel like this might be better to actually overlap on top of the footer in this case but opted for initial consistency)

Screen shots

[boygirl]

@BrittanyIRL I noticed that once the footer is scrolled into view, it only scrolls out of view if you are scrolling on the footer. If you mouse up and scroll on the article, the footer remains in view while the article scrolls under it:

Same with trying to scroll the sidebar while the footer is showing

[BrittanyIRL]

@BrittanyIRL I noticed that once the footer is scrolled into view, it only scrolls out of view if you are scrolling on the footer. If you mouse up and scroll on the article, the footer remains in view while the article scrolls under it:

Same with trying to scroll the sidebar while the footer is showing

yeah i agree that's not sufficient and i will work to fix it. Is the structure right though? Like, is this right if the scroll was fluid and didn't get stuck?

[boygirl]

I think so, but after talking with Phil and Joe this past week, I think there are going to be a few changes to how the sidebar works across our docs, so it might be best to hold off on this work until that is finalized.

[BrittanyIRL]

I think so, but after talking with Phil and Joe this past week, I think there are going to be a few changes to how the sidebar works across our docs, so it might be best to hold off on this work until that is finalized.

Ok sounds good. I'll go ahead and close this PR.