Twenty Fifteen: a shorter header on small screens when there is no header text or header image looks more correct.

Props iamtakashi, fixes #30326.




git-svn-id: https://develop.svn.wordpress.org/trunk@30564 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentyfifteen/inc/custom-header.php

@@ -89,6 +89,49 @@ function twentyfifteen_header_style() {
 	?>
 	<style type="text/css" id="twentyfifteen-header-css">
 	<?php
+		// Short header for when there is no Custom Header and Header Text is hidden.
+		if ( empty( $header_image ) && ! display_header_text() ) :
+	?>
+		.site-header {
+			padding-top: 14px;
+			padding-bottom: 14px;
+		}
+
+		.site-branding {
+			min-height: 42px;
+		}
+
+		@media screen and (min-width: 46.25em) {
+			.site-header {
+				padding-top: 21px;
+				padding-bottom: 21px;
+			}
+			.site-branding {
+				min-height: 56px;
+			}
+		}
+		@media screen and (min-width: 55em) {
+			.site-header {
+				padding-top: 25px;
+				padding-bottom: 25px;
+			}
+			.site-branding {
+				min-height: 62px;
+			}
+		}
+		@media screen and (min-width: 59.6875em) {
+			.site-header {
+				padding-top: 0;
+				padding-bottom: 0;
+			}
+			.site-branding {
+				min-height: 0;
+			}
+		}
+	<?php
+		endif;
+
+		// Has a Custom Header been added?
 		if ( ! empty( $header_image ) ) :
 	?>
 		.site-header {

src/wp-content/themes/twentyfifteen/style.css

@@ -905,7 +905,7 @@ a:focus {
 	background-color: transparent;
 	border: 1px solid #eaeaea;
 	border: 1px solid rgba(51, 51, 51, 0.1);
-	height: 48px;
+	height: 42px;
 	overflow: hidden;
 	padding: 0;
 	position: absolute;
@@ -915,13 +915,13 @@ a:focus {
 	-webkit-transform: translateY(-50%);
 	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
-	width: 48px;
+	width: 42px;
 }
 
 .secondary-toggle:before {
 	color: #333;
 	content: "\f419";
-	line-height: 48px;
+	line-height: 42px;
 	position: relative;
 	top: -1px;
 	left: 0;