Add support for the expaned black bar

[alfonsomunozpomer]

I can see in

EBI-Framework/js/ebi-global-includes/script/4_ebiFrameworkContent.js

Line 92 in e7a786a

barContents.innerHTML = '<nav class="row">'+

that #masthead-black-bar is wrapped in a row div. I think that adding support for #masthead-black-bar-expanded would be simple enough. I can do a PR if you want.

From a personal standpoint I’m not a big supporter of the expanded layout, but we use it in Expression Atlas.

[khawkins98]

So the idea is to use expand the masthead black bar when the content has also been expanded?

I guess this does look a little silly:

For discussion, what if you didn't expand all of the page (dropping .expanded from the intro text and local masthead; like this:

How does that feel?

(Trying to see if we don't have to add documentation for how and when to expand the global masthead)

[alfonsomunozpomer]

To be honest, I don’t like it that much, but I’ll show it around my team to see what everybody thinks. I think expanding the black bar looks better and gives the page a more balanced look:

[khawkins98]

I get that having the header and intro text centred atop the 100% width feels like an unbalanced pyramid. But I'm also thinking about the homepage where that intro text caaannnn geeeettttt awfullllly wiiiiiide -- certainly it's not an optimal line length for readability.

We could add some responsive classes to complement small- medium- large- (1200px), like: xlarge- (1400px) and xxlarge- (1800px)

Which would allow something like (xxlarge-6):

Useful?

[alfonsomunozpomer]

I don’t want to be picky, but we’re now discussing a different issue altogether. As I said I’m not a big fan of the expanded layout myself, but before redesigning or changing the layout of our site, I was asking what seems a simple alternative style for the black bar.

As a sidenote, I’ve noticed that certain views in GitHub itself use such a thing: