From e8d1823bfb3c934c98593f627d0ab7a42374ed93 Mon Sep 17 00:00:00 2001 From: Daniel Haarhoff Date: Thu, 12 Dec 2024 15:35:17 +0000 Subject: [PATCH] Make swoosh in hero compatible with language that use descenders This turns the swoosh off in `forced-colors` mode as they are the same colour. Refs: #2116 --- assets/style.css | 30 +++++++++++-------- ...-high-contrast-Visual-Regression-linux.png | 4 +-- ...Visual-Regression-no-JavaScript--linux.png | 4 +-- ...-high-contrast-Visual-Regression-linux.png | 4 +-- ...Visual-Regression-no-JavaScript--linux.png | 4 +-- ...-high-contrast-Visual-Regression-linux.png | 4 +-- ...Visual-Regression-no-JavaScript--linux.png | 4 +-- ...-high-contrast-Visual-Regression-linux.png | 4 +-- ...Visual-Regression-no-JavaScript--linux.png | 4 +-- ...-high-contrast-Visual-Regression-linux.png | 4 +-- ...Visual-Regression-no-JavaScript--linux.png | 4 +-- ...-high-contrast-Visual-Regression-linux.png | 4 +-- ...Visual-Regression-no-JavaScript--linux.png | 4 +-- 13 files changed, 41 insertions(+), 37 deletions(-) diff --git a/assets/style.css b/assets/style.css index 4b98da9c8..527e880ad 100644 --- a/assets/style.css +++ b/assets/style.css @@ -2440,20 +2440,24 @@ skip-link { position: relative; font-style: inherit; - &::after { - content: ''; - position: absolute; - block-size: var(--space-xs); - background-color: var(--color-primary); - mask-image: url('underline.svg'); - mask-repeat: no-repeat; - mask-size: 100% 100%; - inset-block-start: 84%; - inset-inline: 0; + @media (forced-colors: none) { + text-shadow: + -1px -1px 0 var(--color-background), + 1px -1px 0 var(--color-background), + -1px 1px 0 var(--color-background), + 1px 1px 0 var(--color-background); - @media (forced-colors: active) { - forced-color-adjust: none; - background-color: CanvasText; + &::after { + content: ''; + position: absolute; + z-index: -1; + block-size: var(--space-xs); + background-color: var(--color-primary); + mask-image: url('underline.svg'); + mask-repeat: no-repeat; + mask-size: 100% 100%; + inset-block-start: 84%; + inset-inline: 0; } } } diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png index c3f515e20..0466eb09b 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:92ed8a9d3c751194eebec0e1d6ce5a4b5b69a0b10b7899ceb290a2c8ef1d9795 -size 301136 +oid sha256:3342b94c8191e78c1560012875379bb2cfc0e1bfd082a535d3349d696424d3f4 +size 267846 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png index c3f515e20..0466eb09b 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:92ed8a9d3c751194eebec0e1d6ce5a4b5b69a0b10b7899ceb290a2c8ef1d9795 -size 301136 +oid sha256:3342b94c8191e78c1560012875379bb2cfc0e1bfd082a535d3349d696424d3f4 +size 267846 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png index 74b95ab6e..f149001d8 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1bc1a92d6e819972908aa1d61c3e3a0a96a0403997bb286f7b5bec0f6d81bc4a -size 119975 +oid sha256:19ff85f1dc8d1c873031378182a01a7c494e81cf0e84785eae925282351433fd +size 96421 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png index 505428864..488f5e894 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f65166d5e88ff3ee08131f88b6f43e2066fde925ea75fa587163692942d6caa0 -size 119856 +oid sha256:5313c6511339995d9b12fc07b162fba7184f2f36e907a89b0b1d2fa2f054c0ae +size 96578 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png index 97d0dab6b..596e70c9d 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cfe6cfdd49760d73ddc5a05f77d2afc259a75fd09bec7edcd2b16b2321328728 -size 117110 +oid sha256:b687c42a0dde467f83ee7a4c1419503d6dca0e1ec122b6156ea8dd7ef40fe743 +size 103124 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png index 97d0dab6b..596e70c9d 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cfe6cfdd49760d73ddc5a05f77d2afc259a75fd09bec7edcd2b16b2321328728 -size 117110 +oid sha256:b687c42a0dde467f83ee7a4c1419503d6dca0e1ec122b6156ea8dd7ef40fe743 +size 103124 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png index 38ee5dd34..a6e0099a4 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:05acabb5638c9d75b360d11a92df7511bbe4af84f5c0f68f1b2baea0b4f7b9b3 -size 80269 +oid sha256:849d7f41cfeb5f6867d2c4c7398a1433725a2a363c0f3e3e4dbbf264d8748860 +size 64307 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png index 7474994d8..3242777d5 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-empty-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e5fb9169e778d6ecf9e3720c0bbdb1ae718f76a52d1f07e74f485c929442c91b -size 80393 +oid sha256:44b563861ef802cf6d3d16d2361c0e48167467c121d858db88fc352961473792 +size 64569 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png index 188b5aa4b..39cea927b 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d3915daee49c91cb959c950cae33fb7a691aae09a2dafbd9fbad4e4de2040de -size 165626 +oid sha256:30465fca3b09a7798b6fe8573809f9b2fc6bfd00af45f051e70a84cdb64b3989 +size 145133 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png index 188b5aa4b..39cea927b 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Desktop-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3d3915daee49c91cb959c950cae33fb7a691aae09a2dafbd9fbad4e4de2040de -size 165626 +oid sha256:30465fca3b09a7798b6fe8573809f9b2fc6bfd00af45f051e70a84cdb64b3989 +size 145133 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png index 0f13d7ded..3057ab57e 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cb5cec3722c2cb9bb39959562c965edeb876287125e917148d4beb6a28033766 -size 115630 +oid sha256:a58ef78f014e9eb099072af7157b006cb769ecaab7fddef24f2c4c45e499060d +size 92982 diff --git a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png index 73afbf76a..453881aba 100644 --- a/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png +++ b/visual-regression/snapshots/home-page/home-page.spec.ts-snapshots/content-looks-right-when-reviews-can-be-requested-1-Mobile-Chrome-high-contrast-Visual-Regression-no-JavaScript--linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fa8c7922fa9db2e14039dc3d45bf29a4e1803cd35cf43540a88111b95714afa1 -size 115470 +oid sha256:9572620dbc6d9fecb466517ff9013a53d74286f80132e796160cb65e438270bf +size 93067