From f6befb782e385b13b51aca65e087da6743e0431f Mon Sep 17 00:00:00 2001 From: Aaron Jorbin Date: Fri, 27 Oct 2023 17:01:50 +0000 Subject: [PATCH] Help/About: Improve Accessibility, RTL, Internationalization, and Responsiveness of about pages. Tweaks the 6.4 about pages in a couple of ways: - Decouples the background from the 6.4 logo so the logo can move for RTL. - Updates a color to improve color contrast. - Help prevent overlap of long text strings with 6.4 logo. - Ensure background isn't dark when no background is used on mobile. Props nudge, jorbin, afercia, sumitsingh, sabernhardt. See #59289, #59664. git-svn-id: https://develop.svn.wordpress.org/trunk@57018 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/about.css | 31 ++++++++++--------- src/wp-admin/freedoms.php | 2 +- src/wp-admin/images/about-header-about.svg | 29 ++++++----------- .../images/about-header-background.svg | 11 +++++++ .../images/about-header-contribute.svg | 29 ++++++----------- src/wp-admin/images/about-header-credits.svg | 29 ++++++----------- src/wp-admin/images/about-header-freedoms.svg | 29 ++++++----------- src/wp-admin/images/about-header-privacy.svg | 29 ++++++----------- 8 files changed, 78 insertions(+), 111 deletions(-) create mode 100644 src/wp-admin/images/about-header-background.svg diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index f3f49234be..ff140ac50e 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -21,7 +21,7 @@ .about__container { /* Section backgrounds */ - --background: #151515; + --background: #EAE9E7; --subtle-background: #EAE9E7; /* Main text color */ @@ -29,7 +29,7 @@ --text-light: #fff; /* Accent colors: used in header, on special classes. */ - --accent-1: #D8613C; /* Link color */ + --accent-1: #C94C26; /* Link color */ --accent-2: #CFCABE; /* Accent background */ --accent-3: #f0f0f1; /* hr background */ --accent-4: #B1C5A4; /* Light green */ @@ -538,28 +538,30 @@ justify-content: end; box-sizing: border-box; padding: var(--gap) 0; - min-height: 420px; + height: clamp(12.5rem, -1.25rem + 36.67vw, 26.25rem); color: var(--text-light); - background: var(--background) url('../images/about-header-about.svg?ver=6.4') no-repeat; - background-size: cover; - background-position: center; + background-image: url('../images/about-header-about.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4'); + background-size: auto 70%, cover; border-radius: 5px; + background-repeat: no-repeat; + background-position: right 7% center, top left; + background-color: var(--background); } .credits-php .about__header { - background-image: url('../images/about-header-credits.svg?ver=6.4'); + background-image: url('../images/about-header-credits.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4'); } .freedoms-php .about__header { - background-image: url('../images/about-header-freedoms.svg?ver=6.4'); + background-image: url('../images/about-header-freedoms.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4'); } .privacy-php .about__header { - background-image: url('../images/about-header-privacy.svg?ver=6.4'); + background-image: url('../images/about-header-privacy.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4'); } .contribute-php .about__header { - background-image: url('../images/about-header-contribute.svg?ver=6.4'); + background-image: url('../images/about-header-contribute.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4'); } .about__header-image { @@ -568,8 +570,9 @@ .about__header-title { box-sizing: border-box; - margin: 0 calc(var(--gap) + 3rem); + margin: 0 calc(var(--gap) + 2rem); padding: 0; + max-width: 55%; } .about__header-title h1 { @@ -581,6 +584,7 @@ font-weight: 600; } +.about-php .about__header-title h1, .credits-php .about__header-title h1, .freedoms-php .about__header-title h1, .privacy-php .about__header-title h1, @@ -645,11 +649,8 @@ } @media screen and (max-width: 960px) { - .about__header-title h1 { - /* Fluid font size scales on browser size 600px - 960px. */ - font-size: clamp(3rem, 13.33vw - 2rem, 6rem); - } + .about-php .about__header-title h1, .credits-php .about__header-title h1, .freedoms-php .about__header-title h1, .privacy-php .about__header-title h1, diff --git a/src/wp-admin/freedoms.php b/src/wp-admin/freedoms.php index bbe4fb60ad..b227735ebf 100644 --- a/src/wp-admin/freedoms.php +++ b/src/wp-admin/freedoms.php @@ -25,7 +25,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
-
+

diff --git a/src/wp-admin/images/about-header-about.svg b/src/wp-admin/images/about-header-about.svg index 65a10188ba..0da51e0c44 100644 --- a/src/wp-admin/images/about-header-about.svg +++ b/src/wp-admin/images/about-header-about.svg @@ -1,20 +1,11 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/src/wp-admin/images/about-header-background.svg b/src/wp-admin/images/about-header-background.svg new file mode 100644 index 0000000000..016948c2f2 --- /dev/null +++ b/src/wp-admin/images/about-header-background.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/wp-admin/images/about-header-contribute.svg b/src/wp-admin/images/about-header-contribute.svg index d83960982e..6750365682 100644 --- a/src/wp-admin/images/about-header-contribute.svg +++ b/src/wp-admin/images/about-header-contribute.svg @@ -1,20 +1,11 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/src/wp-admin/images/about-header-credits.svg b/src/wp-admin/images/about-header-credits.svg index 41aff17044..fa910d7d28 100644 --- a/src/wp-admin/images/about-header-credits.svg +++ b/src/wp-admin/images/about-header-credits.svg @@ -1,20 +1,11 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/src/wp-admin/images/about-header-freedoms.svg b/src/wp-admin/images/about-header-freedoms.svg index a2be230265..14172b2ef1 100644 --- a/src/wp-admin/images/about-header-freedoms.svg +++ b/src/wp-admin/images/about-header-freedoms.svg @@ -1,20 +1,11 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/src/wp-admin/images/about-header-privacy.svg b/src/wp-admin/images/about-header-privacy.svg index a83807797c..979428d3d4 100644 --- a/src/wp-admin/images/about-header-privacy.svg +++ b/src/wp-admin/images/about-header-privacy.svg @@ -1,20 +1,11 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + +