mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-24 10:09:47 +01:00
922f83a69f
In many a strange and curious file of forgotten lore—
While I pondered, blaming Nacin, my notifications suddenly awakened,
As of someone quietly DMing;—DMing me, I can’t ignore.
“’Tis some contributor,” I muttered, “DMing me an idea or four—
Only this and nothing more.”
Ah, distinctly I remember, at WordCamp US, last December;
A mad proposal nearly laid me—down out cold—upon the floor.
Curious, I listened closely;—to a plan I agreed with, mostly—
A way to make our JavaScript—JavaScript which was a chore—
Maintainable, extendable, for the future, is what I saw.
Guten-ready for evermore.
Open here I switch to Slack, when, with many a patch and hack,
In there stepped Omar, a JavaScript developer hardcore;
Pronouncing all the changes fit; ready now to be commit;
“There’s nothing else for us to do,” DMing me, “It’s done!” he swore—
“No longer random guessing at which file need next be explored—
Let’s move on, we’re all aboard.”
Moved all together, grouped and managed, in folders all is packaged,
The code had all been cleaned and tidied, important parts moved to the fore,
“Though this change be useful here,” I said, “it is too large, I fear,
We couldn’t manage such a patch, we’ve done nothing like this before—
Tell me where doth go this change, change to make our codebase soar!”
Quoth Omar, “In WordPress Core.”
Props omarreis for shepherding this significant change.
Props adamsilverstein, aduth, atimmer, dingo_bastard, frank-klein, gziolo, herregroen, jaswrks, jeremyfelt, jipmoors, jorbin, netweb, ocean90, pento, tjnowell, and youknowriad for testing, feedback, discussion, encouragement, commiserations, etc.
I make no apologies for this commit message.
Fixes #43055.
Built from https://develop.svn.wordpress.org/trunk@43309
git-svn-id: http://core.svn.wordpress.org/trunk@43138 1a063a9b-81f0-0310-95a4-ce76da25c4cd
632 lines
11 KiB
CSS
632 lines
11 KiB
CSS
/*------------------------------------------------------------------------------
|
|
22.0 - About Pages
|
|
|
|
1.0 Global: About, Credits, Freedoms
|
|
1.1 Typography
|
|
1.2 Structure
|
|
1.3 Point Releases
|
|
2.0 About Page
|
|
2.1 Typography
|
|
2.2 Structure
|
|
2.3 Floating Header Layout
|
|
3.0 Credits & Freedoms Pages
|
|
------------------------------------------------------------------------------*/
|
|
|
|
/*------------------------------------------------------------------------------
|
|
1.0 - Global: About, Credits, Freedoms
|
|
------------------------------------------------------------------------------*/
|
|
|
|
.about-wrap {
|
|
position: relative;
|
|
margin: 25px 20px 0 40px;
|
|
max-width: 1050px; /* readability */
|
|
font-size: 15px;
|
|
}
|
|
|
|
.about-wrap.full-width-layout {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.about-wrap-content {
|
|
max-width: 1050px;
|
|
}
|
|
|
|
.about-wrap div.updated,
|
|
.about-wrap div.error,
|
|
.about-wrap .notice {
|
|
display: none !important;
|
|
}
|
|
|
|
.about-wrap hr {
|
|
border: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.about-wrap img {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.about-wrap .jetpack-video-wrapper {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* WordPress Version Badge */
|
|
|
|
.wp-badge {
|
|
background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
|
|
background-position: center 25px;
|
|
background-size: 80px 80px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
margin: 5px 0 0;
|
|
padding-top: 120px;
|
|
height: 40px;
|
|
display: inline-block;
|
|
width: 140px;
|
|
text-rendering: optimizeLegibility;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.svg .wp-badge {
|
|
background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
|
|
}
|
|
|
|
.about-wrap .wp-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* Tabs */
|
|
|
|
.about-wrap .nav-tab {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 1.1 - Typography */
|
|
|
|
.about-wrap p {
|
|
line-height: 1.5;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.about-wrap .feature-section p {
|
|
max-width: 55em;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.about-wrap h1 {
|
|
margin: 0.2em 0 0 200px;
|
|
padding: 0;
|
|
color: #32373c;
|
|
line-height: 1.2em;
|
|
font-size: 2.8em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.about-wrap h2 {
|
|
margin: 40px 0 .6em;
|
|
font-size: 2.7em;
|
|
line-height: 1.3;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap h3 {
|
|
margin: 1.25em 0 .6em;
|
|
font-size: 1.4em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.about-wrap h4 {
|
|
color: #23282d;
|
|
}
|
|
|
|
.about-wrap .changelog h2 {
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
}
|
|
|
|
.about-wrap .changelog h3 {
|
|
margin: 1.33em 0;
|
|
font-size: 1em;
|
|
line-height: inherit;
|
|
color: #23282d;
|
|
}
|
|
|
|
.about-wrap code,
|
|
.about-wrap ol li p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.about-wrap .about-description,
|
|
.about-wrap .about-text {
|
|
margin-top: 1.4em;
|
|
font-weight: 400;
|
|
line-height: 1.6em;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.about-wrap .about-text {
|
|
margin: 1em 0 1em 200px;
|
|
min-height: 60px;
|
|
color: #555d66;
|
|
}
|
|
|
|
/* 1.2 - Structure */
|
|
|
|
.about-wrap [class$="-col"] {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.about-wrap .feature-section.one-col {
|
|
margin: 0 auto;
|
|
max-width: 700px;
|
|
}
|
|
|
|
.about-wrap .inline-svg img {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.about-wrap .inline-svg.full-width {
|
|
margin-bottom: 120px;
|
|
}
|
|
|
|
.about-wrap [class$="-col"] .col {
|
|
flex: 1;
|
|
}
|
|
|
|
.about-wrap .two-col .col {
|
|
min-width: 47%;
|
|
max-width: 47%;
|
|
}
|
|
|
|
.about-wrap .three-col .col {
|
|
align-self: flex-start;
|
|
min-width: 31%;
|
|
max-width: 31%;
|
|
}
|
|
|
|
.about-wrap .two-col img {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.about-wrap .feature-video .mejs-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
.about-wrap .feature-video .mejs-overlay-loading span {
|
|
background: transparent; /* Hide loading.gif */
|
|
}
|
|
|
|
/* 1.3 - Point Releases */
|
|
|
|
.about-wrap .point-releases {
|
|
margin-top: 5px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.about-wrap .changelog.point-releases h3 {
|
|
padding-top: 35px;
|
|
}
|
|
|
|
.about-wrap .changelog.point-releases h3:first-child {
|
|
padding-top: 7px;
|
|
}
|
|
|
|
/*------------------------------------------------------------------------------
|
|
2.0 - About Page
|
|
------------------------------------------------------------------------------*/
|
|
|
|
/* 2.1 - Typography */
|
|
|
|
.about-wrap .feature-section.two-col h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.about-wrap .feature-section h4 {
|
|
margin: 1.4em 0 0.6em 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.about-wrap .feature-section p {
|
|
margin-top: 0.6em;
|
|
}
|
|
|
|
.about-wrap .lead-description {
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .two-col-text {
|
|
-webkit-column-count: 2;
|
|
column-count: 2;
|
|
-webkit-column-gap: 40px;
|
|
column-gap: 40px;
|
|
}
|
|
|
|
.about-wrap .two-col-text p:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.about-wrap .streamlined-updates p,
|
|
.about-wrap .native-fonts p {
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
/* 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;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.about-wrap .featured-image {
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .feature-section {
|
|
overflow: hidden;
|
|
padding: 0 0 40px;
|
|
}
|
|
|
|
.about-wrap .feature-section.no-heading {
|
|
padding-top: 35px;
|
|
}
|
|
|
|
.about-wrap .feature-section .media-container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-wrap .feature-section img {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.about-wrap .embed-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .embed-container iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.about-wrap .wp-embedded-content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.about-wrap .feature-section .col {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.about-wrap .changelog {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.about-wrap .changelog.feature-section .col {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/* Return to Dashboard Home link */
|
|
|
|
.about-wrap .return-to-dashboard {
|
|
margin: 30px -5px 0 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.about-wrap .return-to-dashboard a {
|
|
text-decoration: none;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* 2.3 Floating Header Layout */
|
|
|
|
.about-wrap .floating-header-section {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-gap: 0 60px;
|
|
-ms-grid-columns: 5fr 11fr;
|
|
grid-template-columns: 5fr 11fr;
|
|
max-width: 1020px;
|
|
margin: 0 auto 120px;
|
|
}
|
|
|
|
.about-wrap .floating-header-section .section-header {
|
|
-ms-grid-column: 1;
|
|
grid-column: 1;
|
|
position: relative;
|
|
min-width: 230px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.about-wrap .floating-header-section h2 {
|
|
margin: 0;
|
|
text-align: right;
|
|
position: absolute;
|
|
}
|
|
|
|
.about-wrap .floating-header-section .section-content {
|
|
-ms-grid-column: 2;
|
|
grid-column: 2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
flex-flow: row wrap;
|
|
flex-grow: 2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.about-wrap .floating-header-section .section-item {
|
|
flex-grow: 1;
|
|
max-width: calc(50% - 30px);
|
|
}
|
|
|
|
.about-wrap .floating-header-section .section-item:nth-child(1),
|
|
.about-wrap .floating-header-section .section-item:nth-child(2) {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2),
|
|
.about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.about-wrap .floating-header-section.has-long-title {
|
|
display: block;
|
|
}
|
|
|
|
.about-wrap .floating-header-section.has-long-title .section-header {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.about-wrap .floating-header-section.has-long-title h2 {
|
|
position: static;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.about-wrap .floating-header-section.has-long-title .section-content {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.about-wrap .floating-header-section.has-long-title .section-item {
|
|
max-width: 300px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.about-wrap .floating-header-section.has-long-title .section-item + .section-item {
|
|
margin-right: 60px;
|
|
}
|
|
|
|
/*------------------------------------------------------------------------------
|
|
3.0 - Credits & Freedoms Pages
|
|
------------------------------------------------------------------------------*/
|
|
|
|
/* Credits */
|
|
|
|
.about-wrap h3.wp-people-group {
|
|
margin: 2.6em 0 1.33em;
|
|
padding: 0;
|
|
font-size: 16px;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.about-wrap .wp-people-group {
|
|
padding: 0 5px;
|
|
margin: 0 -5px 0 -15px;
|
|
}
|
|
|
|
.about-wrap .compact {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.about-wrap .wp-person {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-left: 10px;
|
|
padding-bottom: 15px;
|
|
height: 70px;
|
|
width: 280px;
|
|
}
|
|
|
|
.about-wrap .compact .wp-person {
|
|
height: auto;
|
|
width: 180px;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.about-wrap .wp-person .gravatar {
|
|
float: right;
|
|
margin: 0 0 10px 10px;
|
|
padding: 1px;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.about-wrap .compact .wp-person .gravatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.about-wrap .wp-person .web {
|
|
margin: 6px 0 2px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 2em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.about-wrap .wp-person .title {
|
|
display: block;
|
|
}
|
|
|
|
.about-wrap #wp-people-group-validators + p.wp-credits-list {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.about-wrap p.wp-credits-list a {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Freedoms */
|
|
|
|
.freedoms-php .about-wrap ol {
|
|
margin: 40px 60px;
|
|
}
|
|
|
|
.freedoms-php .about-wrap ol li {
|
|
list-style-type: decimal;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.freedoms-php .about-wrap ol p {
|
|
font-weight: 400;
|
|
margin: 0.6em 0;
|
|
}
|
|
|
|
/*------------------------------------------------------------------------------
|
|
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-right: 60px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 782px) {
|
|
.about-wrap .two-col-text {
|
|
-webkit-column-count: 1;
|
|
column-count: 1;
|
|
}
|
|
|
|
.about-wrap .two-col .col,
|
|
.about-wrap .three-col .col {
|
|
min-width: 48% !important;
|
|
}
|
|
|
|
.about-wrap .three-col img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.about-wrap {
|
|
margin-left: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.about-wrap h1,
|
|
.about-wrap .about-text {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.about-wrap .about-text {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.about-wrap .wp-badge {
|
|
position: relative;
|
|
margin-bottom: 1.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
.about-wrap .two-col .col,
|
|
.about-wrap .three-col .col {
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
.about-wrap .under-the-hood.three-col .col,
|
|
.about-wrap .under-the-hood.two-col .col,
|
|
.about-wrap .under-the-hood.one-col .col {
|
|
margin-bottom: 2em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.about-wrap .under-the-hood:nth-of-type(2n),
|
|
.about-wrap .under-the-hood:nth-of-type(3n) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.about-wrap .under-the-hood:nth-of-type(2n) h3,
|
|
.about-wrap .under-the-hood:nth-of-type(3n) h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.about-wrap .floating-header-section {
|
|
margin-bottom: 60px;
|
|
grid-gap: 30px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.about-wrap .floating-header-section .section-content .section-item {
|
|
max-width: 100%;
|
|
margin: 0 0 60px;
|
|
}
|
|
}
|