+
+
+ '//s.w.org/images/core/4.0/embed.mp4',
+ 'ogv' => '//s.w.org/images/core/4.0/embed.ogv',
+ 'webm' => '//s.w.org/images/core/4.0/embed.webm',
+ 'loop' => true,
+ 'autoplay' => true,
+ 'width' => 500,
+ 'height' => 352
+ ) );
+ ?>
+
@@ -77,8 +95,19 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-
-

+
+ '//s.w.org/images/core/4.0/focus.mp4',
+ 'ogv' => '//s.w.org/images/core/4.0/focus.ogv',
+ 'webm' => '//s.w.org/images/core/4.0/focus.webm',
+ 'loop' => true,
+ 'autoplay' => true,
+ 'width' => 500,
+ 'height' => 281
+ ) );
+ ?>
+
@@ -86,11 +115,10 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-
-

+
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 0312a4912d..b3cdffb505 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -80,6 +80,10 @@
line-height: 1.5em;
}
+.about-wrap h3.higher {
+ margin-top: .5em;
+}
+
.customize h3 {
margin-top: 1.75em;
text-align: center;
@@ -174,6 +178,7 @@
.about-overview {
margin-top: 40px;
+ margin-bottom: 40px;
text-align: center;
}
@@ -192,8 +197,8 @@
.about-wrap .feature-section.two-col > div {
position: relative;
- width: 47.5%;
- margin-right: 4.999999999%;
+ width: 47.6%;
+ margin-right: 4.799999999%;
float: left;
}
@@ -226,6 +231,31 @@
max-width: 20%;
}
+/* responsive videos for 4.0 */
+.about-video {
+ position: relative;
+ width: 100%;
+ height: 0;
+}
+
+.about-video-embed {
+ padding-bottom: 70.4%; /* 352 / 500 */
+}
+
+.about-video-focus {
+ padding-bottom: 56.2%; /* 281 / 500 */
+}
+
+.about-video .wp-video,
+.about-video .mejs-container,
+.about-video video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+}
+
.about-wrap .changelog li {
list-style-type: disc;
margin-left: 3em;
@@ -347,6 +377,24 @@
}
+/* Responsive release video */
+@media screen and ( max-width: 710px ) {
+ .about-overview {
+ position: relative;
+ padding-bottom: 56.25%; /* 360 / 640 */
+ width: 100%;
+ height: 0;
+ }
+
+ .about-overview embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
@media only screen and (max-width: 500px) {
.about-wrap {
margin-right: 20px;
@@ -368,6 +416,17 @@
width: 100%;
}
+ .about-wrap h2.nav-tab-wrapper {
+ padding-left: 0;
+ border-bottom: 0;
+ }
+
+ .about-wrap h2 .nav-tab {
+ margin-top: 10px;
+ margin-right: 10px;
+ border-bottom: 1px solid #ccc;
+ }
+
.about-wrap .feature-section.three-col div {
width: 100%;
float: none;