Changeset 57018

Timestamp:

10/27/2023 05:01:50 PM (9 months ago)

Author:

jorbin

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/about.css (modified) (6 diffs)
• freedoms.php (modified) (1 diff)
• images/about-header-about.svg (modified) (1 diff)
• images/about-header-background.svg (added)
• images/about-header-contribute.svg (modified) (1 diff)
• images/about-header-credits.svg (modified) (1 diff)
• images/about-header-freedoms.svg (modified) (1 diff)
• images/about-header-privacy.svg (modified) (1 diff)

trunk/src/wp-admin/css/about.css

@@ -22 +22 @@
 .about__container {
     /* Section backgrounds */
-    --background: #151515;
+    --background: #;
     --subtle-background: #EAE9E7;
 
@@ -30 +30 @@
 
     /* Accent colors: used in header, on special classes. */
-    --accent-1: #D8613C; /* Link color */
+    --accent-1: #; /* Link color */
     --accent-2: #CFCABE; /* Accent background */
     --accent-3: #f0f0f1; /* hr background */
@@ -539 +539 @@
     box-sizing: border-box;
     padding: var(--gap) 0;
-    min-height: 420px;
+    ;
     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;
+
+
+
 }
 
 .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');
 }
 
 .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');
 }
 
 .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');
 }
 
 .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');
 }
 
@@ -569 +571 @@
 .about__header-title {
     box-sizing: border-box;
-    margin: 0 calc(var(--gap) + 3rem);
+    margin: 0 calc(var(--gap) + rem);
     padding: 0;
+
 }
 
@@ -582 +585 @@
 }
 
+
 .credits-php .about__header-title h1,
 .freedoms-php .about__header-title h1,
@@ -646 +650 @@
 
 @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,

trunk/src/wp-admin/freedoms.php

@@ -26 +26 @@
 
     <div class="about__header">
-        <div class="about__header-title" style="max-width: 500px">
+        <div class="about__header-title">
             <h1>
                 <?php _e( 'The Four Freedoms' ); ?>

trunk/src/wp-admin/images/about-header-about.svg

