Help/About: WordPress 5.9 About Page.
Introducing the new About page for 5.9. Props dansoschin, critterverse, webcommsat, marybaum, nalininonstopnewsuk, sabernhardt, costdev, chanthaboune, cbringmann, mkaz, davidbaumwald, ryelle, melchoyce, annezazu, paaljoachim, audrasjb, hellofromtonya, walbo, tobifjellner, mitogh Built from https://develop.svn.wordpress.org/trunk@52438 git-svn-id: http://core.svn.wordpress.org/trunk@52030 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle
@@ -30,7 +30,7 @@
|
||||
|
||||
/* Accent colors: used in header, on special classes. */
|
||||
--accent-1: #3858e9; /* Accent background, link color */
|
||||
--accent-2: #2d46ba; /* Header background */
|
||||
--accent-2: #3858e9; /* Header background */
|
||||
|
||||
/* Navigation colors. */
|
||||
--nav-background: #fff;
|
||||
@@ -141,12 +141,9 @@
|
||||
margin: 0 0 var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column {
|
||||
padding: var(--gap);
|
||||
}
|
||||
|
||||
.about__section + .about__section .column {
|
||||
padding-top: 0;
|
||||
.about__section .column:not(.is-edge-to-edge) {
|
||||
padding-right: var(--gap);
|
||||
padding-left: var(--gap);
|
||||
}
|
||||
|
||||
.about__section + .about__section .is-section-header {
|
||||
@@ -154,12 +151,10 @@
|
||||
}
|
||||
|
||||
.about__section .column[class*="background-color"],
|
||||
.about__section:where([class*="background-color"]) .column,
|
||||
.about__section .column.has-border {
|
||||
padding-top: var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column.is-edge-to-edge {
|
||||
padding: 0;
|
||||
padding-bottom: var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column p:first-of-type {
|
||||
@@ -223,11 +218,11 @@
|
||||
}
|
||||
|
||||
.about__section.has-2-columns.is-wider-right {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
}
|
||||
|
||||
.about__section.has-2-columns.is-wider-left {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
}
|
||||
|
||||
.about__section.has-2-columns .is-section-header {
|
||||
@@ -329,7 +324,16 @@
|
||||
.about__section.has-2-columns.is-wider-left,
|
||||
.about__section.has-3-columns {
|
||||
display: block;
|
||||
padding-bottom: calc(var(--gap) / 2);
|
||||
margin-bottom: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.about__section .column:not(.is-edge-to-edge) {
|
||||
padding-top: var(--gap);
|
||||
padding-bottom: var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column:not(.is-edge-to-edge) + .column {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.about__section.has-2-columns.has-gutters .column,
|
||||
@@ -471,6 +475,11 @@
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.about__container p.is-subheading {
|
||||
margin-top: 0;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.about__section a {
|
||||
color: var(--accent-1);
|
||||
text-decoration: underline;
|
||||
@@ -524,46 +533,6 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison img {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison-resize {
|
||||
position: absolute !important; /* Needed to override inline style on ResizableBox */
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison.no-js .about__image-comparison-resize {
|
||||
overflow: hidden;
|
||||
border-left: 2px solid var(--wp-admin-theme-color);
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
|
||||
width: 4px;
|
||||
left: calc(50% - 2px);
|
||||
transition: none;
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.about__container .about__image + h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
@@ -612,25 +581,47 @@
|
||||
/* 1.3 - Header */
|
||||
|
||||
.about__header {
|
||||
position: relative;
|
||||
margin-bottom: var(--gap);
|
||||
padding-top: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url('../images/about-header-about.svg');
|
||||
background-image: url('../images/about-texture.png');
|
||||
background-color: var(--accent-2);
|
||||
background-size: 500px 500px;
|
||||
background-blend-mode: overlay;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.credits-php .about__header {
|
||||
.about__header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 64px;
|
||||
z-index: 0;
|
||||
width: 300px;
|
||||
height: 382px;
|
||||
background: url(../images/about-header-about.svg) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.credits-php .about__header::before {
|
||||
top: auto;
|
||||
bottom: 70px;
|
||||
height: 310px;
|
||||
background-image: url('../images/about-header-credits.svg');
|
||||
}
|
||||
|
||||
.freedoms-php .about__header {
|
||||
.freedoms-php .about__header::before {
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 375px;
|
||||
height: 300px;
|
||||
background-image: url('../images/about-header-freedoms.svg');
|
||||
}
|
||||
|
||||
.privacy-php .about__header {
|
||||
.privacy-php .about__header::before {
|
||||
top: auto;
|
||||
bottom: 70px;
|
||||
height: 245px;
|
||||
background-image: url('../images/about-header-privacy.svg');
|
||||
}
|
||||
|
||||
@@ -639,7 +630,9 @@
|
||||
}
|
||||
|
||||
.about__header-title {
|
||||
padding: 2rem 0 0;
|
||||
box-sizing: border-box;
|
||||
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
|
||||
padding: 6rem 0 0 380px;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
@@ -652,14 +645,24 @@
|
||||
}
|
||||
|
||||
.about__header-text {
|
||||
max-width: 42rem;
|
||||
margin: 0 0 5em;
|
||||
padding: 0 2rem;
|
||||
font-size: 2rem;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 7rem;
|
||||
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
|
||||
padding: 0 2rem 0 380px;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.freedoms-php .about__header-title,
|
||||
.freedoms-php .about__header-text {
|
||||
/* 391px = 375px (balloon width) + 16px (spacing). */
|
||||
padding-left: 391px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.about__header-navigation {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 0;
|
||||
@@ -708,6 +711,25 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.about__header::before {
|
||||
width: 240px;
|
||||
height: 305px;
|
||||
left: 32px;
|
||||
}
|
||||
|
||||
.credits-php .about__header::before {
|
||||
height: 248px;
|
||||
}
|
||||
|
||||
.freedoms-php .about__header::before {
|
||||
height: 192px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.privacy-php .about__header::before {
|
||||
height: 196px;
|
||||
}
|
||||
|
||||
.about__container .about__header-text {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
@@ -716,13 +738,24 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about__header-title,
|
||||
.about__header-text {
|
||||
/* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
|
||||
padding-left: 288px !important;
|
||||
}
|
||||
|
||||
.about__header-title,
|
||||
.about__header-image {
|
||||
margin-right: calc(var(--gap) / 2);
|
||||
margin-left: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.about__header-text,
|
||||
.about__header-text {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
padding-right: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.about__header-navigation .nav-tab {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
@@ -731,13 +764,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.about__header::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about__header-title,
|
||||
.about__header-text {
|
||||
padding-left: calc(var(--gap) / 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.about__header-title p {
|
||||
font-size: 2.4em;
|
||||
}
|
||||
|
||||
.about__header-title {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.about__header-text {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about__header-navigation {
|
||||
|
||||
2
wp-admin/css/about-rtl.min.css
vendored
2
wp-admin/css/about-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -29,7 +29,7 @@
|
||||
|
||||
/* Accent colors: used in header, on special classes. */
|
||||
--accent-1: #3858e9; /* Accent background, link color */
|
||||
--accent-2: #2d46ba; /* Header background */
|
||||
--accent-2: #3858e9; /* Header background */
|
||||
|
||||
/* Navigation colors. */
|
||||
--nav-background: #fff;
|
||||
@@ -140,12 +140,9 @@
|
||||
margin: 0 0 var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column {
|
||||
padding: var(--gap);
|
||||
}
|
||||
|
||||
.about__section + .about__section .column {
|
||||
padding-top: 0;
|
||||
.about__section .column:not(.is-edge-to-edge) {
|
||||
padding-left: var(--gap);
|
||||
padding-right: var(--gap);
|
||||
}
|
||||
|
||||
.about__section + .about__section .is-section-header {
|
||||
@@ -153,12 +150,10 @@
|
||||
}
|
||||
|
||||
.about__section .column[class*="background-color"],
|
||||
.about__section:where([class*="background-color"]) .column,
|
||||
.about__section .column.has-border {
|
||||
padding-top: var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column.is-edge-to-edge {
|
||||
padding: 0;
|
||||
padding-bottom: var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column p:first-of-type {
|
||||
@@ -222,11 +217,11 @@
|
||||
}
|
||||
|
||||
.about__section.has-2-columns.is-wider-right {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
}
|
||||
|
||||
.about__section.has-2-columns.is-wider-left {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
}
|
||||
|
||||
.about__section.has-2-columns .is-section-header {
|
||||
@@ -328,7 +323,16 @@
|
||||
.about__section.has-2-columns.is-wider-left,
|
||||
.about__section.has-3-columns {
|
||||
display: block;
|
||||
padding-bottom: calc(var(--gap) / 2);
|
||||
margin-bottom: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.about__section .column:not(.is-edge-to-edge) {
|
||||
padding-top: var(--gap);
|
||||
padding-bottom: var(--gap);
|
||||
}
|
||||
|
||||
.about__section .column:not(.is-edge-to-edge) + .column {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.about__section.has-2-columns.has-gutters .column,
|
||||
@@ -470,6 +474,11 @@
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.about__container p.is-subheading {
|
||||
margin-top: 0;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.about__section a {
|
||||
color: var(--accent-1);
|
||||
text-decoration: underline;
|
||||
@@ -523,46 +532,6 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison img {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison-resize {
|
||||
position: absolute !important; /* Needed to override inline style on ResizableBox */
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison.no-js .about__image-comparison-resize {
|
||||
overflow: hidden;
|
||||
border-right: 2px solid var(--wp-admin-theme-color);
|
||||
}
|
||||
|
||||
.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
|
||||
width: 4px;
|
||||
right: calc(50% - 2px);
|
||||
transition: none;
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.about__container .about__image + h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
@@ -611,25 +580,47 @@
|
||||
/* 1.3 - Header */
|
||||
|
||||
.about__header {
|
||||
position: relative;
|
||||
margin-bottom: var(--gap);
|
||||
padding-top: 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url('../images/about-header-about.svg');
|
||||
background-image: url('../images/about-texture.png');
|
||||
background-color: var(--accent-2);
|
||||
background-size: 500px 500px;
|
||||
background-blend-mode: overlay;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.credits-php .about__header {
|
||||
.about__header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 64px;
|
||||
z-index: 0;
|
||||
width: 300px;
|
||||
height: 382px;
|
||||
background: url(../images/about-header-about.svg) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.credits-php .about__header::before {
|
||||
top: auto;
|
||||
bottom: 70px;
|
||||
height: 310px;
|
||||
background-image: url('../images/about-header-credits.svg');
|
||||
}
|
||||
|
||||
.freedoms-php .about__header {
|
||||
.freedoms-php .about__header::before {
|
||||
top: 32px;
|
||||
right: 0;
|
||||
width: 375px;
|
||||
height: 300px;
|
||||
background-image: url('../images/about-header-freedoms.svg');
|
||||
}
|
||||
|
||||
.privacy-php .about__header {
|
||||
.privacy-php .about__header::before {
|
||||
top: auto;
|
||||
bottom: 70px;
|
||||
height: 245px;
|
||||
background-image: url('../images/about-header-privacy.svg');
|
||||
}
|
||||
|
||||
@@ -638,7 +629,9 @@
|
||||
}
|
||||
|
||||
.about__header-title {
|
||||
padding: 2rem 0 0;
|
||||
box-sizing: border-box;
|
||||
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
|
||||
padding: 6rem 380px 0 0;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
@@ -651,14 +644,24 @@
|
||||
}
|
||||
|
||||
.about__header-text {
|
||||
max-width: 42rem;
|
||||
margin: 0 0 5em;
|
||||
padding: 0 2rem;
|
||||
font-size: 2rem;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 7rem;
|
||||
/* 380px = 300px (balloon width) + 64px (offset from edge) + 16px (spacing). */
|
||||
padding: 0 380px 0 2rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.freedoms-php .about__header-title,
|
||||
.freedoms-php .about__header-text {
|
||||
/* 391px = 375px (balloon width) + 16px (spacing). */
|
||||
padding-right: 391px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.about__header-navigation {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 0;
|
||||
@@ -707,6 +710,25 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.about__header::before {
|
||||
width: 240px;
|
||||
height: 305px;
|
||||
right: 32px;
|
||||
}
|
||||
|
||||
.credits-php .about__header::before {
|
||||
height: 248px;
|
||||
}
|
||||
|
||||
.freedoms-php .about__header::before {
|
||||
height: 192px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.privacy-php .about__header::before {
|
||||
height: 196px;
|
||||
}
|
||||
|
||||
.about__container .about__header-text {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
@@ -715,13 +737,24 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about__header-title,
|
||||
.about__header-text {
|
||||
/* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
|
||||
padding-right: 288px !important;
|
||||
}
|
||||
|
||||
.about__header-title,
|
||||
.about__header-image {
|
||||
margin-left: calc(var(--gap) / 2);
|
||||
margin-right: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.about__header-text,
|
||||
.about__header-text {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
padding-left: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.about__header-navigation .nav-tab {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
@@ -730,13 +763,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.about__header::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about__header-title,
|
||||
.about__header-text {
|
||||
padding-right: calc(var(--gap) / 2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.about__header-title p {
|
||||
font-size: 2.4em;
|
||||
}
|
||||
|
||||
.about__header-title {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.about__header-text {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.about__header-navigation {
|
||||
|
||||
2
wp-admin/css/about.min.css
vendored
2
wp-admin/css/about.min.css
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user