diff --git a/CHANGELOG.md b/CHANGELOG.md index 9262c0751d..a539e69d84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,22 @@ For advice on how to use these release notes see [our guidance on staying up to ## Unreleased +### Breaking changes + +#### Update the GOV.UK logo + +The GOV.UK logo has been updated to merge the GOV.UK text with the crown graphic. This is to ensure that the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont fail to load. Styles relating to the logo have also been modified. + +If you're using the `govukHeader` Nunjucks macro you don't need to change anything. + +Otherwise, to update to the new logo: + +1. Remove `` and its content. +2. Remove the `` around the `svg` element. +3. Replace the `svg` element with [this updated SVG](https://github.com/alphagov/govuk-frontend/blob/06e6a56655f458112363423dc8f1fb50d21b225e/packages/govuk-frontend/src/govuk/components/header/template.njk#L14-L25), ensuring that the class name and attributes are also updated. + +This change was made in [pull request #4449: Implement transitional crown in the Header component (v5.0)](https://github.com/alphagov/govuk-frontend/pull/4449). + ### Recommended changes We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better. diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss index 3e2f64640e..0b6c47fb37 100644 --- a/packages/govuk-frontend/src/govuk/components/header/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/header/_index.scss @@ -8,7 +8,7 @@ $govuk-header-link-underline-thickness: 3px; .govuk-header { - @include govuk-font($size: 16); + @include govuk-font($size: 16, $line-height: 1); border-bottom: govuk-spacing(2) solid govuk-colour("white"); color: $govuk-header-text; @@ -34,10 +34,14 @@ .govuk-header__logotype { display: inline-block; + position: relative; + top: -3px; // Add a gap after the logo in case it's followed by a product name. This // gets removed later if the logotype is a :last-child. margin-right: govuk-spacing(1); + fill: currentcolor; + vertical-align: top; // Prevent readability backplate from obscuring underline in Windows High // Contrast Mode @@ -53,18 +57,32 @@ } } - .govuk-header__logotype-crown { - position: relative; - top: -1px; - margin-right: 1px; - fill: currentcolor; - vertical-align: top; - } - .govuk-header__product-name { + $product-name-offset: 10px; + $product-name-offset-tablet: 5px; + @include govuk-typography-responsive($size: 24, $override-line-height: 1); @include govuk-typography-weight-regular; display: inline-table; + + // Maintain space below logo when wrapped + margin-top: $product-name-offset; + + // Firefox places the GOV.UK logo one pixel higher, due to how it rounds + // subpixels, so nudge the product name in FF to still be aligned. + @-moz-document url-prefix() { + margin-top: $product-name-offset - 0.5px; + } + + // Align vertically with logo when not wrapped + vertical-align: top; + + @include govuk-media-query($from: tablet) { + margin-top: $product-name-offset-tablet; + @-moz-document url-prefix() { + margin-top: $product-name-offset-tablet - 0.5px; + } + } } .govuk-header__link { @@ -96,13 +114,11 @@ .govuk-header__link--homepage { // Font size needs to be set on the link so that the box sizing is correct // in Firefox - @include govuk-typography-weight-bold; display: inline-block; margin-right: govuk-spacing(2); font-size: 30px; // We don't have a mixin that produces 30px font size - line-height: 1; - @include govuk-media-query($from: tablet) { + @include govuk-media-query($from: desktop) { display: inline; &:focus { @@ -288,11 +304,6 @@ background: transparent; } - // Hide the inverted crown when printing in browsers that don't support SVG. - .govuk-header__logotype-crown-fallback-image { - display: none; - } - .govuk-header__link { &:link, &:visited { diff --git a/packages/govuk-frontend/src/govuk/components/header/template.njk b/packages/govuk-frontend/src/govuk/components/header/template.njk index 123a408fec..1996752f41 100644 --- a/packages/govuk-frontend/src/govuk/components/header/template.njk +++ b/packages/govuk-frontend/src/govuk/components/header/template.njk @@ -5,37 +5,24 @@