Help/About: Update the About page for 6.2.

This is the start of the WordPress 6.2 about page, introducing new content and a first pass of the new style.

Props laurlittle, jpantani, richtabor, audrasjb.
See #57477.


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


git-svn-id: http://core.svn.wordpress.org/trunk@54982 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2023-03-01 16:30:20 +00:00
parent 0b2a7b380f
commit 7a4b3a5dab
10 changed files with 167 additions and 469 deletions

File diff suppressed because one or more lines are too long

View File

@ -22,7 +22,7 @@
.about__container { .about__container {
/* Section backgrounds */ /* Section backgrounds */
--background: #274acd; --background: #1d35b4;
--subtle-background: #eff2ff; --subtle-background: #eff2ff;
/* Main text color */ /* Main text color */
@ -30,8 +30,8 @@
--text-light: #fff; --text-light: #fff;
/* Accent colors: used in header, on special classes. */ /* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Link color, credit image overlay */ --accent-1: #1d35b4; /* Link color, credit image overlay */
--accent-2: #fffcb5; /* Accent background */ --accent-2: #33f078; /* Accent background */
/* Navigation colors. */ /* Navigation colors. */
--nav-background: #fff; --nav-background: #fff;
@ -561,7 +561,7 @@
margin: 0; margin: 0;
height: var(--gap); height: var(--gap);
border: none; border: none;
border-top: 4px solid #d9d9d9; border-top: 4px solid var(--accent-2);
} }
.about__container hr.is-small { .about__container hr.is-small {
@ -603,41 +603,25 @@
/* 1.3 - Header */ /* 1.3 - Header */
.about__header { .about__header {
--about-header-image-width: 780px;
--about-header-image-height: 550px;
--about-header-bg-width: var(--about-header-image-width);
--about-header-bg-height: var(--about-header-image-height);
--about-header-bg-offset-block: 0;
position: relative; position: relative;
margin-bottom: var(--gap); margin-bottom: var(--gap);
padding-top: 0; padding-top: 0;
color: var(--text-light); color: var(--text-light);
background: var(--background) url('../images/about-header-about.svg?ver=6.1') no-repeat; background: var(--background) url('../images/about-header-about.svg?ver=6.2') no-repeat;
background-size: var(--about-header-bg-width) var(--about-header-bg-height); background-size: cover;
background-position: center top var(--about-header-bg-offset-block); background-position: center calc(50% - 36px);
} }
.credits-php .about__header { .credits-php .about__header {
--about-header-image-width: 863px; background-image: url('../images/about-header-credits.svg?ver=6.2');
--about-header-image-height: 550px;
background-image: url('../images/about-header-credits.svg?ver=6.1');
} }
.freedoms-php .about__header { .freedoms-php .about__header {
--about-header-image-width: 782px; background-image: url('../images/about-header-freedoms.svg?ver=6.2');
--about-header-image-height: 510px;
background-image: url('../images/about-header-freedoms.svg?ver=6.1');
} }
.privacy-php .about__header { .privacy-php .about__header {
--about-header-image-width: 1005px; background-image: url('../images/about-header-privacy.svg?ver=6.2');
--about-header-image-height: 500px;
--about-header-bg-offset-block: calc(var(--gap) * -2);
background-image: url('../images/about-header-privacy.svg?ver=6.1');
} }
.about__header-image { .about__header-image {
@ -657,7 +641,7 @@
/* Fluid font size scales on browser size 960px - 1200px. */ /* Fluid font size scales on browser size 960px - 1200px. */
font-size: clamp(3rem, 20vw - 9rem, 6rem); font-size: clamp(3rem, 20vw - 9rem, 6rem);
line-height: 1; line-height: 1;
font-weight: 400; font-weight: 600;
} }
.credits-php .about__header-title h1, .credits-php .about__header-title h1,
@ -667,6 +651,10 @@
font-size: clamp(3rem, 10vw - 3rem, 4.5rem); font-size: clamp(3rem, 10vw - 3rem, 4.5rem);
} }
.about__header-title h1 span {
color: var(--accent-2);
}
.about__header-text { .about__header-text {
box-sizing: border-box; box-sizing: border-box;
max-width: 22em; max-width: 22em;
@ -726,15 +714,6 @@
} }
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
.about__header {
--about-header-bg-width: calc(var(--about-header-image-width) * 0.85);
--about-header-bg-height: calc(var(--about-header-image-height) * 0.85);
}
.privacy-php .about__header {
--about-header-bg-offset-block: 0;
}
.about__header-title h1 { .about__header-title h1 {
/* Fluid font size scales on browser size 600px - 960px. */ /* Fluid font size scales on browser size 600px - 960px. */
font-size: clamp(3rem, 13.33vw - 2rem, 6rem); font-size: clamp(3rem, 13.33vw - 2rem, 6rem);
@ -775,13 +754,6 @@
} }
} }
@media screen and (max-width: 600px) {
.about__header {
--about-header-bg-width: calc(var(--about-header-image-width) * 0.75);
--about-header-bg-height: calc(var(--about-header-image-height) * 0.75);
}
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.about__header, .about__header,
.credits-php .about__header, .credits-php .about__header,

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: #274acd; --background: #1d35b4;
--subtle-background: #eff2ff; --subtle-background: #eff2ff;
/* Main text color */ /* Main text color */
@ -29,8 +29,8 @@
--text-light: #fff; --text-light: #fff;
/* Accent colors: used in header, on special classes. */ /* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Link color, credit image overlay */ --accent-1: #1d35b4; /* Link color, credit image overlay */
--accent-2: #fffcb5; /* Accent background */ --accent-2: #33f078; /* Accent background */
/* Navigation colors. */ /* Navigation colors. */
--nav-background: #fff; --nav-background: #fff;
@ -560,7 +560,7 @@
margin: 0; margin: 0;
height: var(--gap); height: var(--gap);
border: none; border: none;
border-top: 4px solid #d9d9d9; border-top: 4px solid var(--accent-2);
} }
.about__container hr.is-small { .about__container hr.is-small {
@ -602,41 +602,25 @@
/* 1.3 - Header */ /* 1.3 - Header */
.about__header { .about__header {
--about-header-image-width: 780px;
--about-header-image-height: 550px;
--about-header-bg-width: var(--about-header-image-width);
--about-header-bg-height: var(--about-header-image-height);
--about-header-bg-offset-block: 0;
position: relative; position: relative;
margin-bottom: var(--gap); margin-bottom: var(--gap);
padding-top: 0; padding-top: 0;
color: var(--text-light); color: var(--text-light);
background: var(--background) url('../images/about-header-about.svg?ver=6.1') no-repeat; background: var(--background) url('../images/about-header-about.svg?ver=6.2') no-repeat;
background-size: var(--about-header-bg-width) var(--about-header-bg-height); background-size: cover;
background-position: center top var(--about-header-bg-offset-block); background-position: center calc(50% - 36px);
} }
.credits-php .about__header { .credits-php .about__header {
--about-header-image-width: 863px; background-image: url('../images/about-header-credits.svg?ver=6.2');
--about-header-image-height: 550px;
background-image: url('../images/about-header-credits.svg?ver=6.1');
} }
.freedoms-php .about__header { .freedoms-php .about__header {
--about-header-image-width: 782px; background-image: url('../images/about-header-freedoms.svg?ver=6.2');
--about-header-image-height: 510px;
background-image: url('../images/about-header-freedoms.svg?ver=6.1');
} }
.privacy-php .about__header { .privacy-php .about__header {
--about-header-image-width: 1005px; background-image: url('../images/about-header-privacy.svg?ver=6.2');
--about-header-image-height: 500px;
--about-header-bg-offset-block: calc(var(--gap) * -2);
background-image: url('../images/about-header-privacy.svg?ver=6.1');
} }
.about__header-image { .about__header-image {
@ -656,7 +640,7 @@
/* Fluid font size scales on browser size 960px - 1200px. */ /* Fluid font size scales on browser size 960px - 1200px. */
font-size: clamp(3rem, 20vw - 9rem, 6rem); font-size: clamp(3rem, 20vw - 9rem, 6rem);
line-height: 1; line-height: 1;
font-weight: 400; font-weight: 600;
} }
.credits-php .about__header-title h1, .credits-php .about__header-title h1,
@ -666,6 +650,10 @@
font-size: clamp(3rem, 10vw - 3rem, 4.5rem); font-size: clamp(3rem, 10vw - 3rem, 4.5rem);
} }
.about__header-title h1 span {
color: var(--accent-2);
}
.about__header-text { .about__header-text {
box-sizing: border-box; box-sizing: border-box;
max-width: 22em; max-width: 22em;
@ -725,15 +713,6 @@
} }
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
.about__header {
--about-header-bg-width: calc(var(--about-header-image-width) * 0.85);
--about-header-bg-height: calc(var(--about-header-image-height) * 0.85);
}
.privacy-php .about__header {
--about-header-bg-offset-block: 0;
}
.about__header-title h1 { .about__header-title h1 {
/* Fluid font size scales on browser size 600px - 960px. */ /* Fluid font size scales on browser size 600px - 960px. */
font-size: clamp(3rem, 13.33vw - 2rem, 6rem); font-size: clamp(3rem, 13.33vw - 2rem, 6rem);
@ -774,13 +753,6 @@
} }
} }
@media screen and (max-width: 600px) {
.about__header {
--about-header-bg-width: calc(var(--about-header-image-width) * 0.75);
--about-header-bg-height: calc(var(--about-header-image-height) * 0.75);
}
}
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.about__header, .about__header,
.credits-php .about__header, .credits-php .about__header,

