Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the Royal Arms graphic in footer (v5.x) #5376

Merged
merged 1 commit into from
Oct 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,22 @@ For advice on how to use these release notes see [our guidance on staying up to

## Unreleased

### New features

#### The Royal Arms has been updated

The Royal Arms in the [GOV.UK footer](https://design-system.service.gov.uk/components/footer/) has been updated to reflect the version introduced by King Charles III.

You should ensure that the new image is being copied to your service's image assets folder if it's not being used directly from the Frontend package. By default this folder is located at `/assets/images`.

If you’re using Nunjucks, the asset path may have been changed by the `assetPath` global variable or `assetsPath` parameter on the header component.

Copy the `govuk-crest.svg` file from `/dist/assets/images` into your assets folder.

You can safely delete the old image files, named `govuk-crest.png` and `[email protected]`.

We introduced this change in [pull request #5376: Update the Royal Arms graphic in footer (v5.x)](https://github.com/alphagov/govuk-frontend/pull/5376).

### Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:
Expand Down
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 4 additions & 10 deletions packages/govuk-frontend/src/govuk/components/footer/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,9 @@
$govuk-footer-border: $govuk-border-colour;
$govuk-footer-text: $govuk-text-colour;

// Based on the govuk-crest-2x.png image dimensions.
$govuk-footer-crest-image-width-2x: 250px;
$govuk-footer-crest-image-height-2x: 204px;
// Half the 2x image so that it fits the regular 1x size.
$govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
$govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
// Royal Arms image dimensions
$govuk-footer-crest-image-width: 125px;
$govuk-footer-crest-image-height: 102px;

.govuk-footer {
@include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
Expand Down Expand Up @@ -74,10 +71,7 @@
display: inline-block;
min-width: $govuk-footer-crest-image-width;
padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
background-image: govuk-image-url("govuk-crest.png");
@include govuk-device-pixel-ratio {
background-image: govuk-image-url("govuk-crest-2x.png");
}
background-image: govuk-image-url("govuk-crest.svg");
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
Expand Down