@@ -1 @@
-<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_928_4988)">
-<rect width="1000" height="420" rx="2" fill="#EAE9E7"/>
-<path d="M303.711 -552.516V149.852L795.846 -342.283L902.156 -234.778L407.632 259.746H1110V411.448H414.799L912.907 909.556L805.402 1017.06L303.711 515.37V1222.52H152.009V515.37L-352.071 1019.45L-459.577 913.139L42.1146 411.448H-665.031V259.746H48.0871L-450.021 -238.361L-342.515 -345.867L152.009 148.657V-552.516H303.711Z" fill="white" fill-opacity="0.35"/>
-<path d="M783 260C783 273.132 780.413 286.136 775.388 298.268C770.362 310.401 762.997 321.425 753.711 330.711C744.425 339.997 733.401 347.362 721.268 352.388C709.136 357.413 696.132 360 683 360L683 280C685.626 280 688.227 279.483 690.654 278.478C693.08 277.472 695.285 275.999 697.142 274.142C698.999 272.285 700.472 270.08 701.478 267.654C702.483 265.227 703 262.626 703 260H783Z" fill="#111111"/>
-<path d="M683 160C696.132 160 709.136 162.587 721.268 167.612C733.401 172.638 744.425 180.003 753.711 189.289C762.997 198.575 770.362 209.599 775.388 221.732C780.413 233.864 783 246.868 783 260L703 260C703 257.374 702.483 254.773 701.478 252.346C700.472 249.92 698.999 247.715 697.142 245.858C695.285 244.001 693.08 242.528 690.654 241.522C688.227 240.517 685.626 240 683 240V160Z" fill="#CFCABE"/>
-<path d="M683 360C669.868 360 656.864 357.413 644.732 352.388C632.599 347.362 621.575 339.996 612.289 330.711C603.003 321.425 595.637 310.401 590.612 298.268C585.587 286.136 583 273.132 583 260L663 260C663 262.626 663.517 265.227 664.522 267.654C665.527 270.08 667.001 272.285 668.858 274.142C670.715 275.999 672.92 277.472 675.346 278.478C677.773 279.483 680.374 280 683 280L683 360Z" fill="#D8613C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M753.4 60H653.4L583 260L663 260C663 248.954 671.954 240 683 240C685.329 240 687.564 240.398 689.642 241.129L753.4 60Z" fill="#B1C5A4"/>
-<rect x="829" y="160" width="100" height="100" fill="#636363"/>
-<rect x="829" y="260" width="100" height="100" fill="#B6BDBC"/>
-<path d="M799.4 60H899.4L829 260H729L799.4 60Z" fill="#D8613C"/>
-<circle cx="762" cy="333" r="27" fill="#C2A990"/>
-<path d="M763.621 319.886V330.569L771.107 323.084L772.724 324.719L765.202 332.241H775.886V334.549H765.311L772.888 342.125L771.252 343.761L763.621 336.129V346.886H761.314V336.129L753.646 343.797L752.011 342.18L759.642 334.549H748.886V332.241H759.733L752.156 324.664L753.792 323.029L761.314 330.551V319.886H763.621Z" fill="#111111"/>
-</g>
-<defs>
-<clipPath id="clip0_928_4988">
-<rect width="1000" height="420" rx="2" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
+  <path fill="#111" d="M200 200a100.006 100.006 0 0 1-61.732 92.388A100.006 100.006 0 0 1 100 300v-80a20.006 20.006 0 0 0 14.142-5.858A20.006 20.006 0 0 0 120 200h80Z"/>
+  <path fill="#CFCABE" d="M100 100a100.006 100.006 0 0 1 92.388 61.732A100.006 100.006 0 0 1 200 200h-80a20.006 20.006 0 0 0-5.858-14.142A20.006 20.006 0 0 0 100 180v-80Z"/>
+  <path fill="#D8613C" d="M100 300a100.01 100.01 0 0 1-70.71-29.289A100 100 0 0 1 0 200h80a20.005 20.005 0 0 0 12.346 18.478A20.002 20.002 0 0 0 100 220v80Z"/>
+  <path fill="#B1C5A4" fill-rule="evenodd" d="M170.4 0h-100L0 200h80c0-11.046 8.954-20 20-20 2.329 0 4.564.398 6.642 1.129L170.4 0Z" clip-rule="evenodd"/>
+  <path fill="#636363" d="M246 100h100v100H246z"/>
+  <path fill="#B6BDBC" d="M246 200h100v100H246z"/>
+  <path fill="#D8613C" d="M216.4 0h100L246 200H146L216.4 0Z"/>
+  <circle cx="179" cy="273" r="27" fill="#C2A990"/>
+  <path fill="#111" d="M180.621 259.886v10.683l7.486-7.485 1.617 1.635-7.522 7.522h10.684v2.308h-10.575l7.577 7.576-1.636 1.636-7.631-7.632v10.757h-2.307v-10.757l-7.668 7.668-1.635-1.617 7.631-7.631h-10.756v-2.308h10.847l-7.577-7.577 1.636-1.635 7.522 7.522v-10.665h2.307Z"/>
 </svg>

trunk/src/wp-admin/images/about-header-contribute.svg

