Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

About page for 5.9, first pass #2106

Closed
wants to merge 9 commits into from
Closed

About page for 5.9, first pass #2106

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
82fc2b3
Initial pass
ryelle Dec 22, 2021
a4ee722
Style new headers
ryelle Jan 3, 2022
7309baa
Fix linter issues
ryelle Jan 3, 2022
bc2b524
Update copy using final google doc
ryelle Jan 4, 2022
3dce3ff
Content updates from [comment:37]
ryelle Jan 4, 2022
93457b0
Update src/wp-admin/about.php
ryelle Jan 4, 2022
61f29f7
Update src/wp-admin/about.php
ryelle Jan 4, 2022
03675a6
Update hypens to nonbreaking hyphens, entity-encoded
ryelle Jan 4, 2022
1aef915
Update pseudoelement selector to use CSS3 format
ryelle Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
195 changes: 123 additions & 72 deletions src/wp-admin/about.php
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion src/wp-admin/credits.php
View file
Open in desktop
Expand Up @@ -29,7 +29,13 @@
</div>

<div class="about__header-text">
<?php _e( 'WordPress 5.8 was created by a worldwide team of passionate individuals' ); ?>
<?php
printf(
/* translators: %s: Version number. */
__( 'WordPress %s was created by a worldwide team of passionate individuals' ),
$display_version
);
?>
</div>

<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
Expand Down
184 changes: 116 additions & 68 deletions src/wp-admin/css/about.css
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -140,25 +140,20 @@
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 {
padding-bottom: var(--gap);
}

.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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
ryelle marked this conversation as resolved.
Show resolved Hide resolved
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');
}

Expand All @@ -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;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/freedoms.php
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@
</div>

<div class="about__header-text">
<?php _e( 'WordPress is free and open source software, built by a distributed community of mostly volunteer developers from around the world' ); ?>
<?php _e( 'WordPress is free and open source software' ); ?>
</div>

<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
Expand Down
14 changes: 11 additions & 3 deletions src/wp-admin/images/about-header-about.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 14 additions & 2 deletions src/wp-admin/images/about-header-credits.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 20 additions & 2 deletions src/wp-admin/images/about-header-freedoms.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.