Make blue border at the bottom of the black header full-width

[michalc]

(Hope it's ok to just... raise another PR. Let me know if no! Also the below description has been edited for posterity as the PR has been updated)

Existing GOV.UK styles sites seem to have one of two styles in terms of the blue bar

1. Exactly content width bar, just beneath the black header area (so there is white either side of the blue bar)

2. Full width blue bar beneath the black header area. This is common for documentation sites and sites that have tabs beneath the blue bar.

Before this change the blue bar was a 3rd style - a bit bigger than content width, and also "in" the black header area, so with black either side of it.

This change makes the blue bar the full-width style, since this template is more like 2. above, especially when tabs are enabled.

Note that to handle the cases of tabs enabled and tabs disabled, we have the blue bar on both the tabs element, and the header. To avoid the visual duplication, a negative margin is used. There doesn't seem to be a way of avoiding this with the material design mkdocs HTML structure.

Full-width blue bar with tabs showing

Full-width blue bar without tabs showing

[michalc]

Ah - I've just found an issue with this... when scrolling down on thinner screens the blue border scrolls with it, when it should stay visible I think:

[michalc]

Ah - fixed in the latest version of this PR:

[SoumayaMauthoorMOJ]

Hello @michalc thanks for this - please do keep raising PRs :-)

I much prefer the full-width bar when tabs are enabled but never got it to work properly when tabs are disabled.

If I apply your changes and disable the tabs the blue bar is content-width:

Is that intentional? Note that gov.uk pages without tabs e.g. https://www.gov.uk/child-benefit-abroad also have content-width blue bars, but placed below the black header. Any suggestions welcome :-)

Also would you mind adding your changes to the existing md-tabs section instead of creating a new one:

https://github.com/ministryofjustice/mkdocs-tech-docs-template/blob/9f5f909bcfa5137c408ab026d6e7cd916d56052e/tech_docs_template/assets/stylesheets/extra.css#L115

[michalc]

If I apply your changes and disable the tabs the blue bar is content-width [...] Is that intentional?

Oh! No, not intentional... hmmm...

Also would you mind adding your changes to the existing md-tabs section instead of creating a new one:

Will do

Note that gov.uk pages without tabs e.g. https://www.gov.uk/child-benefit-abroad also have content-width blue bars, but placed below the black header. Any suggestions welcome :-)

Hmmm... now I don't know what it "should" do. What do you think the ideal is here?

[michalc]

I've made a change, and in this version of the PR I've gone for always full width - and put a bit of reasoning in the commit message (some of which is essentially based on/inspired by on our comments on the blue border above)

And I think it now works in both tabs on and tabs off mode by:

• Having a border on the top of tabs. This puts a full-width border in the right place when tabs are on.
• Having the border on .md-header rather than .md-header-inner. This puts a full-width border in the right place when tabs are off.
• And to avoid two borders when in tabs on mode, a negative margin is used on the tabs element to hide the .md-header border

[SoumayaMauthoorMOJ]

v0.0.25 now released with full-width blue border and created separate #20 in case we want to change blue border when tabs are missing :-)