@@ -1 @@
-<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_945_5606)">
-<rect width="1000" height="420" fill="#EAE9E7"/>
-<path d="M303.711 -552.516V149.852L795.846 -342.283L902.156 -234.778L407.632 259.746H1110V411.448H414.799L912.907 909.556L805.402 1017.06L303.711 515.37V1222.52H152.009V515.37L-352.071 1019.45L-459.577 913.139L42.1146 411.448H-665.031V259.746H48.0871L-450.021 -238.361L-342.515 -345.867L152.009 148.657V-552.516H303.711Z" fill="white" fill-opacity="0.35"/>
-<path d="M783 260C783 273.132 780.413 286.136 775.388 298.268C770.362 310.401 762.997 321.425 753.711 330.711C744.425 339.997 733.401 347.362 721.268 352.388C709.136 357.413 696.132 360 683 360L683 280C685.626 280 688.227 279.483 690.654 278.478C693.08 277.472 695.285 275.999 697.142 274.142C698.999 272.285 700.472 270.08 701.478 267.654C702.483 265.227 703 262.626 703 260H783Z" fill="#D8613C"/>
-<path d="M683 160C696.132 160 709.136 162.587 721.268 167.612C733.401 172.638 744.425 180.003 753.711 189.289C762.997 198.575 770.362 209.599 775.388 221.732C780.413 233.864 783 246.868 783 260L703 260C703 257.374 702.483 254.773 701.478 252.346C700.472 249.92 698.999 247.715 697.142 245.858C695.285 244.001 693.08 242.528 690.654 241.522C688.227 240.517 685.626 240 683 240V160Z" fill="#C2A990"/>
-<path d="M683 360C669.868 360 656.864 357.413 644.732 352.388C632.599 347.362 621.575 339.996 612.289 330.711C603.003 321.425 595.637 310.401 590.612 298.268C585.587 286.136 583 273.132 583 260L663 260C663 262.626 663.517 265.227 664.522 267.654C665.527 270.08 667.001 272.285 668.858 274.142C670.715 275.999 672.92 277.472 675.346 278.478C677.773 279.483 680.374 280 683 280L683 360Z" fill="#636363"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M753.4 60H653.4L583 260L663 260C663 248.954 671.954 240 683 240C685.329 240 687.564 240.398 689.642 241.129L753.4 60Z" fill="#B6BDBC"/>
-<rect x="829" y="160" width="100" height="100" fill="#D8613C"/>
-<rect x="829" y="260" width="100" height="100" fill="#B1C5A4"/>
-<path d="M799.4 60H899.4L829 260H729L799.4 60Z" fill="#111111"/>
-<circle cx="762" cy="333" r="27" fill="white"/>
-<path d="M763.621 319.886V330.569L771.107 323.084L772.724 324.719L765.202 332.241H775.886V334.549H765.311L772.888 342.125L771.252 343.761L763.621 336.129V346.886H761.314V336.129L753.646 343.797L752.011 342.18L759.642 334.549H748.886V332.241H759.733L752.156 324.664L753.792 323.029L761.314 330.551V319.886H763.621Z" fill="#111111"/>
-</g>
-<defs>
-<clipPath id="clip0_945_5606">
-<rect width="1000" height="420" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
+  <path fill="#D8613C" d="M200 200a100.006 100.006 0 0 1-61.732 92.388A100.006 100.006 0 0 1 100 300v-80a20.006 20.006 0 0 0 14.142-5.858A20.006 20.006 0 0 0 120 200h80Z"/>
+  <path fill="#C2A990" d="M100 100a100.006 100.006 0 0 1 92.388 61.732A100.006 100.006 0 0 1 200 200h-80a20.006 20.006 0 0 0-5.858-14.142A20.006 20.006 0 0 0 100 180v-80Z"/>
+  <path fill="#636363" d="M100 300a100.01 100.01 0 0 1-70.71-29.289A100 100 0 0 1 0 200h80a20.005 20.005 0 0 0 12.346 18.478A20.002 20.002 0 0 0 100 220v80Z"/>
+  <path fill="#B6BDBC" fill-rule="evenodd" d="M170.4 0h-100L0 200h80c0-11.046 8.954-20 20-20 2.329 0 4.564.398 6.642 1.129L170.4 0Z" clip-rule="evenodd"/>
+  <path fill="#D8613C" d="M246 100h100v100H246z"/>
+  <path fill="#B1C5A4" d="M246 200h100v100H246z"/>
+  <path fill="#111" d="M216.4 0h100L246 200H146L216.4 0Z"/>
+  <circle cx="179" cy="273" r="27" fill="#fff"/>
+  <path fill="#111" d="M180.621 259.886v10.683l7.486-7.485 1.617 1.635-7.522 7.522h10.684v2.308h-10.575l7.577 7.576-1.636 1.636-7.631-7.632v10.757h-2.307v-10.757l-7.668 7.668-1.635-1.617 7.631-7.631h-10.756v-2.308h10.847l-7.577-7.577 1.636-1.635 7.522 7.522v-10.665h2.307Z"/>
 </svg>

