Changeset 30564

Timestamp:

11/25/2014 02:46:13 PM (10 years ago)

Author:

iandstewart

Message:

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

Props iamtakashi, fixes #30326.

Location:

trunk/src/wp-content/themes/twentyfifteen

Files:

• inc/custom-header.php (modified) (1 diff)
• style.css (modified) (3 diffs)

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

@@ -90 +90 @@
     <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 ) ) :
     ?>

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

@@ -906 +906 @@
     border: 1px solid #eaeaea;
     border: 1px solid rgba(51, 51, 51, 0.1);
-    height: 48px;
+    height: 42px;
     overflow: hidden;
     padding: 0;
@@ -916 +916 @@
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
-    width: 48px;
+    width: 42px;
 }
 
@@ -922 +922 @@
     color: #333;
     content: "\f419";
-    line-height: 48px;
+    line-height: 42px;
     position: relative;
     top: -1px;