diff --git a/lib/assets/stylesheets/_core.scss b/lib/assets/stylesheets/_core.scss index fa0f9b06..ba6227d5 100644 --- a/lib/assets/stylesheets/_core.scss +++ b/lib/assets/stylesheets/_core.scss @@ -6,6 +6,7 @@ @import "modules/anchored-heading"; @import "modules/app-pane"; @import "modules/footer"; +@import "modules/header"; @import "modules/page-review"; @import "modules/search"; @import "modules/contribution-banner"; diff --git a/lib/assets/stylesheets/modules/_header.scss b/lib/assets/stylesheets/modules/_header.scss new file mode 100644 index 00000000..088d276f --- /dev/null +++ b/lib/assets/stylesheets/modules/_header.scss @@ -0,0 +1,16 @@ +.app-header { + // Adjust the padding on the header container so that it matches the custom sidebar. + .govuk-header__container--full-width { + @include govuk-responsive-padding(6, "left"); + @include govuk-responsive-padding(6, "right"); + } + // Give the product name in the header more space so it does not wrap early on smaller screens. + @include govuk-media-query($from: desktop) { + .govuk-header__logo { + width: 45%; + } + .govuk-header__content { + width: 55%; + } + } +} diff --git a/lib/assets/stylesheets/modules/_search.scss b/lib/assets/stylesheets/modules/_search.scss index 6640b4b3..b3f14ef8 100644 --- a/lib/assets/stylesheets/modules/_search.scss +++ b/lib/assets/stylesheets/modules/_search.scss @@ -43,7 +43,7 @@ html.has-search-results-open { -webkit-overflow-scrolling: touch; -ms-overflow-style: none; @include govuk-media-query(tablet) { - padding: 22px 20px 0 30px; + padding: govuk-spacing(6); top: 0; // The width of the sidebar left: 330px; diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss index 568f5cc8..8c3cdee5 100644 --- a/lib/assets/stylesheets/modules/_technical-documentation.scss +++ b/lib/assets/stylesheets/modules/_technical-documentation.scss @@ -8,9 +8,7 @@ color: $govuk-text-colour; @include govuk-media-query(tablet) { - // We add 2 pixels to the gutter here to ensure there's sufficient spacing between - // an anchor link (see _anchored-heading.scss) on a heading and the left-hand pane. - margin: 0 govuk-spacing(6) (govuk-spacing(6) + 2px); + margin: 0 govuk-spacing(6) govuk-spacing(6); } .has-search-results-open & { diff --git a/lib/assets/stylesheets/modules/_toc.scss b/lib/assets/stylesheets/modules/_toc.scss index f6e1ccbd..c2896a07 100644 --- a/lib/assets/stylesheets/modules/_toc.scss +++ b/lib/assets/stylesheets/modules/_toc.scss @@ -18,7 +18,7 @@ a:link, a:visited { display: block; position: relative; - padding: 8px govuk-spacing(6) 8px govuk-spacing(3); + padding: 8px govuk-spacing(6) 8px govuk-spacing(2); margin: 0 -1 * govuk-spacing(3); border-left: 5px solid transparent; text-decoration: none; @@ -93,7 +93,7 @@ @include govuk-media-query(tablet) { .toc { - padding: 22px govuk-spacing(6) govuk-spacing(3) + padding: govuk-spacing(5) govuk-spacing(6); } // Prevent the fixedsticky spacer from appearing if the browser is resized diff --git a/lib/source/layouts/_header.erb b/lib/source/layouts/_header.erb index 8b5130f1..94c1bfce 100644 --- a/lib/source/layouts/_header.erb +++ b/lib/source/layouts/_header.erb @@ -1,4 +1,4 @@ -