Port Responsive Header and Footer from Guides

[ryanlabouve]

I'm working on the 2016 Ember Community Survey landing page. It would be nice to have a responsive header since likely many of the folks viewing the survey on their mobile devices.

I did a quick port of the header from https://guides.emberjs.com/v2.3.0/ across the whole website.

Would something like this be welcomed / helpful?

A few notes:

• The guides website is using bourbon / neat and the current ember site is not.
• My port involves taking some of the compiled CSS from the guides to avoid affecting many base styles and creating potentially unwanted visual side effects on the rest of the site.
• If a more aggressive approach would be preferred (i.e. porting all of the base styles from guides and switching) I'd be happy to assist in any way helpful.

Screenshot:

[ryanlabouve]

In docs discussion, we talked about:

• including the footer in this PR
• Initially, having this opt-in until we can roll the remaining guide styles into the emberjs website.

[ryanlabouve]

Here is a GIF showing a screenshot of guides and a screenshot of the website overlaid at the width where they match pixel for pixel.

They will not line up perfectly on wider screens due to the discussed differences in grid between guides and website.

[ryanlabouve]

Updating this PR to incorporate recent changes for header on narrow screens: emberjs/guides#1306

[ryanlabouve]

Finished the changes to allow pages to opt-in to the responsive footer and header (with the help of @mixonic).

Attaching a series of GIFs to demonstrate this behavior on responsive vs. non-responsive pages.

Header non-responsive:

Header responsive:

Footer non-responsive:

Footer responsive:

Final pixel-to-pixel comparison (even showing off the stated temporary horizontal spacing difference due to different grids on guides and website):

[mixonic]

@ryanlabouve so very very close. The header between guides and the website when on mobile is a little jank still. A far worse gif than yours:

The header changes height, and the emberjs logo is centered only on the website version. I actually suggest the guides repo change to center the logo.

[ryanlabouve]

@mixonic I've made some final adjustments that should resolve this.

Since this is such a high traffic area of the website, I've made another round of comparison GIFs for to show the responsive and non-responsive version of the header compared to guides from the latest commit.

Narrow screens:

Medium screen:

Wide screens (which, as expected due to different grids, has some horizontal shifting):