X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/0461a5f2e55c8d5f1fde96ca2e83117152573c7d..9e77185fafaf4e60e2b73821e0e4b9b1a11fb85f:/wp-admin/css/about.css

diff --git a/wp-admin/css/about.css b/wp-admin/css/about.css
index 44c85c8d..50c4d923 100644
--- 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
+}