Update layout of Elements website to give demos more room

[amyhupe]

What

Update layout of Elements website to give component demos more width so they display a desktop version by default, on desktop.

Why

At the moment, demos display at tablet width by default. We've seen in user research that this is confusing for some users who are looking for a desktop version of a component.

We also know this is the most common view for most of our products' users, who most often access journal sites on desktop.

Done when

• [x] New layout has been designed
• [x] Layout designs have been reviewed by @sturobson and @amyhupe
• [x] New layout has been implemented

Anything else

Prototype on sketch (increases max page width to 1240px)

[foxintherain]

[amyhupe]

This looks good to me James, thanks. @sturobson any comments from you or could we start work on this?

[sturobson]

I did some preliminary fudging in the browser developer tools. I can probably pick this up later today. Shouldn't take too long.

[sturobson]

Ah … there is a couple of things …

• are we going with the style refresh? header background colour change, navigation colour change?
• What happens to "Page Title"

Or … is this first pass just widening the 'page'?

[foxintherain]

I think we can just widen the page for now, and look at the other changes after we've done the prototype testing

[sturobson]

before, at 1080px wide:

after, at 1248px wide: