vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-09-25 02:10:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Admin: Update the About page design to match mockups.

Browse Source 
This commit also moves the images to s.w.org, removes the old "Gutenberg has been deactivated" warning, as well as removing some old JS from About pages of years gone past.

Props melchoyce, ryelle, paaljoachim, karmatosed, pento.
Fixes #46161.



git-svn-id: https://develop.svn.wordpress.org/trunk@44749 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Gary Pendergast
2019-02-19 01:56:43 +00:00
parent fc2a8f0e11
commit 9179db7c66
2 changed files with 110 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/about.css
+65 -83
View File
@@ -149,6 +149,11 @@
line-height: 1.5;
}
.about-wrap .under-the-hood-header {
margin: 40px 0 0;
text-align: center;
}
.about-wrap h4 {
color: #23282d;
}
@@ -187,11 +192,20 @@
flex-wrap: wrap;
}
.about-wrap .feature-section.one-col {
.about-wrap .one-col {
margin: 0 auto;
max-width: 680px;
}
.about-wrap .one-col.is-wide {
max-width: 760px;
}
.about-wrap .under-the-hood {
margin: auto;
max-width: 1020px;
}
.about-wrap .inline-svg img {
max-width: 100%;
width: 100%;
@@ -202,44 +216,31 @@
margin-bottom: 120px;
}
.about-wrap .under-the-hood .inline-svg {
margin-left: 100px;
}
.about-wrap [class$="-col"] .col {
flex: 1;
}
.about-wrap .two-col .col {
min-width: 47%;
max-width: 47%;
}
.about-wrap .three-col,
.about-wrap .four-col {
margin: auto;
max-width: 1020px;
}
.about-wrap .three-col .col {
align-self: flex-start;
min-width: 31%;
max-width: 31%;
}
.about-wrap .four-col .col {
align-self: flex-start;
min-width: 23%;
max-width: 23%;
.about-wrap [class$="-col"] .col + .col {
margin-left: 20px;
}
.about-wrap .feature-section.eight-col .col {
align-self: flex-start;
margin-top: 6px;
min-width: 12%;
max-width: 12%;
.about-wrap [class$="-col"] .is-span-two {
flex: 2;
}
.about-wrap .one-col img {
margin: 1em 0 2em;
}
.about-wrap .one-col .alignright img {
margin-top: 0;
}
.about-wrap .two-col img {
margin-bottom: 1.5em;
}
@@ -256,14 +257,24 @@
margin: 1.5em auto;
}
.about-wrap .inline-svg.alignright {
margin-left: 80px;
}
.about-wrap .cta {
text-align: center;
}
.about-wrap .cta .button {
margin: 0 auto 5px;
font-weight: 600;
}
.about-wrap .feature-section .button {
margin-top: 1.5em;
font-weight: 600;
}
/* 1.3 - Point Releases */
.about-wrap .point-releases {
@@ -285,6 +296,10 @@
/* 2.1 - Typography */
.about-wrap .feature-section-header {
margin: 50px 0 0;
}
.about-wrap .feature-section.two-col h3 {
margin-top: 0;
}
@@ -323,22 +338,8 @@
/* 2.2 - Structure */
.about-wrap .headline-feature.feature-video {
position: relative;
margin: 40px 0;
padding-bottom: 56.25%;
width: 100%;
max-width: 100%;
height: 0;
text-align: center;
}
.about-wrap .feature-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.about-wrap .headline-feature {
margin-bottom: 40px;
}
.about-wrap .featured-image {
@@ -500,32 +501,22 @@
4.0 - Media Queries
------------------------------------------------------------------------------*/
@media screen and (max-width: 1250px) {
.about-wrap .floating-header-section.has-long-title .section-item:nth-child(1),
.about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) {
margin: 0 0 60px;
}
.about-wrap .floating-header-section.has-long-title .section-item:nth-child(3),
.about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
margin: 0;
}
.about-wrap .floating-header-section.has-long-title .section-item:nth-child(2),
.about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
margin-left: 60px;
}
}
@media screen and (max-width: 782px) {
.about-wrap .two-col-text {
column-count: 1;
}
.about-wrap .one-col .alignright {
margin-left: 20px;
max-width: 150px;
}
.about-wrap .two-col .col,
.about-wrap .three-col .col,
.about-wrap .four-col .col {
min-width: 48% !important;
max-width: 48% !important;
margin-left: 0 !important;
}
.about-wrap .eight-col .col {
@@ -549,18 +540,8 @@
text-shadow: none;
}
.about-wrap .floating-header-section {
display: block;
}
.about-wrap .floating-header-section .section-header,
.about-wrap .floating-header-section .section-content {
max-width: 100%;
}
.about-wrap .floating-header-section h2 {
position: static;
margin-bottom: 60px;
.about-wrap .under-the-hood .inline-svg {
margin-left: 40px;
}
}
@@ -585,6 +566,10 @@
width: 100%;
}
.about-wrap .one-col .alignright {
max-width: 120px;
}
.about-wrap .feature-section .col {
margin-top: 1em;
}
@@ -616,24 +601,21 @@
margin-top: 1.25em;
}
.about-wrap .floating-header-section {
margin-bottom: 60px;
grid-gap: 30px 0;
.about-wrap .under-the-hood .inline-svg {
display: none;
}
.about-wrap .inline-svg.full-width {
margin-bottom: 60px;
}
}
.about-wrap .floating-header-section h2 {
word-break: break-all;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
@media only screen and (max-width: 320px) {
.about-wrap .one-col .alignright {
float: none;
margin: 0 auto;
}
.about-wrap .floating-header-section .section-content .section-item {
max-width: 100%;
margin: 0 0 60px;
.about-wrap .one-col .alignright img {
margin: 0 0 1em;
}
}