Changeset 30564

Timestamp:

11/25/2014 02:46:13 PM (12 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;