About: Introduce design and add link to Media Widgets API dev note.

Props: ryelle rclations melchoyce westonruter.
See #40721.


git-svn-id: https://develop.svn.wordpress.org/trunk@40849 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Mel Choyce
2017-05-27 15:03:08 +00:00
parent 43f2ae7292
commit d79ef7e73e
2 changed files with 63 additions and 56 deletions

View File

@@ -161,45 +161,41 @@
/* 1.2 - Structure */
.about-wrap [class$=col] .col {
float: left;
position: relative;
.about-wrap [class$="-col"] {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.about-wrap .feature-section.one-col {
margin: 0 auto;
max-width: 700px;
}
.about-wrap [class$="-col"] .col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.about-wrap .two-col .col {
margin-right: 4.799999999%;
width: 47.6%;
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-section.two-col .col {
display: inline-block;
float: none;
margin-top: 1em;
margin-right: 4.799999999%;
width: -webkit-calc( 47.6% - 4px );
width: calc( 47.6% - 4px );
vertical-align: top;
}
.about-wrap .three-col .col {
margin-right: 4.999999999%;
width: 29.95%;
}
.about-wrap .two-col .col:nth-of-type(2n),
.about-wrap .three-col .col:nth-of-type(3n) {
margin-right: 0;
}
.about-wrap .under-the-hood {
clear: both;
overflow: hidden;
}
.about-wrap .feature-video .mejs-controls {
display: none !important;
}
@@ -298,9 +294,8 @@
padding-top: 35px;
}
.about-wrap .headline-feature {
margin: 0 auto;
max-width: 80%;
.about-wrap .headline-feature img {
border: none;
}
.about-wrap .feature-section .media-container {
@@ -446,6 +441,11 @@
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;
@@ -475,8 +475,7 @@
.about-wrap .two-col .col,
.about-wrap .three-col .col {
width: 100% !important;
float: none !important;
min-width: 100% !important;
}
.about-wrap .under-the-hood.three-col .col,