Changeset 29096

Timestamp:

07/11/2014 06:00:28 PM (10 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: more graceful handling of super-long site titles in small screens: add an ellipsis and adjust max-width more carefully.

Props celloexpressions, schoenwaldnils, and obenland -- fixes #28237.

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• css/ie.css (modified) (1 diff)
• style.css (modified) (8 diffs)

trunk/src/wp-content/themes/twentyfourteen/css/ie.css

@@ -28 +28 @@
 textarea:focus {
     border: 1px solid #b2b2b2;
+}
+
+.site-title {
+    max-width: 71%;
 }
 

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

@@ -864 +864 @@
     line-height: 48px;
     margin: 0;
+
+    /* Nav-toggle width + search-toggle width - gutter = 86px */
+    max-width: -webkit-calc(100% - 86px);
+    max-width:         calc(100% - 86px);
+}
+
+.site-title a,
+.site-title a:hover {
+    color: #fff;
+    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
-
-.site-title,
-.site-title a,
-.site-title a:hover {
-    color: #fff;
 }
 
@@ -3081 +3085 @@
 
 @media screen and (max-width: 400px) {
-    .site-title {
-        max-width: 71%;
-    }
-
     .list-view .site-content .post-thumbnail {
         background: none;
@@ -3159 +3159 @@
 
 @media screen and (min-width: 401px) {
-    .site-title {
-        max-width: 77%;
-    }
-
     a.post-thumbnail:hover img {
         opacity: 0.85;
@@ -3291 +3287 @@
 
 @media screen and (min-width: 594px) {
-    .site-title {
-        max-width: 85%;
-    }
-
     .site-content .entry-header {
         padding-right: 30px;
@@ -3308 +3300 @@
     .header-main {
         padding: 0 30px;
-    }
-
-    .site-title {
-        max-width: 89%;
     }
 
@@ -3445 +3433 @@
 
 @media screen and (min-width: 783px) {
+    .site-title {
+        /* Search-toggle width = 48px */
+        max-width: -webkit-calc(100% - 48px);
+        max-width:         calc(100% - 48px);
+    }
+
     .header-main {
         padding-right: 0;
-    }
-
-    .site-title {
-        max-width: 93%;
     }
 
@@ -3700 +3690 @@
 
 @media screen and (min-width: 1008px) {
-    .site-title {
-        max-width: 95%;
-    }
-
     .search-box-wrapper {
         padding-left: 182px;
@@ -4225 +4211 @@
     }
 
-    .site-title,
     .site-title a,
     .entry-meta,