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.


Built from https://develop.svn.wordpress.org/trunk@57018


git-svn-id: http://core.svn.wordpress.org/trunk@56529 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Aaron Jorbin 2023-10-27 17:03:25 +00:00
parent 02fe60ddab
commit 50d5a07812
12 changed files with 97 additions and 129 deletions

View File

@ -22,7 +22,7 @@
.about__container { .about__container {
/* Section backgrounds */ /* Section backgrounds */
--background: #151515; --background: #EAE9E7;
--subtle-background: #EAE9E7; --subtle-background: #EAE9E7;
/* Main text color */ /* Main text color */
@ -30,7 +30,7 @@
--text-light: #fff; --text-light: #fff;
/* Accent colors: used in header, on special classes. */ /* Accent colors: used in header, on special classes. */
--accent-1: #D8613C; /* Link color */ --accent-1: #C94C26; /* Link color */
--accent-2: #CFCABE; /* Accent background */ --accent-2: #CFCABE; /* Accent background */
--accent-3: #f0f0f1; /* hr background */ --accent-3: #f0f0f1; /* hr background */
--accent-4: #B1C5A4; /* Light green */ --accent-4: #B1C5A4; /* Light green */
@ -539,28 +539,30 @@
justify-content: end; justify-content: end;
box-sizing: border-box; box-sizing: border-box;
padding: var(--gap) 0; padding: var(--gap) 0;
min-height: 420px; height: clamp(12.5rem, -1.25rem + 36.67vw, 26.25rem);
color: var(--text-light); color: var(--text-light);
background: var(--background) url('../images/about-header-about.svg?ver=6.4') no-repeat; background-image: url('../images/about-header-about.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
background-size: cover; background-size: auto 70%, cover;
background-position: center;
border-radius: 5px; border-radius: 5px;
background-repeat: no-repeat;
background-position: left 7% center, top right;
background-color: var(--background);
} }
.credits-php .about__header { .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 { .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 { .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 { .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 { .about__header-image {
@ -569,8 +571,9 @@
.about__header-title { .about__header-title {
box-sizing: border-box; box-sizing: border-box;
margin: 0 calc(var(--gap) + 3rem); margin: 0 calc(var(--gap) + 2rem);
padding: 0; padding: 0;
max-width: 55%;
} }
.about__header-title h1 { .about__header-title h1 {
@ -582,6 +585,7 @@
font-weight: 600; font-weight: 600;
} }
.about-php .about__header-title h1,
.credits-php .about__header-title h1, .credits-php .about__header-title h1,
.freedoms-php .about__header-title h1, .freedoms-php .about__header-title h1,
.privacy-php .about__header-title h1, .privacy-php .about__header-title h1,
@ -646,11 +650,8 @@
} }
@media screen and (max-width: 960px) { @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, .credits-php .about__header-title h1,
.freedoms-php .about__header-title h1, .freedoms-php .about__header-title h1,
.privacy-php .about__header-title h1, .privacy-php .about__header-title h1,

File diff suppressed because one or more lines are too long

View File

@ -21,7 +21,7 @@
.about__container { .about__container {
/* Section backgrounds */ /* Section backgrounds */
--background: #151515; --background: #EAE9E7;
--subtle-background: #EAE9E7; --subtle-background: #EAE9E7;
/* Main text color */ /* Main text color */
@ -29,7 +29,7 @@
--text-light: #fff; --text-light: #fff;
/* Accent colors: used in header, on special classes. */ /* Accent colors: used in header, on special classes. */
--accent-1: #D8613C; /* Link color */ --accent-1: #C94C26; /* Link color */
--accent-2: #CFCABE; /* Accent background */ --accent-2: #CFCABE; /* Accent background */
--accent-3: #f0f0f1; /* hr background */ --accent-3: #f0f0f1; /* hr background */
--accent-4: #B1C5A4; /* Light green */ --accent-4: #B1C5A4; /* Light green */
@ -538,28 +538,30 @@
justify-content: end; justify-content: end;
box-sizing: border-box; box-sizing: border-box;
padding: var(--gap) 0; padding: var(--gap) 0;
min-height: 420px; height: clamp(12.5rem, -1.25rem + 36.67vw, 26.25rem);
color: var(--text-light); color: var(--text-light);
background: var(--background) url('../images/about-header-about.svg?ver=6.4') no-repeat; background-image: url('../images/about-header-about.svg?ver=6.4'), url('../images/about-header-background.svg?ver=6.4');
background-size: cover; background-size: auto 70%, cover;
background-position: center;
border-radius: 5px; border-radius: 5px;
background-repeat: no-repeat;
background-position: right 7% center, top left;
background-color: var(--background);
} }
.credits-php .about__header { .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 { .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 { .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 { .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 { .about__header-image {
@ -568,8 +570,9 @@
.about__header-title { .about__header-title {
box-sizing: border-box; box-sizing: border-box;
margin: 0 calc(var(--gap) + 3rem); margin: 0 calc(var(--gap) + 2rem);
padding: 0; padding: 0;
max-width: 55%;
} }
.about__header-title h1 { .about__header-title h1 {
@ -581,6 +584,7 @@
font-weight: 600; font-weight: 600;
} }
.about-php .about__header-title h1,
.credits-php .about__header-title h1, .credits-php .about__header-title h1,
.freedoms-php .about__header-title h1, .freedoms-php .about__header-title h1,
.privacy-php .about__header-title h1, .privacy-php .about__header-title h1,
@ -645,11 +649,8 @@
} }
@media screen and (max-width: 960px) { @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, .credits-php .about__header-title h1,
.freedoms-php .about__header-title h1, .freedoms-php .about__header-title h1,
.privacy-php .about__header-title h1, .privacy-php .about__header-title h1,

File diff suppressed because one or more lines are too long

View File

@ -25,7 +25,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="wrap about__container"> <div class="wrap about__container">
<div class="about__header"> <div class="about__header">
<div class="about__header-title" style="max-width: 500px"> <div class="about__header-title">
<h1> <h1>
<?php _e( 'The Four Freedoms' ); ?> <?php _e( 'The Four Freedoms' ); ?>
</h1> </h1>

View File

@ -1,20 +1,11 @@
<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
<g clip-path="url(#clip0_928_4988)"> <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"/>
<rect width="1000" height="420" rx="2" fill="#EAE9E7"/> <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 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 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 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 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 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 fill="#636363" d="M246 100h100v100H246z"/>
<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="#B6BDBC" d="M246 200h100v100H246z"/>
<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"/> <path fill="#D8613C" d="M216.4 0h100L246 200H146L216.4 0Z"/>
<rect x="829" y="160" width="100" height="100" fill="#636363"/> <circle cx="179" cy="273" r="27" fill="#C2A990"/>
<rect x="829" y="260" width="100" height="100" fill="#B6BDBC"/> <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"/>
<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> </svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="420" fill="none" viewBox="0 0 1000 420">
<g clip-path="url(#a)">
<rect width="1000" height="420" fill="#EAE9E7" rx="2"/>
<path fill="#fff" fill-opacity=".35" d="M303.711-552.516v702.368l492.135-492.135 106.31 107.505-494.524 494.524H1110v151.702H414.799l498.108 498.108-107.505 107.504-501.691-501.69v707.15H152.009V515.37l-504.08 504.08-107.506-106.311L42.115 411.448h-707.146V259.746H48.087L-450.02-238.361l107.506-107.506L152.01 148.657v-701.173h151.702Z"/>
</g>
<defs>
<clipPath id="a">
<rect width="1000" height="420" fill="#fff" rx="2"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 662 B

View File

@ -1,20 +1,11 @@
<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
<g clip-path="url(#clip0_945_5606)"> <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"/>
<rect width="1000" height="420" fill="#EAE9E7"/> <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 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 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 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 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 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 fill="#D8613C" d="M246 100h100v100H246z"/>
<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="#B1C5A4" d="M246 200h100v100H246z"/>
<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"/> <path fill="#111" d="M216.4 0h100L246 200H146L216.4 0Z"/>
<rect x="829" y="160" width="100" height="100" fill="#D8613C"/> <circle cx="179" cy="273" r="27" fill="#fff"/>
<rect x="829" y="260" width="100" height="100" fill="#B1C5A4"/> <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"/>
<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> </svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,20 +1,11 @@
<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
<g clip-path="url(#clip0_945_5546)"> <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"/>
<rect width="1000" height="420" fill="#EAE9E7"/> <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 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 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 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 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 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 fill="#111" d="M246 100h100v100H246z"/>
<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="#B6BDBC" d="M246 200h100v100H246z"/>
<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"/> <path fill="#CFCABE" d="M216.4 0h100L246 200H146L216.4 0Z"/>
<rect x="829" y="160" width="100" height="100" fill="#111111"/> <circle cx="179" cy="273" r="27" fill="#fff"/>
<rect x="829" y="260" width="100" height="100" fill="#B6BDBC"/> <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"/>
<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> </svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,20 +1,11 @@
<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
<g clip-path="url(#clip0_945_5566)"> <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"/>
<rect width="1000" height="420" fill="#EAE9E7"/> <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 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 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 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 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 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 fill="#CFCABE" d="M246 100h100v100H246z"/>
<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="#D8613C" d="M246 200h100v100H246z"/>
<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"/> <path fill="#B1C5A4" d="M216.4 0h100L246 200H146L216.4 0Z"/>
<rect x="829" y="160" width="100" height="100" fill="#CFCABE"/> <circle cx="179" cy="273" r="27" fill="#F9F9F9"/>
<rect x="829" y="260" width="100" height="100" fill="#D8613C"/> <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"/>
<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> </svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,20 +1,11 @@
<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" width="346" height="300" fill="none" viewBox="0 0 346 300">
<g clip-path="url(#clip0_945_5586)"> <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"/>
<rect width="1000" height="420" fill="#EAE9E7"/> <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 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 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 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 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 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 fill="#B1C5A4" d="M246 100h100v100H246z"/>
<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="#111" d="M246 200h100v100H246z"/>
<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"/> <path fill="#B6BDBC" d="M216.4 0h100L246 200H146L216.4 0Z"/>
<rect x="829" y="160" width="100" height="100" fill="#B1C5A4"/> <circle cx="179" cy="273" r="27" fill="#F9F9F9"/>
<rect x="829" y="260" width="100" height="100" fill="#111111"/> <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"/>
<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> </svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.5-alpha-57017'; $wp_version = '6.5-alpha-57018';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.