trunk/src/wp-admin/images/about-header-credits.svg

@@ -1 @@
-<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_945_5546)">
-<rect width="1000" height="420" fill="#EAE9E7"/>
-<path d="M303.711 -552.516V149.852L795.846 -342.283L902.156 -234.778L407.632 259.746H1110V411.448H414.799L912.907 909.556L805.402 1017.06L303.711 515.37V1222.52H152.009V515.37L-352.071 1019.45L-459.577 913.139L42.1146 411.448H-665.031V259.746H48.0871L-450.021 -238.361L-342.515 -345.867L152.009 148.657V-552.516H303.711Z" fill="white" fill-opacity="0.35"/>
-<path d="M783 260C783 273.132 780.413 286.136 775.388 298.268C770.362 310.401 762.997 321.425 753.711 330.711C744.425 339.997 733.401 347.362 721.268 352.388C709.136 357.413 696.132 360 683 360L683 280C685.626 280 688.227 279.483 690.654 278.478C693.08 277.472 695.285 275.999 697.142 274.142C698.999 272.285 700.472 270.08 701.478 267.654C702.483 265.227 703 262.626 703 260H783Z" fill="#C2A990"/>
-<path d="M683 160C696.132 160 709.136 162.587 721.268 167.612C733.401 172.638 744.425 180.003 753.711 189.289C762.997 198.575 770.362 209.599 775.388 221.732C780.413 233.864 783 246.868 783 260L703 260C703 257.374 702.483 254.773 701.478 252.346C700.472 249.92 698.999 247.715 697.142 245.858C695.285 244.001 693.08 242.528 690.654 241.522C688.227 240.517 685.626 240 683 240V160Z" fill="#B1C5A4"/>
-<path d="M683 360C669.868 360 656.864 357.413 644.732 352.388C632.599 347.362 621.575 339.996 612.289 330.711C603.003 321.425 595.637 310.401 590.612 298.268C585.587 286.136 583 273.132 583 260L663 260C663 262.626 663.517 265.227 664.522 267.654C665.527 270.08 667.001 272.285 668.858 274.142C670.715 275.999 672.92 277.472 675.346 278.478C677.773 279.483 680.374 280 683 280L683 360Z" fill="#111111"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M753.4 60H653.4L583 260L663 260C663 248.954 671.954 240 683 240C685.329 240 687.564 240.398 689.642 241.129L753.4 60Z" fill="#D8613C"/>
-<rect x="829" y="160" width="100" height="100" fill="#111111"/>
-<rect x="829" y="260" width="100" height="100" fill="#B6BDBC"/>
-<path d="M799.4 60H899.4L829 260H729L799.4 60Z" fill="#CFCABE"/>
-<circle cx="762" cy="333" r="27" fill="white"/>
-<path d="M763.621 319.886V330.569L771.107 323.084L772.724 324.719L765.202 332.241H775.886V334.549H765.311L772.888 342.125L771.252 343.761L763.621 336.129V346.886H761.314V336.129L753.646 343.797L752.011 342.18L759.642 334.549H748.886V332.241H759.733L752.156 324.664L753.792 323.029L761.314 330.551V319.886H763.621Z" fill="#111111"/>
-</g>
-<defs>
-<clipPath id="clip0_945_5546">
-<rect width="1000" height="420" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
+  <path fill="#C2A990" d="M200 200a100.006 100.006 0 0 1-61.732 92.388A100.006 100.006 0 0 1 100 300v-80a20.006 20.006 0 0 0 14.142-5.858A20.006 20.006 0 0 0 120 200h80Z"/>
+  <path fill="#B1C5A4" d="M100 100a100.006 100.006 0 0 1 92.388 61.732A100.006 100.006 0 0 1 200 200h-80a20.006 20.006 0 0 0-5.858-14.142A20.006 20.006 0 0 0 100 180v-80Z"/>
+  <path fill="#111" d="M100 300a100.01 100.01 0 0 1-70.71-29.289A100 100 0 0 1 0 200h80a20.005 20.005 0 0 0 12.346 18.478A20.002 20.002 0 0 0 100 220v80Z"/>
+  <path fill="#D8613C" fill-rule="evenodd" d="M170.4 0h-100L0 200h80c0-11.046 8.954-20 20-20 2.329 0 4.564.398 6.642 1.129L170.4 0Z" clip-rule="evenodd"/>
+  <path fill="#111" d="M246 100h100v100H246z"/>
+  <path fill="#B6BDBC" d="M246 200h100v100H246z"/>
+  <path fill="#CFCABE" d="M216.4 0h100L246 200H146L216.4 0Z"/>
+  <circle cx="179" cy="273" r="27" fill="#fff"/>
+  <path fill="#111" d="M180.621 259.886v10.683l7.486-7.485 1.617 1.635-7.522 7.522h10.684v2.308h-10.575l7.577 7.576-1.636 1.636-7.631-7.632v10.757h-2.307v-10.757l-7.668 7.668-1.635-1.617 7.631-7.631h-10.756v-2.308h10.847l-7.577-7.577 1.635-1.635 7.523 7.522v-10.665h2.307Z"/>
 </svg>

