From a4e9ca3ee56b129845528484083554bca2699232 Mon Sep 17 00:00:00 2001 From: Simon Worthington Date: Mon, 1 Sep 2025 11:11:23 +0100 Subject: [PATCH] Copy GOV.UK change to use masks for footer image In https://github.com/alphagov/govuk-frontend/commit/4c8d91acacf9d14dcc7e485fbf7e0f699ca441ad GOV.UK Frontend moved to using the Royal Arms as a mask, which allows it to copy the current colour of the text, which in theory is more accessible. So to get our own logo to display there, we need to copy that decision by overriding the mask image in browsers that support it, and setting the background on the ::before psudeo-element instead of the link itself. --- .../assets/docs/component-sheet-selector.html | 2 +- lib/importer/assets/docs/component-table-view.html | 2 +- lib/importer/assets/docs/configuration.html | 2 +- lib/importer/assets/docs/docs.css | 11 ++++++++--- lib/importer/assets/docs/how-it-works.html | 2 +- lib/importer/assets/docs/index.html | 2 +- lib/importer/assets/docs/pattern-tabular-data.html | 2 +- lib/importer/assets/docs/what-it-is.html | 2 +- prototypes/basic/app/assets/sass/application.scss | 10 +++++++--- prototypes/basic/app/views/layouts/footer.html | 2 +- 10 files changed, 23 insertions(+), 14 deletions(-) diff --git a/lib/importer/assets/docs/component-sheet-selector.html b/lib/importer/assets/docs/component-sheet-selector.html index 500aea9e..f172a4bc 100644 --- a/lib/importer/assets/docs/component-sheet-selector.html +++ b/lib/importer/assets/docs/component-sheet-selector.html @@ -523,7 +523,7 @@

Accessibility

diff --git a/lib/importer/assets/docs/component-table-view.html b/lib/importer/assets/docs/component-table-view.html index 9634f436..fcd638fd 100644 --- a/lib/importer/assets/docs/component-table-view.html +++ b/lib/importer/assets/docs/component-table-view.html @@ -323,7 +323,7 @@

When to not use this component

diff --git a/lib/importer/assets/docs/configuration.html b/lib/importer/assets/docs/configuration.html index 9dc9c504..90527bd9 100644 --- a/lib/importer/assets/docs/configuration.html +++ b/lib/importer/assets/docs/configuration.html @@ -305,7 +305,7 @@

Specifying spreadsheet upload path

diff --git a/lib/importer/assets/docs/docs.css b/lib/importer/assets/docs/docs.css index 6a48a0f2..fef140f2 100644 --- a/lib/importer/assets/docs/docs.css +++ b/lib/importer/assets/docs/docs.css @@ -84,10 +84,15 @@ table.selectable tr.validation-error:last-child::before { border-bottom-left-radius: 10px; } -.rd-logo { +.rd-logo::before { background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - background-position-y: -18px; +} + +@supports (mask-position: initial) { + .rd-logo::before { + mask-image: url('data:image/svg+xml,'); + background-image: none; + } } .feature-grid { diff --git a/lib/importer/assets/docs/how-it-works.html b/lib/importer/assets/docs/how-it-works.html index f47ae4cf..73aa6d87 100644 --- a/lib/importer/assets/docs/how-it-works.html +++ b/lib/importer/assets/docs/how-it-works.html @@ -171,7 +171,7 @@

For users:

diff --git a/lib/importer/assets/docs/index.html b/lib/importer/assets/docs/index.html index ce7d311d..5f61f73b 100644 --- a/lib/importer/assets/docs/index.html +++ b/lib/importer/assets/docs/index.html @@ -182,7 +182,7 @@

About the Data Upload Design Kit

diff --git a/lib/importer/assets/docs/pattern-tabular-data.html b/lib/importer/assets/docs/pattern-tabular-data.html index 9f67e447..397fa55a 100644 --- a/lib/importer/assets/docs/pattern-tabular-data.html +++ b/lib/importer/assets/docs/pattern-tabular-data.html @@ -532,7 +532,7 @@

User receives receipt of upload

diff --git a/lib/importer/assets/docs/what-it-is.html b/lib/importer/assets/docs/what-it-is.html index 832a1a78..3516a466 100644 --- a/lib/importer/assets/docs/what-it-is.html +++ b/lib/importer/assets/docs/what-it-is.html @@ -144,7 +144,7 @@

Who created it?

diff --git a/prototypes/basic/app/assets/sass/application.scss b/prototypes/basic/app/assets/sass/application.scss index c378ea87..7e39c51c 100644 --- a/prototypes/basic/app/assets/sass/application.scss +++ b/prototypes/basic/app/assets/sass/application.scss @@ -9,12 +9,16 @@ font-family: Helvetica, Arial, sans-serif !important; } -.rd-logo { +.rd-logo::before { background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - background-position-y: -18px; } +@supports (mask-position: initial) { + .rd-logo::before { + mask-image: url('data:image/svg+xml,'); + background-image: none; + } +} .govuk-header__logotype { display: none; diff --git a/prototypes/basic/app/views/layouts/footer.html b/prototypes/basic/app/views/layouts/footer.html index 7e618a08..080b8dc5 100644 --- a/prototypes/basic/app/views/layouts/footer.html +++ b/prototypes/basic/app/views/layouts/footer.html @@ -33,7 +33,7 @@

Support links