Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-26 22:32:52 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Props celloexpressions, schoenwaldnils, and obenland -- fixes #28237.
Built from https://develop.svn.wordpress.org/trunk@29096


git-svn-id: http://core.svn.wordpress.org/trunk@28882 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2014-07-11 18:01:14 +00:00
parent 8a0a5ce1d2
commit f409bd9516
2 changed files with 18 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-content/themes/twentyfourteen/css/ie.css
View File

@ -29,6 +29,10 @@ textarea:focus {
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
} }
.site-title {
max-width: 71%;
}
.site-content blockquote.alignleft, .site-content blockquote.alignleft,
.site-content blockquote.alignright { .site-content blockquote.alignright {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;

43
wp-content/themes/twentyfourteen/style.css
View File

@ -863,15 +863,19 @@ span + .edit-link:before,
font-weight: 700; font-weight: 700;
line-height: 48px; line-height: 48px;
margin: 0; margin: 0;
overflow: hidden;
text-overflow: ellipsis; /* Nav-toggle width + search-toggle width - gutter = 86px */
white-space: nowrap; max-width: -webkit-calc(100% - 86px);
max-width: calc(100% - 86px);
} }
.site-title,
.site-title a, .site-title a,
.site-title a:hover { .site-title a:hover {
color: #fff; color: #fff;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* Search in the header */ /* Search in the header */
@ -3080,10 +3084,6 @@ a.post-thumbnail:hover {
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.site-title {
max-width: 71%;
}
.list-view .site-content .post-thumbnail { .list-view .site-content .post-thumbnail {
background: none; background: none;
width: auto; width: auto;
@ -3158,10 +3158,6 @@ a.post-thumbnail:hover {
} }
@media screen and (min-width: 401px) { @media screen and (min-width: 401px) {
.site-title {
max-width: 77%;
}
a.post-thumbnail:hover img { a.post-thumbnail:hover img {
opacity: 0.85; opacity: 0.85;
} }
@ -3290,10 +3286,6 @@ a.post-thumbnail:hover {
} }
@media screen and (min-width: 594px) { @media screen and (min-width: 594px) {
.site-title {
max-width: 85%;
}
.site-content .entry-header { .site-content .entry-header {
padding-right: 30px; padding-right: 30px;
padding-left: 30px; padding-left: 30px;
@ -3309,10 +3301,6 @@ a.post-thumbnail:hover {
padding: 0 30px; padding: 0 30px;
} }
.site-title {
max-width: 89%;
}
.search-toggle { .search-toggle {
margin-right: 18px; margin-right: 18px;
} }
@ -3444,12 +3432,14 @@ a.post-thumbnail:hover {
} }
@media screen and (min-width: 783px) { @media screen and (min-width: 783px) {
.header-main { .site-title {
padding-right: 0; /* Search-toggle width = 48px */
max-width: -webkit-calc(100% - 48px);
max-width: calc(100% - 48px);
} }
.site-title { .header-main {
max-width: 93%; padding-right: 0;
} }
.search-toggle { .search-toggle {
@ -3699,10 +3689,6 @@ a.post-thumbnail:hover {
} }
@media screen and (min-width: 1008px) { @media screen and (min-width: 1008px) {
.site-title {
max-width: 95%;
}
.search-box-wrapper { .search-box-wrapper {
padding-left: 182px; padding-left: 182px;
} }
@ -4224,7 +4210,6 @@ a.post-thumbnail:hover {
display: none; display: none;
} }
.site-title,
.site-title a, .site-title a,
.entry-meta, .entry-meta,
.entry-meta a, .entry-meta a,