File diff suppressed because one or more lines are too long

View File

@ -1 +1,6 @@
<svg width="780" height="550" viewBox="0 0 780 550" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><g opacity=".5" fill="#273FCC" stroke="#627EFF" stroke-width="2" stroke-miterlimit="10"><circle cx="434.757" cy="71.524" r="66.1" /><circle cx="432.587" cy="43.138" r="66.1" /><circle cx="426.277" cy="16.14" r="66.1" /><circle cx="416.143" cy="-9.165" r="66.1" /><circle cx="402.53" cy="-32.447" r="66.1" /><circle cx="385.755" cy="-53.376" r="66.1" /><circle cx="116.864" cy="-53.072" r="66.1" /><circle cx="99.984" cy="-32.183" r="66.1" /><circle cx="86.278" cy="-8.953" r="66.1" /><circle cx="76.078" cy="16.3" r="66.1" /><circle cx="69.714" cy="43.23" r="66.1" /><circle cx="67.518" cy="71.524" r="66.1" /><circle cx="67.518" cy="71.524" r="66.1" /><circle cx="67.518" cy="99.05" r="66.1" /><circle cx="67.518" cy="126.577" r="66.1" /><circle cx="67.518" cy="154.09" r="66.1" /><circle cx="67.518" cy="181.617" r="66.1" /><circle cx="67.518" cy="209.143" r="66.1" /><circle cx="67.518" cy="236.67" r="66.1" /><circle cx="67.518" cy="264.196" r="66.1" /><circle cx="67.518" cy="291.722" r="66.1" /><circle cx="67.518" cy="319.236" r="66.1" /><circle cx="67.518" cy="346.762" r="66.1" /><circle cx="67.518" cy="374.289" r="66.1" /><circle cx="67.518" cy="374.831" r="66.1" /><circle cx="68.471" cy="393.565" r="66.1" /><circle cx="71.249" cy="411.757" r="66.1" /><circle cx="75.76" cy="429.315" r="66.1" /><circle cx="81.925" cy="446.146" r="66.1" /><circle cx="89.651" cy="462.17" r="66.1" /><circle cx="411.579" cy="464.073" r="66.1" /><circle cx="423.208" cy="438.98" r="66.1" /><circle cx="430.986" cy="412.008" r="66.1" /><circle cx="434.558" cy="383.517" r="66.1" /><circle cx="433.831" cy="354.43" r="66.1" /><circle cx="428.777" cy="326.428" r="66.1" /><circle cx="419.635" cy="300.078" r="66.1" /><circle cx="406.763" cy="275.725" r="66.1" /><circle cx="390.491" cy="253.698" r="66.1" /><circle cx="371.189" cy="234.369" r="66.1" /><circle cx="349.188" cy="218.054" r="66.1" /><circle cx="324.846" cy="205.124" r="66.1" /><circle cx="298.506" cy="195.896" r="66.1" /><circle cx="270.512" cy="190.739" r="66.1" /><circle cx="241.368" cy="189.986" r="66.1" /><circle cx="213.003" cy="193.754" r="66.1" /><circle cx="186.147" cy="201.739" r="66.1" /><circle cx="161.157" cy="213.559" r="66.1" /><circle cx="138.389" cy="228.882" r="66.1" /><circle cx="118.174" cy="247.352" r="66.1" /><circle cx="100.857" cy="268.599" r="66.1" /><circle cx="86.794" cy="292.264" r="66.1" /><circle cx="76.316" cy="318.019" r="66.1" /><circle cx="69.781" cy="345.466" r="66.1" /><circle cx="67.518" cy="374.289" r="66.1" /><circle cx="712.577" cy="449.729" r="66.1" /><circle cx="712.577" cy="428.072" r="66.1" /><circle cx="712.577" cy="406.403" r="66.1" /><circle cx="712.577" cy="384.733" r="66.1" /><circle cx="712.577" cy="363.077" r="66.1" /><circle cx="712.577" cy="341.408" r="66.1" /><circle cx="712.577" cy="319.738" r="66.1" /><circle cx="712.577" cy="298.069" r="66.1" /><circle cx="712.577" cy="276.412" r="66.1" /><circle cx="712.577" cy="254.743" r="66.1" /><circle cx="712.577" cy="233.073" r="66.1" /><circle cx="712.577" cy="211.417" r="66.1" /><circle cx="712.577" cy="189.748" r="66.1" /><circle cx="712.577" cy="168.078" r="66.1" /><circle cx="712.577" cy="146.422" r="66.1" /><circle cx="712.577" cy="124.753" r="66.1" /><circle cx="712.577" cy="103.083" r="66.1" /><circle cx="712.577" cy="81.413" r="66.1" /><circle cx="712.577" cy="59.757" r="66.1" /><circle cx="712.577" cy="38.088" r="66.1" /><circle cx="712.577" cy="16.418" r="66.1" /><circle cx="712.577" cy="-5.238" r="66.1" /><circle cx="712.577" cy="-26.907" r="66.1" /><circle cx="712.577" cy="-48.577" r="66.1" /><circle cx="662.966" cy="-44.161" r="66.1" /><circle cx="646.429" cy="-21.024" r="66.1" /><circle cx="629.893" cy="2.113" r="66.1" /><circle cx="613.356" cy="25.25" r="66.1" /><circle cx="596.819" cy="48.387" r="66.1" /><circle cx="580.282" cy="71.524" r="66.1" /><circle cx="580.282" cy="465.515" r="66.1" /></g></svg> <svg width="936" height="400" viewBox="0 0 936 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#1D35B4" d="M0 0h936v400H0z"/>
<path d="M1333.98 1370.56H119.164V1481H1333.98v-110.44ZM1333.98 1186.5H119.164v110.44H1333.98V1186.5ZM1156.09 638.78c57.96-57.962 102.85-125.587 133.43-200.961 29.52-72.778 44.49-149.68 44.49-228.533 0-78.853-14.97-155.755-44.49-228.534-30.58-75.392-75.47-142.999-133.43-200.96-57.96-57.962-125.59-102.855-200.962-133.428-72.778-29.524-149.68-44.488-228.533-44.488-78.853 0-155.755 14.964-228.533 44.488-75.393 30.573-142.999 75.466-200.961 133.428-57.962 57.961-102.855 125.586-133.428 200.96-29.524 72.78-44.488 149.681-44.488 228.552 0 78.872 14.964 155.755 44.488 228.534 30.573 75.392 75.466 142.999 133.428 200.96a618.102 618.102 0 0 0 13.216 12.811l78.135-78.135a508.957 508.957 0 0 1-13.271-12.774c-93.873-93.872-145.558-218.667-145.558-351.414 0-132.747 51.685-257.542 145.558-351.414 93.872-93.873 218.667-145.558 351.414-145.558 132.747 0 257.542 51.685 351.415 145.558 93.87 93.872 145.56 218.667 145.56 351.414 0 132.747-51.69 257.542-145.56 351.414l-441.735 441.73H532.15l493.79-493.783c79.95-79.957 124-186.272 124-299.343 0-113.07-44.03-219.385-124-299.342-79.96-79.958-186.275-124.004-299.345-124.004-113.07 0-219.386 44.028-299.343 124.004-79.957 79.975-124.003 186.272-124.003 299.342 0 113.071 44.028 219.386 124.003 299.343 4.344 4.344 8.798 8.559 13.308 12.719l78.19-78.19c-4.583-4.087-9.074-8.283-13.418-12.627-121.997-121.998-121.997-320.51 0-442.526 121.998-121.997 320.51-121.997 442.526 0 59.102 59.103 91.642 137.68 91.642 221.263s-32.54 162.16-91.642 221.263L375.972 1002.43H271.847l623.958-623.934c93.302-93.302 93.302-245.1 0-338.401C850.617-5.093 790.52-29.997 726.613-29.997c-63.907 0-124.003 24.886-169.191 70.092-45.188 45.187-70.091 105.284-70.091 169.191s24.885 124.004 70.091 169.191a239.904 239.904 0 0 0 13.51 12.517l78.54-78.54a130.885 130.885 0 0 1-13.952-12.075c-24.333-24.333-37.733-56.692-37.733-91.112 0-34.419 13.4-66.778 37.733-91.111s56.692-37.733 91.112-37.733c34.42 0 66.778 13.4 91.111 37.733 50.231 50.231 50.231 131.974 0 182.223L119.222 998.901v113.949H1334.04v-110.43H792.49l363.64-363.64h-.04ZM-1277.19-91.013c-75.54 75.54-134.04 163.632-173.87 261.849-38.45 94.848-57.94 195.033-57.94 297.815 0 102.781 19.49 202.967 57.96 297.796 39.83 98.217 98.33 186.309 173.87 261.853 75.54 75.54 163.63 134.03 261.85 173.86 94.827 38.45 195.031 57.96 297.794 57.96 102.762 0 202.967-19.49 297.796-57.96 98.216-39.83 186.309-98.32 261.849-173.86 75.54-75.544 134.035-163.636 173.867-261.853 38.45-94.829 57.961-195.034 57.961-297.796 0-102.763-19.492-202.967-57.961-297.797-39.832-98.216-98.327-186.31-173.867-261.85-48.74-48.739-102.91-90.448-161.681-124.647l-81.228 81.227c60.52 31.788 115.85 72.54 164.829 121.52 128.624 128.623 199.47 299.655 199.47 481.565 0 181.91-70.846 352.942-199.47 481.566C-364.584 1078.86-535.616 1149.7-717.526 1149.7c-181.91 0-352.944-70.84-481.564-199.465-128.63-128.624-199.47-299.656-199.47-481.566 0-181.91 70.84-352.942 199.47-481.566L-593.007-619h-156.178L-1277.19-91.013Z" fill="#213FD4"/>
<path d="M-1147.02 39.138c-57.96 57.962-102.86 125.587-133.43 200.961-29.52 72.778-44.49 149.68-44.49 228.533 0 78.853 14.97 155.755 44.49 228.533 30.57 75.393 75.47 142.999 133.43 200.961 57.96 57.962 125.58 102.854 200.958 133.424 72.779 29.53 149.681 44.49 228.534 44.49 78.853 0 155.754-14.96 228.533-44.49 75.393-30.57 142.999-75.462 200.961-133.424 57.962-57.962 102.855-125.587 133.428-200.961 29.523-72.778 44.488-149.68 44.488-228.533 0-78.853-14.965-155.755-44.488-228.533-30.573-75.393-75.466-143-133.428-200.961C-336.903-9.731-393.815-49.875-455.716-79.51l-83.97 83.97c64.735 24.83 124.169 63.355 173.572 112.776 93.873 93.873 145.558 218.668 145.558 351.414 0 132.747-51.685 257.542-145.558 351.415-93.872 93.872-218.667 145.557-351.414 145.557-132.747 0-257.542-51.703-351.412-145.557-93.87-93.873-145.56-218.668-145.56-351.415 0-132.746 51.69-257.541 145.56-351.414L-332.706-619h-156.178L-1147.02 39.138Z" fill="#213FD4"/>
<path d="M-72.403-619h-156.178l-788.309 788.289c-79.96 79.958-124 186.273-124 299.343 0 113.07 44.03 219.386 124 299.343 79.958 79.957 186.273 124.004 299.343 124.004 113.071 0 219.404-44.047 299.343-124.004C-338.247 688.018-294.2 581.702-294.2 468.632c0-113.07-44.028-219.385-124.004-299.361-50.857-50.838-112.371-87.136-179.48-106.849l-94.333 94.333c73.957 5.926 142.686 37.567 195.733 90.614 59.103 59.103 91.646 137.68 91.646 221.263 0 83.584-32.543 162.16-91.646 221.263-59.102 59.103-137.679 91.645-221.263 91.645-83.583 0-162.16-32.542-221.262-91.645-59.103-59.103-91.641-137.679-91.641-221.263 0-83.583 32.538-162.16 91.641-221.263L-72.403-619Z" fill="#213FD4"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.2-beta3-55448'; $wp_version = '6.2-beta3-55449';
/** /**
* 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.