From 581c043c22e529bb226076eff51970525b2a0ca4 Mon Sep 17 00:00:00 2001
From: Lance Willett <nanobar@gmail.com>
Date: Fri, 6 Jun 2014 17:31:15 +0000
Subject: [PATCH] Twenty Fourteen: Apply `max-width` values to avoid site title
 breaking the layout in small screens. Props sixhours, rclations. See #28237.
 Built from https://develop.svn.wordpress.org/trunk@28691

git-svn-id: http://core.svn.wordpress.org/trunk@28509 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-content/themes/twentyfourteen/style.css | 29 ++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/wp-content/themes/twentyfourteen/style.css b/wp-content/themes/twentyfourteen/style.css
index 3fa33c372e..540f4bfb5e 100644
--- a/wp-content/themes/twentyfourteen/style.css
+++ b/wp-content/themes/twentyfourteen/style.css
@@ -863,8 +863,12 @@ span + .edit-link:before,
 	font-weight: 700;
 	line-height: 48px;
 	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
+.site-title,
 .site-title a,
 .site-title a:hover {
 	color: #fff;
@@ -3005,6 +3009,10 @@ a.post-thumbnail:hover {
 }
 
 @media screen and (max-width: 400px) {
+	.site-title {
+		max-width: 71%;
+	}
+
 	.list-view .site-content .post-thumbnail {
 		background: none;
 		width: auto;
@@ -3079,6 +3087,10 @@ a.post-thumbnail:hover {
 }
 
 @media screen and (min-width: 401px) {
+	.site-title {
+		max-width: 77%;
+	}
+
 	a.post-thumbnail:hover img {
 		opacity: 0.85;
 	}
@@ -3207,6 +3219,10 @@ a.post-thumbnail:hover {
 }
 
 @media screen and (min-width: 594px) {
+	.site-title {
+		max-width: 85%;
+	}
+
 	.site-content .entry-header {
 		padding-right: 30px;
 		padding-left: 30px;
@@ -3222,6 +3238,10 @@ a.post-thumbnail:hover {
 		padding: 0 30px;
 	}
 
+	.site-title {
+		max-width: 89%;
+	}
+
 	.search-toggle {
 		margin-right: 18px;
 	}
@@ -3357,6 +3377,10 @@ a.post-thumbnail:hover {
 		padding-right: 0;
 	}
 
+	.site-title {
+		max-width: 93%;
+	}
+
 	.search-toggle {
 		margin-right: 0;
 	}
@@ -3604,6 +3628,10 @@ a.post-thumbnail:hover {
 }
 
 @media screen and (min-width: 1008px) {
+	.site-title {
+		max-width: 95%;
+	}
+
 	.search-box-wrapper {
 		padding-left: 182px;
 	}
@@ -4125,6 +4153,7 @@ a.post-thumbnail:hover {
 		display: none;
 	}
 
+	.site-title,
 	.site-title a,
 	.entry-meta,
 	.entry-meta a,