trunk/src/wp-admin/images/about-header-freedoms.svg

@@ -1 @@
-<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_945_5566)">
-<rect width="1000" height="420" fill="#EAE9E7"/>
-<path d="M303.711 -552.516V149.852L795.846 -342.283L902.156 -234.778L407.632 259.746H1110V411.448H414.799L912.907 909.556L805.402 1017.06L303.711 515.37V1222.52H152.009V515.37L-352.071 1019.45L-459.577 913.139L42.1146 411.448H-665.031V259.746H48.0871L-450.021 -238.361L-342.515 -345.867L152.009 148.657V-552.516H303.711Z" fill="white" fill-opacity="0.35"/>
-<path d="M783 260C783 273.132 780.413 286.136 775.388 298.268C770.362 310.401 762.997 321.425 753.711 330.711C744.425 339.997 733.401 347.362 721.268 352.388C709.136 357.413 696.132 360 683 360L683 280C685.626 280 688.227 279.483 690.654 278.478C693.08 277.472 695.285 275.999 697.142 274.142C698.999 272.285 700.472 270.08 701.478 267.654C702.483 265.227 703 262.626 703 260H783Z" fill="#B6BDBC"/>
-<path d="M683 160C696.132 160 709.136 162.587 721.268 167.612C733.401 172.638 744.425 180.003 753.711 189.289C762.997 198.575 770.362 209.599 775.388 221.732C780.413 233.864 783 246.868 783 260L703 260C703 257.374 702.483 254.773 701.478 252.346C700.472 249.92 698.999 247.715 697.142 245.858C695.285 244.001 693.08 242.528 690.654 241.522C688.227 240.517 685.626 240 683 240V160Z" fill="#D8613C"/>
-<path d="M683 360C669.868 360 656.864 357.413 644.732 352.388C632.599 347.362 621.575 339.996 612.289 330.711C603.003 321.425 595.637 310.401 590.612 298.268C585.587 286.136 583 273.132 583 260L663 260C663 262.626 663.517 265.227 664.522 267.654C665.527 270.08 667.001 272.285 668.858 274.142C670.715 275.999 672.92 277.472 675.346 278.478C677.773 279.483 680.374 280 683 280L683 360Z" fill="#C2A990"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M753.4 60H653.4L583 260L663 260C663 248.954 671.954 240 683 240C685.329 240 687.564 240.398 689.642 241.129L753.4 60Z" fill="#111111"/>
-<rect x="829" y="160" width="100" height="100" fill="#CFCABE"/>
-<rect x="829" y="260" width="100" height="100" fill="#D8613C"/>
-<path d="M799.4 60H899.4L829 260H729L799.4 60Z" fill="#B1C5A4"/>
-<circle cx="762" cy="333" r="27" fill="#F9F9F9"/>
-<path d="M763.621 319.886V330.569L771.107 323.084L772.724 324.719L765.202 332.241H775.886V334.549H765.311L772.888 342.125L771.252 343.761L763.621 336.129V346.886H761.314V336.129L753.646 343.797L752.011 342.18L759.642 334.549H748.886V332.241H759.733L752.156 324.664L753.792 323.029L761.314 330.551V319.886H763.621Z" fill="#111111"/>
-</g>
-<defs>
-<clipPath id="clip0_945_5566">
-<rect width="1000" height="420" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
+  <path fill="#B6BDBC" d="M200 200a100.006 100.006 0 0 1-61.732 92.388A100.006 100.006 0 0 1 100 300v-80a20.006 20.006 0 0 0 14.142-5.858A20.006 20.006 0 0 0 120 200h80Z"/>
+  <path fill="#D8613C" d="M100 100a100.006 100.006 0 0 1 92.388 61.732A100.006 100.006 0 0 1 200 200h-80a20.006 20.006 0 0 0-5.858-14.142A20.006 20.006 0 0 0 100 180v-80Z"/>
+  <path fill="#C2A990" d="M100 300a100.01 100.01 0 0 1-70.71-29.289A100 100 0 0 1 0 200h80a20.005 20.005 0 0 0 12.346 18.478A20.002 20.002 0 0 0 100 220v80Z"/>
+  <path fill="#111" fill-rule="evenodd" d="M170.4 0h-100L0 200h80c0-11.046 8.954-20 20-20 2.329 0 4.564.398 6.642 1.129L170.4 0Z" clip-rule="evenodd"/>
+  <path fill="#CFCABE" d="M246 100h100v100H246z"/>
+  <path fill="#D8613C" d="M246 200h100v100H246z"/>
+  <path fill="#B1C5A4" d="M216.4 0h100L246 200H146L216.4 0Z"/>
+  <circle cx="179" cy="273" r="27" fill="#F9F9F9"/>
+  <path fill="#111" d="M180.621 259.886v10.683l7.486-7.485 1.617 1.635-7.522 7.522h10.684v2.308h-10.575l7.577 7.576-1.636 1.636-7.631-7.632v10.757h-2.307v-10.757l-7.668 7.668-1.635-1.617 7.631-7.631h-10.756v-2.308h10.847l-7.577-7.577 1.635-1.635 7.523 7.522v-10.665h2.307Z"/>
 </svg>

