WordPress 4.0

[autoinstalls/wordpress.git] / wp-admin / css / about.css

diff --git a/wp-admin/css/about.css b/wp-admin/css/about.css
index 44c85c8d293358557a05faf96f196464b03e6751..50c4d9230f960182f0f19120fbf12a3f9f447174 100644 (file)
--- a/wp-admin/css/about.css
+++ b/wp-admin/css/about.css
@@ -25,6 +25,7 @@
 .about-wrap img {
        margin: 0;
        max-width: 100%;
+       height: auto;
        vertical-align: middle;
 }
 
@@ -80,6 +81,10 @@
        line-height: 1.5em;
 }
 
+.about-wrap h3.higher {
+       margin-top: .5em;
+}
+
 .customize h3 {
        margin-top: 1.75em;
        text-align: center;
@@ -174,17 +179,16 @@
 
 .about-overview {
        margin-top: 40px;
+       margin-bottom: 40px;
        text-align: center;
 }
 
-.about-overview .wp-video {
-       margin: 0 auto;
-}
-
-.changelog .wp-playlist .wp-playlist-current-item img {
-       height: 64px;
-       width: auto;
-       max-width: 100%;
+.about-overview p {
+       margin: 1em auto 50px;
+       max-width: 770px;
+       font-size: 18px;
+       line-height: 1.5;
+       text-align: center;
 }
 
 .about-wrap .feature-section {
@@ -194,8 +198,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;
 }
 
@@ -228,6 +232,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;
@@ -349,6 +378,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;
@@ -370,6 +417,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;
@@ -385,4 +443,4 @@
                width: 100%;
                float: none;
        }
-}
\ No newline at end of file
+}