IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Help/About: Update the About page for 6.2.

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

58
wp-admin/css/about-rtl.css
View File

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

2
wp-admin/css/about-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

58
wp-admin/css/about.css
View File

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

2
wp-admin/css/about.min.css vendored
View File

File diff suppressed because one or more lines are too long