trunk/src/wp-admin/images/about-header-privacy.svg

@@ -1 @@
-<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_945_5586)">
-<rect width="1000" height="420" fill="#EAE9E7"/>
-<path d="M303.711 -552.516V149.852L795.846 -342.283L902.156 -234.778L407.632 259.746H1110V411.448H414.799L912.907 909.556L805.402 1017.06L303.711 515.37V1222.52H152.009V515.37L-352.071 1019.45L-459.577 913.139L42.1146 411.448H-665.031V259.746H48.0871L-450.021 -238.361L-342.515 -345.867L152.009 148.657V-552.516H303.711Z" fill="white" fill-opacity="0.35"/>
-<path d="M783 260C783 273.132 780.413 286.136 775.388 298.268C770.362 310.401 762.997 321.425 753.711 330.711C744.425 339.997 733.401 347.362 721.268 352.388C709.136 357.413 696.132 360 683 360L683 280C685.626 280 688.227 279.483 690.654 278.478C693.08 277.472 695.285 275.999 697.142 274.142C698.999 272.285 700.472 270.08 701.478 267.654C702.483 265.227 703 262.626 703 260H783Z" fill="#636363"/>
-<path d="M683 160C696.132 160 709.136 162.587 721.268 167.612C733.401 172.638 744.425 180.003 753.711 189.289C762.997 198.575 770.362 209.599 775.388 221.732C780.413 233.864 783 246.868 783 260L703 260C703 257.374 702.483 254.773 701.478 252.346C700.472 249.92 698.999 247.715 697.142 245.858C695.285 244.001 693.08 242.528 690.654 241.522C688.227 240.517 685.626 240 683 240V160Z" fill="#111111"/>
-<path d="M683 360C669.868 360 656.864 357.413 644.732 352.388C632.599 347.362 621.575 339.996 612.289 330.711C603.003 321.425 595.637 310.401 590.612 298.268C585.587 286.136 583 273.132 583 260L663 260C663 262.626 663.517 265.227 664.522 267.654C665.527 270.08 667.001 272.285 668.858 274.142C670.715 275.999 672.92 277.472 675.346 278.478C677.773 279.483 680.374 280 683 280L683 360Z" fill="#D8613C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M753.4 60H653.4L583 260L663 260C663 248.954 671.954 240 683 240C685.329 240 687.564 240.398 689.642 241.129L753.4 60Z" fill="#C2A990"/>
-<rect x="829" y="160" width="100" height="100" fill="#B1C5A4"/>
-<rect x="829" y="260" width="100" height="100" fill="#111111"/>
-<path d="M799.4 60H899.4L829 260H729L799.4 60Z" fill="#B6BDBC"/>
-<circle cx="762" cy="333" r="27" fill="#F9F9F9"/>
-<path d="M763.621 319.886V330.569L771.107 323.084L772.724 324.719L765.202 332.241H775.886V334.549H765.311L772.888 342.125L771.252 343.761L763.621 336.129V346.886H761.314V336.129L753.646 343.797L752.011 342.18L759.642 334.549H748.886V332.241H759.733L752.156 324.664L753.792 323.029L761.314 330.551V319.886H763.621Z" fill="#111111"/>
-</g>
-<defs>
-<clipPath id="clip0_945_5586">
-<rect width="1000" height="420" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
+  <path fill="#636363" d="M200 200a100.006 100.006 0 0 1-61.732 92.388A100.006 100.006 0 0 1 100 300v-80a20.006 20.006 0 0 0 14.142-5.858A20.006 20.006 0 0 0 120 200h80Z"/>
+  <path fill="#111" d="M100 100a100.006 100.006 0 0 1 92.388 61.732A100.006 100.006 0 0 1 200 200h-80a20.006 20.006 0 0 0-5.858-14.142A20.006 20.006 0 0 0 100 180v-80Z"/>
+  <path fill="#D8613C" d="M100 300a100.01 100.01 0 0 1-70.71-29.289A100 100 0 0 1 0 200h80a20.005 20.005 0 0 0 12.346 18.478A20.002 20.002 0 0 0 100 220v80Z"/>
+  <path fill="#C2A990" fill-rule="evenodd" d="M170.4 0h-100L0 200h80c0-11.046 8.954-20 20-20 2.329 0 4.564.398 6.642 1.129L170.4 0Z" clip-rule="evenodd"/>
+  <path fill="#B1C5A4" d="M246 100h100v100H246z"/>
+  <path fill="#111" d="M246 200h100v100H246z"/>
+  <path fill="#B6BDBC" d="M216.4 0h100L246 200H146L216.4 0Z"/>
+  <circle cx="179" cy="273" r="27" fill="#F9F9F9"/>
+  <path fill="#111" d="M180.621 259.886v10.683l7.486-7.485 1.617 1.635-7.522 7.522h10.684v2.308h-10.575l7.577 7.576-1.636 1.636-7.631-7.632v10.757h-2.307v-10.757l-7.668 7.668-1.635-1.617 7.631-7.631h-10.756v-2.308h10.847l-7.577-7.577 1.636-1.635 7.522 7.522v-10.665h2.307Z"/>
 </svg>