Twenty Eleven: style.css cleanup and Showcase template improvements, props matveb - see #17198
* Add full support for the featured slider powered by JS (except auto-slide) * Change the title hover state of large stickies to white * Prevent plain text posts from being displayed transparently over images * Update slider featured image size to 500x300 * Add comment blocks to showcase.php git-svn-id: http://svn.automattic.com/wordpress/trunk@17761 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
65cbcea31c
commit
372e5fd8de
|
@ -128,8 +128,8 @@ function twentyeleven_setup() {
|
||||||
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
|
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
|
||||||
|
|
||||||
// Add Twenty Eleven's custom image sizes
|
// Add Twenty Eleven's custom image sizes
|
||||||
add_image_size( 'large-feature', HEADER_IMAGE_WIDTH, 500, true ); // Used for large feature images
|
add_image_size( 'large-feature', HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); // Used for large feature images
|
||||||
add_image_size( 'small-feature', 500, 500 ); // Used for featured posts if a large-feature doesn't exist
|
add_image_size( 'small-feature', 500, 300 ); // Used for featured posts if a large-feature doesn't exist
|
||||||
|
|
||||||
// Add a way for the custom header to be styled in the admin panel that controls
|
// Add a way for the custom header to be styled in the admin panel that controls
|
||||||
// custom headers. See twentyeleven_admin_header_style(), below.
|
// custom headers. See twentyeleven_admin_header_style(), below.
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
(function($) {
|
||||||
|
$(document).ready( function() {
|
||||||
|
$('.feature-slider a').click(function(e) {
|
||||||
|
$('.featured-posts section.featured-post').css({
|
||||||
|
opacity: 0,
|
||||||
|
visibility: 'hidden'
|
||||||
|
});
|
||||||
|
$(this.hash).css({
|
||||||
|
opacity: 1,
|
||||||
|
visibility: 'visible'
|
||||||
|
});
|
||||||
|
$('.feature-slider a').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})(jQuery);
|
|
@ -3,10 +3,19 @@
|
||||||
* Template Name: Showcase Template
|
* Template Name: Showcase Template
|
||||||
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
|
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
|
||||||
*
|
*
|
||||||
|
* The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
|
||||||
|
* another recent posts area (with the latest post shown in full and the rest as a list)
|
||||||
|
* and a left sidebar holding aside posts.
|
||||||
|
*
|
||||||
|
* We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
|
||||||
|
*
|
||||||
* @package WordPress
|
* @package WordPress
|
||||||
* @subpackage Twenty Eleven
|
* @subpackage Twenty Eleven
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// Enqueue showcase script for the slider
|
||||||
|
wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
|
||||||
|
|
||||||
get_header(); ?>
|
get_header(); ?>
|
||||||
|
|
||||||
<div id="primary" class="showcase">
|
<div id="primary" class="showcase">
|
||||||
|
@ -15,33 +24,56 @@ get_header(); ?>
|
||||||
<?php the_post(); ?>
|
<?php the_post(); ?>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
// If we have content for this page, let's display it.
|
/**
|
||||||
|
* We are using a heading by rendering the_content
|
||||||
|
* If we have content for this page, let's display it.
|
||||||
|
*/
|
||||||
if ( '' != get_the_content() )
|
if ( '' != get_the_content() )
|
||||||
get_template_part( 'content', 'intro' );
|
get_template_part( 'content', 'intro' );
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
// See if we have any sticky posts and use the latest to create a featured post
|
/**
|
||||||
|
* Begin the featured posts section.
|
||||||
|
*
|
||||||
|
* See if we have any sticky posts and use them to create our featured posts.
|
||||||
|
*/
|
||||||
$sticky = get_option( 'sticky_posts' );
|
$sticky = get_option( 'sticky_posts' );
|
||||||
$featured_args = array(
|
$featured_args = array(
|
||||||
'posts_per_page' => 1,
|
'posts_per_page' => 4,
|
||||||
'post__in' => $sticky,
|
'post__in' => $sticky,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// The Featured Posts query.
|
||||||
$featured = new WP_Query();
|
$featured = new WP_Query();
|
||||||
$featured->query( $featured_args );
|
$featured->query( $featured_args );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* We will need to count featured posts starting from zero
|
||||||
|
* to create the slider navigation.
|
||||||
|
*/
|
||||||
|
$counter_slider = 0;
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="featured-posts">
|
||||||
|
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
|
||||||
|
|
||||||
|
<?php
|
||||||
// Let's roll.
|
// Let's roll.
|
||||||
if ( $sticky ) :
|
while ( $featured->have_posts() ) : $featured->the_post();
|
||||||
|
|
||||||
$featured->the_post();
|
// Increase the counter.
|
||||||
|
$counter_slider++;
|
||||||
|
|
||||||
// We're going to add a class to our featured post for featured images
|
/**
|
||||||
// by default it'll have no class though
|
* We're going to add a class to our featured post for featured images
|
||||||
|
* by default it'll have no class though.
|
||||||
|
*/
|
||||||
$feature_class = '';
|
$feature_class = '';
|
||||||
|
|
||||||
if ( has_post_thumbnail() ) {
|
if ( has_post_thumbnail() ) {
|
||||||
// … but if it has a featured image let's add some class
|
// ... but if it has a featured image let's add some class
|
||||||
$feature_class = 'feature-image small';
|
$feature_class = 'feature-image small';
|
||||||
|
|
||||||
// Hang on. Let's check this here image out.
|
// Hang on. Let's check this here image out.
|
||||||
|
@ -49,20 +81,23 @@ get_header(); ?>
|
||||||
|
|
||||||
// Is it bigger than or equal to our header?
|
// Is it bigger than or equal to our header?
|
||||||
if ( $image[1] >= HEADER_IMAGE_WIDTH ) {
|
if ( $image[1] >= HEADER_IMAGE_WIDTH ) {
|
||||||
// Let's add a BIGGER class. It's EXTRA classy now.
|
// If bigger, let's add a BIGGER class. It's EXTRA classy now.
|
||||||
$feature_class = 'feature-image large';
|
$feature_class = 'feature-image large';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<?php if ( has_post_thumbnail() ) : ?>
|
<?php if ( has_post_thumbnail() ) : ?>
|
||||||
<section class="featured-post <?php echo $feature_class; ?>">
|
<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
|
||||||
<?php else : ?>
|
<?php else : ?>
|
||||||
<section class="featured-post">
|
<section class="featured-post" id="featured-post-<?php echo $counter_slider; ?>">
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
|
|
||||||
<?php
|
<?php
|
||||||
// Dynamic thumbnails!
|
/**
|
||||||
|
* If the thumbnail is as big as the header image
|
||||||
|
* make it a large featured post, otherwise render it small
|
||||||
|
*/
|
||||||
if ( has_post_thumbnail() ) {
|
if ( has_post_thumbnail() ) {
|
||||||
if ( $image[1] >= HEADER_IMAGE_WIDTH ) { ?>
|
if ( $image[1] >= HEADER_IMAGE_WIDTH ) { ?>
|
||||||
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"> <?php the_post_thumbnail( 'large-feature' ); ?></a>
|
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"> <?php the_post_thumbnail( 'large-feature' ); ?></a>
|
||||||
|
@ -73,14 +108,43 @@ get_header(); ?>
|
||||||
?>
|
?>
|
||||||
<?php get_template_part( 'content', 'featured' ); ?>
|
<?php get_template_part( 'content', 'featured' ); ?>
|
||||||
</section>
|
</section>
|
||||||
<?php endif; ?>
|
<?php endwhile; ?>
|
||||||
|
|
||||||
|
<nav class="feature-slider">
|
||||||
|
<ul>
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* We need to query the same set of posts again
|
||||||
|
* to populate the navigation dots
|
||||||
|
*/
|
||||||
|
$featured->query( $featured_args );
|
||||||
|
|
||||||
|
// Reset the counter so that we end up with matching elements
|
||||||
|
$counter_slider = 0;
|
||||||
|
|
||||||
|
// Begin from zero
|
||||||
|
rewind_posts();
|
||||||
|
|
||||||
|
// Let's roll again.
|
||||||
|
while ( $featured->have_posts() ) : $featured->the_post();
|
||||||
|
$counter_slider++;
|
||||||
|
?>
|
||||||
|
<li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" <?php
|
||||||
|
if ( 1 == $counter_slider ) :
|
||||||
|
echo 'class="active"';
|
||||||
|
endif;
|
||||||
|
?>></a></li>
|
||||||
|
<?php endwhile; ?>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="recent-posts">
|
<section class="recent-posts">
|
||||||
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
|
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
// Display our recent posts, showing full content for the very latest, ignoring Aside posts
|
// Display our recent posts, showing full content for the very latest, ignoring Aside posts.
|
||||||
$recent_args = array(
|
$recent_args = array(
|
||||||
'order' => 'DESC',
|
'order' => 'DESC',
|
||||||
'post__not_in' => get_option( 'sticky_posts' ),
|
'post__not_in' => get_option( 'sticky_posts' ),
|
||||||
|
@ -93,12 +157,13 @@ get_header(); ?>
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
// Our new query for the Recent Posts section.
|
||||||
$recent = new WP_Query();
|
$recent = new WP_Query();
|
||||||
$recent->query( $recent_args );
|
$recent->query( $recent_args );
|
||||||
$counter = 0;
|
$counter = 0;
|
||||||
|
|
||||||
while ( $recent->have_posts() ) : $recent->the_post();
|
while ( $recent->have_posts() ) : $recent->the_post();
|
||||||
// set $more to 0 in order to only get the first part of the post
|
// Set $more to 0 in order to only get the first part of the post.
|
||||||
global $more;
|
global $more;
|
||||||
$more = 0;
|
$more = 0;
|
||||||
$counter++;
|
$counter++;
|
||||||
|
|
|
@ -603,10 +603,6 @@ a:hover {
|
||||||
top: 5px;
|
top: 5px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
#branding .with-image #searchform {
|
|
||||||
bottom: -27px;
|
|
||||||
top: auto;
|
|
||||||
}
|
|
||||||
#branding .only-search #s {
|
#branding .only-search #s {
|
||||||
background-color: #666;
|
background-color: #666;
|
||||||
border-color: #000;
|
border-color: #000;
|
||||||
|
@ -615,6 +611,10 @@ a:hover {
|
||||||
#branding .only-search #s:focus {
|
#branding .only-search #s:focus {
|
||||||
background-color: #bbb;
|
background-color: #bbb;
|
||||||
}
|
}
|
||||||
|
#branding .with-image #searchform {
|
||||||
|
bottom: -27px;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =Content
|
/* =Content
|
||||||
|
@ -679,10 +679,6 @@ a:hover {
|
||||||
.entry-meta a {
|
.entry-meta a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.entry-meta a:focus,
|
|
||||||
.entry-meta a:active,
|
|
||||||
.entry-meta a:hover {
|
|
||||||
}
|
|
||||||
.entry-content,
|
.entry-content,
|
||||||
.entry-summary {
|
.entry-summary {
|
||||||
padding: 1.625em 0 0;
|
padding: 1.625em 0 0;
|
||||||
|
@ -702,10 +698,6 @@ a:hover {
|
||||||
line-height: 2.6em;
|
line-height: 2.6em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.entry-content a {
|
|
||||||
}
|
|
||||||
.entry-content a:hover {
|
|
||||||
}
|
|
||||||
.entry-content table,
|
.entry-content table,
|
||||||
.comment-content table {
|
.comment-content table {
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
|
@ -767,9 +759,9 @@ dl.gallery-item {
|
||||||
}
|
}
|
||||||
.entry-meta .edit-link a {
|
.entry-meta .edit-link a {
|
||||||
background: #aaa;
|
background: #aaa;
|
||||||
color: #fff;
|
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
color: #fff;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
@ -809,10 +801,10 @@ dl.gallery-item {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 3px;
|
|
||||||
-webkit-box-shadow: 0 1px 2px #bbb;
|
-webkit-box-shadow: 0 1px 2px #bbb;
|
||||||
-moz-box-shadow: 0 1px 2px #bbb;
|
-moz-box-shadow: 0 1px 2px #bbb;
|
||||||
box-shadow: 0 1px 2px #bbb;
|
box-shadow: 0 1px 2px #bbb;
|
||||||
|
padding: 3px;
|
||||||
}
|
}
|
||||||
#author-description {
|
#author-description {
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -833,21 +825,21 @@ dl.gallery-item {
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
color: #777;
|
color: #777;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
line-height: 46px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
font-weight: 300;
|
|
||||||
line-height: 46px;
|
|
||||||
}
|
}
|
||||||
.entry-header .comments-link a:hover {
|
.entry-header .comments-link a:hover {
|
||||||
background: #777;
|
background: #777;
|
||||||
color: #fff;
|
|
||||||
border-color: #555;
|
border-color: #555;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
.entry-header .comments-link .leave-reply {
|
.entry-header .comments-link .leave-reply {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -875,18 +867,11 @@ dl.gallery-item {
|
||||||
.singular .entry-header .entry-meta {
|
.singular .entry-header .entry-meta {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.singular .entry-header .entry-meta {
|
.singular .entry-header .entry-meta {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.singular .entry-header a {
|
|
||||||
}
|
|
||||||
.singular .entry-header a:hover {
|
|
||||||
}
|
|
||||||
.singular footer.entry-meta {
|
|
||||||
}
|
|
||||||
.singular blockquote.pull {
|
.singular blockquote.pull {
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -904,10 +889,10 @@ dl.gallery-item {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
}
|
||||||
.singular .entry-meta .edit-link a {
|
.singular .entry-meta .edit-link a {
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
left: 50px;
|
color: #fff;
|
||||||
|
left: 50px;
|
||||||
|
position: absolute;
|
||||||
right: auto;
|
right: auto;
|
||||||
top: 80px;
|
top: 80px;
|
||||||
}
|
}
|
||||||
|
@ -1004,8 +989,8 @@ dl.gallery-item {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-width: 1px 0;
|
border-width: 1px 0;
|
||||||
margin: 0 -8.9% 1.625em;
|
margin: 0 -8.9% 1.625em;
|
||||||
padding: 1.625em 8.9%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 1.625em 8.9%;
|
||||||
}
|
}
|
||||||
.error404 #main #s {
|
.error404 #main #s {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
@ -1061,9 +1046,9 @@ article.intro .entry-content {
|
||||||
article.intro .edit-link a {
|
article.intro .edit-link a {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #aaa;
|
background: #aaa;
|
||||||
color: #fff;
|
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
color: #fff;
|
||||||
padding: 0px 8px;
|
padding: 0px 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
@ -1076,7 +1061,6 @@ article.intro .edit-link a:hover {
|
||||||
|
|
||||||
/* Featured post */
|
/* Featured post */
|
||||||
section.featured-post {
|
section.featured-post {
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
float: left;
|
float: left;
|
||||||
margin: -1.625em -8.9% 1.625em;
|
margin: -1.625em -8.9% 1.625em;
|
||||||
padding: 1.625em 8.9% 0;
|
padding: 1.625em 8.9% 0;
|
||||||
|
@ -1086,7 +1070,6 @@ section.featured-post {
|
||||||
section.featured-post .hentry {
|
section.featured-post .hentry {
|
||||||
border: none;
|
border: none;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 13px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
section.featured-post .entry-meta {
|
section.featured-post .entry-meta {
|
||||||
|
@ -1103,7 +1086,7 @@ section.featured-post .attachment-small-feature {
|
||||||
margin: -10px -8.9% 1.625em 0;
|
margin: -10px -8.9% 1.625em 0;
|
||||||
max-width: 59%;
|
max-width: 59%;
|
||||||
position: relative;
|
position: relative;
|
||||||
right: -20px;
|
right: -35px;
|
||||||
}
|
}
|
||||||
section.featured-post .attachment-small-feature:hover {
|
section.featured-post .attachment-small-feature:hover {
|
||||||
border-color: #888;
|
border-color: #888;
|
||||||
|
@ -1113,16 +1096,20 @@ article.feature-image.small {
|
||||||
margin: 0 0 1.625em;
|
margin: 0 0 1.625em;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
article.feature-image.small .entry-summary {
|
||||||
|
color: #555;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
article.feature-image.small .entry-summary p a {
|
article.feature-image.small .entry-summary p a {
|
||||||
background: #222;
|
background: #222;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
display: block;
|
display: block;
|
||||||
left: -19.8%;
|
left: -23.8%;
|
||||||
padding: 4px 26px 4px 75px;
|
padding: 4px 26px 4px 85px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
width: 120px;
|
width: 180px;
|
||||||
}
|
}
|
||||||
article.feature-image.small .entry-summary p a:hover {
|
article.feature-image.small .entry-summary p a:hover {
|
||||||
background: #1b8be0;
|
background: #1b8be0;
|
||||||
|
@ -1141,10 +1128,10 @@ section.feature-image.large .showcase-heading {
|
||||||
}
|
}
|
||||||
section.feature-image.large .hentry {
|
section.feature-image.large .hentry {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
left: 9%;
|
||||||
margin: 1.625em 9% 0 0;
|
margin: 1.625em 9% 0 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 9%;
|
|
||||||
}
|
}
|
||||||
article.feature-image.large .entry-title a {
|
article.feature-image.large .entry-title a {
|
||||||
background: #222;
|
background: #222;
|
||||||
|
@ -1152,15 +1139,15 @@ article.feature-image.large .entry-title a {
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 300;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-weight: 300;
|
||||||
padding: .2em 20px;
|
padding: .2em 20px;
|
||||||
}
|
}
|
||||||
section.feature-image.large:hover .entry-title a,
|
section.feature-image.large:hover .entry-title a,
|
||||||
section.feature-image.large .entry-title:hover a {
|
section.feature-image.large .entry-title:hover a {
|
||||||
background: #1b8be0;
|
background: #eee;
|
||||||
background: rgba(0,145,255,0.8);
|
background: rgba(255,255,255,0.8);
|
||||||
color: #bfddF3;
|
color: #222;
|
||||||
}
|
}
|
||||||
article.feature-image.large .entry-summary {
|
article.feature-image.large .entry-summary {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -1169,8 +1156,83 @@ section.feature-image.large img {
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 0 0 6px;
|
|
||||||
max-width: 117.9%;
|
max-width: 117.9%;
|
||||||
|
padding: 0 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Featured Slider */
|
||||||
|
.featured-posts {
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
display: block;
|
||||||
|
height: 340px;
|
||||||
|
margin: 1.625em -8.9% 20px;
|
||||||
|
max-width: 1000px;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.featured-posts .showcase-heading {
|
||||||
|
padding-left: 8.9%;
|
||||||
|
}
|
||||||
|
.featured-posts section.featured-post {
|
||||||
|
background: #fff;
|
||||||
|
height: 300px;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.featured-posts section.featured-post.large {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.featured-posts section.featured-post {
|
||||||
|
-webkit-transition-duration: 200ms;
|
||||||
|
-webkit-transition-property: opacity visibility;
|
||||||
|
-webkit-transition-timing-function: ease;
|
||||||
|
-moz-transition-duration: 200ms;
|
||||||
|
-moz-transition-property: opacity visibility;
|
||||||
|
-moz-transition-timing-function: ease;
|
||||||
|
}
|
||||||
|
.featured-posts section.featured-post {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.featured-posts #featured-post-1 {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
#content .feature-slider {
|
||||||
|
bottom: 0;
|
||||||
|
left: 8.9%;
|
||||||
|
overflow: visible;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.feature-slider ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.feature-slider li {
|
||||||
|
float: left;
|
||||||
|
margin: 0 6px;
|
||||||
|
}
|
||||||
|
.feature-slider a {
|
||||||
|
background: #3c3c3c;
|
||||||
|
background: rgba(60,60,60,0.9);
|
||||||
|
-moz-border-radius: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
|
||||||
|
-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
|
||||||
|
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
|
||||||
|
display: block;
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
.feature-slider a.active {
|
||||||
|
background: #fff;
|
||||||
|
background: rgba(255,255,255,0.8);
|
||||||
|
-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
|
||||||
|
-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
|
||||||
|
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Recent Posts */
|
/* Recent Posts */
|
||||||
|
@ -1209,16 +1271,16 @@ section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
|
||||||
section.recent-posts .other-recent-posts .comments-link a,
|
section.recent-posts .other-recent-posts .comments-link a,
|
||||||
section.recent-posts .other-recent-posts .comments-link > span {
|
section.recent-posts .other-recent-posts .comments-link > span {
|
||||||
border-bottom: 2px solid #999;
|
border-bottom: 2px solid #999;
|
||||||
display: block;
|
bottom: -2px;
|
||||||
color: #444;
|
color: #444;
|
||||||
text-align: right;
|
display: block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 2.76333em;
|
line-height: 2.76333em;
|
||||||
padding: 0.3125em 0 0.3125em 1em;
|
padding: 0.3125em 0 0.3125em 1em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -2px;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
@ -1247,9 +1309,9 @@ section.recent-posts .other-recent-posts li:after {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-width: 1px 0;
|
border-width: 1px 0;
|
||||||
margin: 0 -8.9% 1.625em;
|
margin: 0 -8.9% 1.625em;
|
||||||
|
overflow: hidden;
|
||||||
padding: 1.625em 1.625em 0;
|
padding: 1.625em 1.625em 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.image-attachment div.attachment img {
|
.image-attachment div.attachment img {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -1272,8 +1334,8 @@ img.size-large,
|
||||||
img.size-full,
|
img.size-full,
|
||||||
img.size-medium,
|
img.size-medium,
|
||||||
img.size-thumbnail {
|
img.size-thumbnail {
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
img.wp-smiley {
|
img.wp-smiley {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
@ -1285,8 +1347,8 @@ p img,
|
||||||
}
|
}
|
||||||
.wp-caption {
|
.wp-caption {
|
||||||
background: #f4f2ed;
|
background: #f4f2ed;
|
||||||
max-width: 96%;
|
|
||||||
margin-bottom: 1.625em;
|
margin-bottom: 1.625em;
|
||||||
|
max-width: 96%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
.wp-caption img {
|
.wp-caption img {
|
||||||
|
@ -1330,10 +1392,6 @@ p img,
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 2.2em;
|
line-height: 2.2em;
|
||||||
}
|
}
|
||||||
#content nav a:focus,
|
|
||||||
#content nav a:active,
|
|
||||||
#content nav a:hover {
|
|
||||||
}
|
|
||||||
#nav-above {
|
#nav-above {
|
||||||
padding: 0 0 1.625em;
|
padding: 0 0 1.625em;
|
||||||
}
|
}
|
||||||
|
@ -1354,7 +1412,6 @@ p img,
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -4px;
|
top: -4px;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
#nav-single .nav-previous,
|
#nav-single .nav-previous,
|
||||||
#nav-single .nav-next {
|
#nav-single .nav-next {
|
||||||
|
@ -1369,8 +1426,6 @@ p img,
|
||||||
/* =Widgets
|
/* =Widgets
|
||||||
----------------------------------------------- */
|
----------------------------------------------- */
|
||||||
|
|
||||||
#secondary {
|
|
||||||
}
|
|
||||||
.widget-area {
|
.widget-area {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
@ -1412,9 +1467,11 @@ p img,
|
||||||
width: 58%;
|
width: 58%;
|
||||||
}
|
}
|
||||||
.widget_search #searchsubmit {
|
.widget_search #searchsubmit {
|
||||||
-webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px -1px 1px inset;
|
background: #ddd;
|
||||||
background: #DDD;
|
border: 1px solid #ccc;
|
||||||
border: 1px solid #CCC;
|
-webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
|
||||||
|
-moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
|
||||||
|
box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
|
||||||
color: #888;
|
color: #888;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
|
@ -1423,9 +1480,11 @@ p img,
|
||||||
}
|
}
|
||||||
.widget_search #searchsubmit:active {
|
.widget_search #searchsubmit:active {
|
||||||
background: #1b8be0;
|
background: #1b8be0;
|
||||||
color: #BFDDF3;
|
border-color: #0861a5;
|
||||||
border-color: #0861A5;
|
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px inset;
|
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
color: #bfddf3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ephemera Widget */
|
/* Ephemera Widget */
|
||||||
|
@ -1578,41 +1637,35 @@ section.ephemera .entry-title a span {
|
||||||
.commentlist .avatar {
|
.commentlist .avatar {
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -102px;
|
|
||||||
-webkit-box-shadow: 0 1px 2px #ccc;
|
-webkit-box-shadow: 0 1px 2px #ccc;
|
||||||
-moz-box-shadow: 0 1px 2px #ccc;
|
-moz-box-shadow: 0 1px 2px #ccc;
|
||||||
box-shadow: 0 1px 2px #ccc;
|
box-shadow: 0 1px 2px #ccc;
|
||||||
|
left: -102px;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
.commentlist > li:before {
|
.commentlist > li:before {
|
||||||
content: url(images/comment-arrow.png) no-repeat;
|
content: url(images/comment-arrow.png) no-repeat;
|
||||||
position: absolute;
|
|
||||||
left: -21px;
|
left: -21px;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
.commentlist > li.pingback:before {
|
.commentlist > li.pingback:before {
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
.commentlist .children .avatar {
|
.commentlist .children .avatar {
|
||||||
background: none;
|
background: none;
|
||||||
padding: 0;
|
|
||||||
top: 2.2em;
|
|
||||||
left: 2.2em;
|
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
-moz-box-shadow: none;
|
-moz-box-shadow: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
left: 2.2em;
|
||||||
.commentlist .children .bypostauthor > article .comment-meta .vcard .avatar {
|
padding: 0;
|
||||||
|
top: 2.2em;
|
||||||
}
|
}
|
||||||
a.comment-reply-link {
|
a.comment-reply-link {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.comment-reply-link:hover,
|
|
||||||
.comment-reply-link:active,
|
|
||||||
.comment-reply-link:focus {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Post author highlighting */
|
/* Post author highlighting */
|
||||||
.commentlist > li.bypostauthor {
|
.commentlist > li.bypostauthor {
|
||||||
|
@ -1697,12 +1750,6 @@ a.comment-reply-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 68.9%;
|
width: 68.9%;
|
||||||
}
|
}
|
||||||
#respond a {
|
|
||||||
}
|
|
||||||
#respond a:focus,
|
|
||||||
#respond a:active,
|
|
||||||
#respond a:hover {
|
|
||||||
}
|
|
||||||
#respond input[type="text"],
|
#respond input[type="text"],
|
||||||
#respond textarea {
|
#respond textarea {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
@ -1733,13 +1780,12 @@ a.comment-reply-link {
|
||||||
color: #555;
|
color: #555;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
left: 4px;
|
||||||
|
min-width: 60px;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 41px;
|
top: 41px;
|
||||||
left: 4px;
|
|
||||||
min-width: 60px;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
/*text-shadow: 1px 1px 1px #fff; */
|
|
||||||
}
|
}
|
||||||
#respond input[type="text"]:focus,
|
#respond input[type="text"]:focus,
|
||||||
#respond textarea:focus {
|
#respond textarea:focus {
|
||||||
|
@ -1754,17 +1800,15 @@ a.comment-reply-link {
|
||||||
color: #bd3500;
|
color: #bd3500;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
left: 68%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 52px;
|
top: 52px;
|
||||||
left: 68%;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
#respond .comment-notes,
|
#respond .comment-notes,
|
||||||
#respond .logged-in-as {
|
#respond .logged-in-as {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
#respond .logged-in-as a {
|
|
||||||
}
|
|
||||||
#respond p {
|
#respond p {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
@ -1783,11 +1827,11 @@ a.comment-reply-link {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
left: 30px;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
padding: 5px 42px 5px 22px;
|
padding: 5px 42px 5px 22px;
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 30px;
|
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
#respond input#submit:active {
|
#respond input#submit:active {
|
||||||
background: #1b8be0;
|
background: #1b8be0;
|
||||||
|
@ -1820,10 +1864,10 @@ a.comment-reply-link {
|
||||||
line-height: 2.2em;
|
line-height: 2.2em;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.1em;
|
|
||||||
right: 1.625em;
|
right: 1.625em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
top: 1.1em;
|
||||||
}
|
}
|
||||||
#cancel-comment-reply-link:focus,
|
#cancel-comment-reply-link:focus,
|
||||||
#cancel-comment-reply-link:active,
|
#cancel-comment-reply-link:active,
|
||||||
|
@ -1893,10 +1937,6 @@ p.comment-form-comment {
|
||||||
#site-generator a {
|
#site-generator a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
#site-generator a:focus,
|
|
||||||
#site-generator a:active,
|
|
||||||
#site-generator a:hover {
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* =Responsive Structure
|
/* =Responsive Structure
|
||||||
|
@ -1936,9 +1976,9 @@ p.comment-form-comment {
|
||||||
border: none;
|
border: none;
|
||||||
display: block;
|
display: block;
|
||||||
float: none;
|
float: none;
|
||||||
|
height: auto;
|
||||||
margin: 0.625em auto 1.025em;
|
margin: 0.625em auto 1.025em;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
article.feature-image.small {
|
article.feature-image.small {
|
||||||
|
@ -1967,8 +2007,8 @@ p.comment-form-comment {
|
||||||
margin: 0 0 0 1.625em;
|
margin: 0 0 0 1.625em;
|
||||||
}
|
}
|
||||||
.singular .entry-meta .edit-link a {
|
.singular .entry-meta .edit-link a {
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
position: absolute;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
}
|
}
|
||||||
.singular #author-info {
|
.singular #author-info {
|
||||||
|
@ -2024,11 +2064,11 @@ p.comment-form-comment {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
.commentlist .children .avatar {
|
.commentlist .children .avatar {
|
||||||
position: absolute;
|
|
||||||
background: none;
|
background: none;
|
||||||
padding: 0;
|
|
||||||
top: 2.2em;
|
|
||||||
left: 2.2em;
|
left: 2.2em;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||||
|
@ -2056,8 +2096,8 @@ p.comment-form-comment {
|
||||||
clear: both !important;
|
clear: both !important;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
position: relative !important;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
position: relative !important;
|
||||||
}
|
}
|
||||||
#branding {
|
#branding {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
|
@ -2108,8 +2148,8 @@ p.comment-form-comment {
|
||||||
.singular .entry-content,
|
.singular .entry-content,
|
||||||
.singular footer.entry-meta,
|
.singular footer.entry-meta,
|
||||||
.singular #comments-title {
|
.singular #comments-title {
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.singular .hentry {
|
.singular .hentry {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2147,7 +2187,8 @@ p.comment-form-comment {
|
||||||
/* Comments */
|
/* Comments */
|
||||||
.commentlist > li.comment {
|
.commentlist > li.comment {
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #DDDDDD;
|
border: 1px solid #ddd;
|
||||||
|
-moz-border-radius: 3px 3px 3px 3px;
|
||||||
border-radius: 3px 3px 3px 3px;
|
border-radius: 3px 3px 3px 3px;
|
||||||
margin: 0 auto 1.625em;
|
margin: 0 auto 1.625em;
|
||||||
padding: 1.625em;
|
padding: 1.625em;
|
||||||
|
@ -2155,10 +2196,10 @@ p.comment-form-comment {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
.commentlist .avatar {
|
.commentlist .avatar {
|
||||||
width: 39px;
|
|
||||||
height: 39px;
|
height: 39px;
|
||||||
left: 2.2em;
|
left: 2.2em;
|
||||||
top: 2.2em;
|
top: 2.2em;
|
||||||
|
width: 39px;
|
||||||
}
|
}
|
||||||
.commentlist li.comment .comment-meta {
|
.commentlist li.comment .comment-meta {
|
||||||
line-height: 1.625em;
|
line-height: 1.625em;
|
||||||
|
|
Loading…
Reference in New Issue