Twenty Fourteen: remove the pattern image used as a placeholder for featured images. This greatly improves the "first run" experience of the theme and gives it a more general appeal as a blog theme by putting less of a requirement on featured images. Props iamtakashi, fixes #25859.

Built from https://develop.svn.wordpress.org/trunk@26034


git-svn-id: http://core.svn.wordpress.org/trunk@25963 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-11-07 17:29:10 +00:00
parent b9387f0621
commit d028b169d2
2 changed files with 76 additions and 107 deletions

View File

@ -165,31 +165,30 @@ add_action( 'save_post', 'twentyfourteen_category_transient_flusher' );
* @return void * @return void
*/ */
function twentyfourteen_post_thumbnail() { function twentyfourteen_post_thumbnail() {
if ( post_password_required() ) if ( post_password_required() || ! has_post_thumbnail() )
return; return;
if ( is_singular() ) : if ( is_singular() ) :
?> ?>
<div class="post-thumbnail"> <div class="post-thumbnail">
<?php <?php
if ( is_active_sidebar( 'sidebar-2' ) || wp_is_mobile() ) if ( is_active_sidebar( 'sidebar-2' ) || wp_is_mobile() )
the_post_thumbnail( 'post-thumbnail' ); the_post_thumbnail( 'post-thumbnail' );
else else
the_post_thumbnail( 'post-thumbnail-full-width' ); the_post_thumbnail( 'post-thumbnail-full-width' );
?> ?>
</div> </div>
<?php else : ?> <?php else : ?>
<a class="post-thumbnail" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>"> <a class="post-thumbnail" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">
<?php if ( has_post_thumbnail() && ( is_active_sidebar( 'sidebar-2' ) || wp_is_mobile() ) ) : <?php
the_post_thumbnail( 'post-thumbnail' ); if ( is_active_sidebar( 'sidebar-2' ) || wp_is_mobile() )
elseif ( has_post_thumbnail() ) : the_post_thumbnail( 'post-thumbnail' );
the_post_thumbnail( 'post-thumbnail-full-width' ); else
else : ?> the_post_thumbnail( 'post-thumbnail-full-width' );
<p class="screen-reader-text"><?php _e( 'No featured image.', 'twentyfourteen' ); ?></p> ?>
<?php endif; ?>
</a> </a>
<?php endif; // End is_singular() <?php endif; // End is_singular()

View File

@ -998,7 +998,7 @@ span + .edit-link:before,
} }
.hentry { .hentry {
margin-bottom: 36px; margin-bottom: 48px;
max-width: 672px; max-width: 672px;
} }
@ -1011,37 +1011,37 @@ span + .edit-link:before,
max-width: 474px; max-width: 474px;
} }
.page-content {
margin-bottom: 48px;
}
.hentry > :last-child {
margin-bottom: 0
}
/** /**
* 6.1 Post Thumbnail * 6.1 Post Thumbnail
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
.post-thumbnail { .post-thumbnail {
background: #767676 url(images/pattern-light.svg) repeat fixed; background: #b2b2b2 url(images/pattern-light.svg) repeat fixed;
display: none; display: block;
height: auto;
margin: 0;
min-height: 192px;
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 0; z-index: 0;
} }
a.post-thumbnail:hover { a.post-thumbnail:hover {
background-color: #919191; background-color: #999;
} }
.post-thumbnail img { .full-width .post-thumbnail img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.has-post-thumbnail .post-thumbnail,
.format-standard .post-thumbnail {
display: block;
}
/** /**
* 6.2 Entry Header * 6.2 Entry Header
@ -1075,15 +1075,10 @@ a.post-thumbnail:hover {
padding: 0 10px 12px; padding: 0 10px 12px;
} }
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
padding-top: 24px; padding-top: 24px;
} }
.site-content .format-standard.post-password-required .entry-header {
padding-top: 0;
}
/** /**
* 6.3 Entry Meta * 6.3 Entry Meta
@ -1144,8 +1139,7 @@ a.post-thumbnail:hover {
} }
.site-content footer.entry-meta:empty { .site-content footer.entry-meta:empty {
margin-top: 0; margin: 0;
margin-bottom: 0;
} }
@ -1159,7 +1153,7 @@ a.post-thumbnail:hover {
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
line-height: 1.2727272727; line-height: 1.2727272727;
margin: 0 4px 4px 10px; margin: 2px 4px 2px 10px;
padding: 3px 7px; padding: 3px 7px;
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
@ -1320,7 +1314,7 @@ a.post-thumbnail:hover {
font-size: 12px; font-size: 12px;
font-weight: 900; font-weight: 900;
line-height: 2; line-height: 2;
margin-bottom: 24px; margin: 24px 0;
text-transform: uppercase; text-transform: uppercase;
} }
@ -1578,7 +1572,7 @@ a.post-thumbnail:hover {
.paging-navigation { .paging-navigation {
border-top: 5px solid #000; border-top: 5px solid #000;
margin: 36px 0; margin: 48px 0;
} }
.paging-navigation .loop-pagination { .paging-navigation .loop-pagination {
@ -1640,7 +1634,7 @@ a.post-thumbnail:hover {
.archive-header, .archive-header,
.page-header { .page-header {
margin: 0 auto 12px; margin: 24px auto;
max-width: 474px; max-width: 474px;
} }
@ -1656,9 +1650,16 @@ a.post-thumbnail:hover {
color: #767676; color: #767676;
font-size: 14px; font-size: 14px;
line-height: 1.2857142857; line-height: 1.2857142857;
}
.taxonomy-description p {
margin-bottom: 18px; margin-bottom: 18px;
} }
.taxonomy-description p:last-child {
margin-bottom: 0;
}
/** /**
* 6.10 Contributor Page * 6.10 Contributor Page
@ -1745,15 +1746,10 @@ a.post-thumbnail:hover {
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
.singular .hentry.format-standard,
.singular .hentry.has-post-thumbnail { .singular .hentry.has-post-thumbnail {
margin-top: -24px; margin-top: -24px;
} }
.singular .hentry.format-standard.post-password-required {
margin-top: 0
}
/** /**
* 6.14 Comments * 6.14 Comments
@ -2697,7 +2693,6 @@ a.post-thumbnail:hover {
.featured-content .post-thumbnail { .featured-content .post-thumbnail {
display: block; display: block;
min-height: 0;
position: relative; position: relative;
padding-top: 55.357142857%; padding-top: 55.357142857%;
} }
@ -2868,7 +2863,6 @@ a.post-thumbnail:hover {
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.list-view .site-content .post-thumbnail { .list-view .site-content .post-thumbnail {
background: none; background: none;
min-height: 0;
width: auto; width: auto;
z-index: 2; z-index: 2;
} }
@ -2927,11 +2921,13 @@ a.post-thumbnail:hover {
.archive-header, .archive-header,
.page-header { .page-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 12px; margin: 24px auto 0;
padding-bottom: 24px;
} }
.error404 .page-header { .error404 .page-header {
border-bottom: 0; border-bottom: 0;
margin: 0 auto 24px;
padding: 0 10px; padding: 0 10px;
} }
} }
@ -3046,21 +3042,31 @@ a.post-thumbnail:hover {
margin: -1px 2px 0 0; margin: -1px 2px 0 0;
} }
.list-view .site-content .has-post-thumbnail .post-thumbnail,
.list-view .site-content .format-standard .post-thumbnail {
margin-top: -49px;
}
.list-view .site-content .hentry { .list-view .site-content .hentry {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 48px; padding-top: 60px;
}
.list-view .site-content .hentry:first-child,
.list-view .site-content .hentry:first-of-type,
.list-view .site-content .hentry.has-post-thumbnail {
border-top: 0;
padding-top: 0;
} }
.archive-header, .archive-header,
.page-header { .page-header {
margin-bottom: 24px; margin: 0 auto 60px;
padding: 0 10px; padding: 0 10px;
} }
.error404 .page-header {
margin-bottom: 24px;
}
.featured-content {
margin-bottom: 48px;
}
} }
@media screen and (min-width: 594px) { @media screen and (min-width: 594px) {
@ -3069,14 +3075,9 @@ a.post-thumbnail:hover {
padding-left: 30px; padding-left: 30px;
} }
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
margin-top: -48px; margin-top: -48px;
} }
.site-content .format-standard.post-password-required .entry-header {
margin-top: 0;
}
} }
@media screen and (min-width: 673px) { @media screen and (min-width: 673px) {
@ -3094,7 +3095,7 @@ a.post-thumbnail:hover {
.content-area { .content-area {
float: left; float: left;
padding-top: 36px; padding-top: 48px;
width: 100%; width: 100%;
} }
@ -3102,8 +3103,7 @@ a.post-thumbnail:hover {
margin-right: 33.33333333%; margin-right: 33.33333333%;
} }
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
margin-top: 0; margin-top: 0;
} }
@ -3120,9 +3120,7 @@ a.post-thumbnail:hover {
padding-left: 30px; padding-left: 30px;
} }
.singular .hentry.format-standard, .singular .hentry.has-post-thumbnail {
.singular .hentry.has-post-thumbnail,
.singular .hentry.format-standard.post-password-required {
margin-top: 0 margin-top: 0
} }
@ -3130,22 +3128,12 @@ a.post-thumbnail:hover {
margin-right: 0; margin-right: 0;
} }
.full-width .site-content .has-post-thumbnail .entry-header, .full-width .site-content .has-post-thumbnail .entry-header {
.full-width .site-content .format-standard .entry-header {
margin-top: -48px; margin-top: -48px;
} }
.full-width .site-content .format-standard.post-password-required .entry-header {
margin-top: 0
}
.full-width.singular .hentry.format-standard,
.full-width.singular .hentry.has-post-thumbnail { .full-width.singular .hentry.has-post-thumbnail {
margin-top: -36px; margin-top: -48px;
}
.full-width.singular .hentry.format-standard.post-password-required {
margin-top: 0
} }
#secondary, #secondary,
@ -3157,10 +3145,14 @@ a.post-thumbnail:hover {
border: 0; border: 0;
float: right; float: right;
margin-left: -33.33333333%; margin-left: -33.33333333%;
padding: 36px 30px 24px; padding: 48px 30px 24px;
width: 33.33333333%; width: 33.33333333%;
} }
.featured-content {
margin-bottom: 24px;
}
.grid .featured-content .hentry { .grid .featured-content .hentry {
float: left; float: left;
width: 50%; width: 50%;
@ -3406,15 +3398,10 @@ a.post-thumbnail:hover {
padding-top: 72px; padding-top: 72px;
} }
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
margin-top: -48px; margin-top: -48px;
} }
.site-content .format-standard.post-password-required .entry-header {
margin-top: 0;
}
.comment-list .trackback, .comment-list .trackback,
.comment-list .pingback, .comment-list .pingback,
.comment-list article { .comment-list article {
@ -3439,17 +3426,12 @@ a.post-thumbnail:hover {
margin-left: 35px; margin-left: 35px;
} }
.full-width.singular .hentry.format-standard,
.full-width.singular .hentry.has-post-thumbnail { .full-width.singular .hentry.has-post-thumbnail {
margin-top: -72px; margin-top: -72px;
} }
.full-width.singular .hentry.format-standard.post-password-required {
margin-top: 0
}
.featured-content { .featured-content {
margin-bottom: -24px; margin-bottom: 0
} }
} }
@ -3471,8 +3453,7 @@ a.post-thumbnail:hover {
margin-top: 0; margin-top: 0;
} }
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
margin-top: 0; margin-top: 0;
} }
@ -3727,15 +3708,10 @@ a.post-thumbnail:hover {
} }
@media screen and (min-width: 1040px) { @media screen and (min-width: 1040px) {
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
margin-top: -48px; margin-top: -48px;
} }
.site-content .format-standard.post-password-required .entry-header {
margin-top: 0;
}
.archive-header, .archive-header,
.comments-area, .comments-area,
.image-navigation, .image-navigation,
@ -3988,16 +3964,11 @@ a.post-thumbnail:hover {
padding-bottom: 24px; padding-bottom: 24px;
} }
.post-thumbnail {
min-height: 0;
}
.post-thumbnail img { .post-thumbnail img {
margin: 0 10px 24px; margin: 0 10px 24px;
} }
.site-content .has-post-thumbnail .entry-header, .site-content .has-post-thumbnail .entry-header {
.site-content .format-standard .entry-header {
padding-top: 0; padding-top: 0;
} }
@ -4009,7 +3980,6 @@ a.post-thumbnail:hover {
color: #fff; color: #fff;
} }
.singular .hentry.format-standard,
.singular .hentry.has-post-thumbnail { .singular .hentry.has-post-thumbnail {
margin-top: 0; margin-top: 0;
} }