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: https://develop.svn.wordpress.org/trunk@17761 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
4a4c691ebb
commit
9f5ed64d81
|
@ -128,8 +128,8 @@ function twentyeleven_setup() {
|
|||
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
|
||||
|
||||
// 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( 'small-feature', 500, 500 ); // Used for featured posts if a large-feature doesn't exist
|
||||
add_image_size( 'large-feature', HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); // Used for large feature images
|
||||
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
|
||||
// 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
|
||||
* 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
|
||||
* @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(); ?>
|
||||
|
||||
<div id="primary" class="showcase">
|
||||
|
@ -15,33 +24,56 @@ get_header(); ?>
|
|||
<?php the_post(); ?>
|
||||
|
||||
<?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() )
|
||||
get_template_part( 'content', 'intro' );
|
||||
?>
|
||||
|
||||
<?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' );
|
||||
$featured_args = array(
|
||||
'posts_per_page' => 1,
|
||||
'posts_per_page' => 4,
|
||||
'post__in' => $sticky,
|
||||
);
|
||||
|
||||
// The Featured Posts query.
|
||||
$featured = new WP_Query();
|
||||
$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.
|
||||
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 = '';
|
||||
|
||||
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';
|
||||
|
||||
// Hang on. Let's check this here image out.
|
||||
|
@ -49,20 +81,23 @@ get_header(); ?>
|
|||
|
||||
// Is it bigger than or equal to our header?
|
||||
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';
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<?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 : ?>
|
||||
<section class="featured-post">
|
||||
<section class="featured-post" id="featured-post-<?php echo $counter_slider; ?>">
|
||||
<?php endif; ?>
|
||||
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
|
||||
|
||||
<?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 ( $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>
|
||||
|
@ -73,14 +108,43 @@ get_header(); ?>
|
|||
?>
|
||||
<?php get_template_part( 'content', 'featured' ); ?>
|
||||
</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">
|
||||
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
|
||||
|
||||
<?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(
|
||||
'order' => 'DESC',
|
||||
'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->query( $recent_args );
|
||||
$counter = 0;
|
||||
|
||||
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;
|
||||
$more = 0;
|
||||
$counter++;
|
||||
|
|
|
@ -603,10 +603,6 @@ a:hover {
|
|||
top: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
#branding .with-image #searchform {
|
||||
bottom: -27px;
|
||||
top: auto;
|
||||
}
|
||||
#branding .only-search #s {
|
||||
background-color: #666;
|
||||
border-color: #000;
|
||||
|
@ -615,6 +611,10 @@ a:hover {
|
|||
#branding .only-search #s:focus {
|
||||
background-color: #bbb;
|
||||
}
|
||||
#branding .with-image #searchform {
|
||||
bottom: -27px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
|
||||
/* =Content
|
||||
|
@ -679,10 +679,6 @@ a:hover {
|
|||
.entry-meta a {
|
||||
font-weight: bold;
|
||||
}
|
||||
.entry-meta a:focus,
|
||||
.entry-meta a:active,
|
||||
.entry-meta a:hover {
|
||||
}
|
||||
.entry-content,
|
||||
.entry-summary {
|
||||
padding: 1.625em 0 0;
|
||||
|
@ -702,10 +698,6 @@ a:hover {
|
|||
line-height: 2.6em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.entry-content a {
|
||||
}
|
||||
.entry-content a:hover {
|
||||
}
|
||||
.entry-content table,
|
||||
.comment-content table {
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
@ -767,9 +759,9 @@ dl.gallery-item {
|
|||
}
|
||||
.entry-meta .edit-link a {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
|
@ -809,10 +801,10 @@ dl.gallery-item {
|
|||
background: #fff;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
-webkit-box-shadow: 0 1px 2px #bbb;
|
||||
-moz-box-shadow: 0 1px 2px #bbb;
|
||||
box-shadow: 0 1px 2px #bbb;
|
||||
padding: 3px;
|
||||
}
|
||||
#author-description {
|
||||
float: left;
|
||||
|
@ -833,21 +825,21 @@ dl.gallery-item {
|
|||
border-radius: 24px;
|
||||
color: #777;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
height: 48px;
|
||||
line-height: 46px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 46px;
|
||||
}
|
||||
.entry-header .comments-link a:hover {
|
||||
background: #777;
|
||||
color: #fff;
|
||||
border-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
.entry-header .comments-link .leave-reply {
|
||||
font-size: 14px;
|
||||
|
@ -875,18 +867,11 @@ dl.gallery-item {
|
|||
.singular .entry-header .entry-meta {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.singular .entry-header .entry-meta {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.singular .entry-header a {
|
||||
}
|
||||
.singular .entry-header a:hover {
|
||||
}
|
||||
.singular footer.entry-meta {
|
||||
}
|
||||
.singular blockquote.pull {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
|
@ -904,10 +889,10 @@ dl.gallery-item {
|
|||
width: 33%;
|
||||
}
|
||||
.singular .entry-meta .edit-link a {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
color: #fff;
|
||||
left: 50px;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
top: 80px;
|
||||
}
|
||||
|
@ -1004,8 +989,8 @@ dl.gallery-item {
|
|||
border: 1px solid #ddd;
|
||||
border-width: 1px 0;
|
||||
margin: 0 -8.9% 1.625em;
|
||||
padding: 1.625em 8.9%;
|
||||
overflow: hidden;
|
||||
padding: 1.625em 8.9%;
|
||||
}
|
||||
.error404 #main #s {
|
||||
width: 80%;
|
||||
|
@ -1061,9 +1046,9 @@ article.intro .entry-content {
|
|||
article.intro .edit-link a {
|
||||
position: absolute;
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
padding: 0px 8px;
|
||||
font-size: 12px;
|
||||
right: 20px;
|
||||
|
@ -1076,7 +1061,6 @@ article.intro .edit-link a:hover {
|
|||
|
||||
/* Featured post */
|
||||
section.featured-post {
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
float: left;
|
||||
margin: -1.625em -8.9% 1.625em;
|
||||
padding: 1.625em 8.9% 0;
|
||||
|
@ -1086,7 +1070,6 @@ section.featured-post {
|
|||
section.featured-post .hentry {
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
section.featured-post .entry-meta {
|
||||
|
@ -1103,7 +1086,7 @@ section.featured-post .attachment-small-feature {
|
|||
margin: -10px -8.9% 1.625em 0;
|
||||
max-width: 59%;
|
||||
position: relative;
|
||||
right: -20px;
|
||||
right: -35px;
|
||||
}
|
||||
section.featured-post .attachment-small-feature:hover {
|
||||
border-color: #888;
|
||||
|
@ -1113,16 +1096,20 @@ article.feature-image.small {
|
|||
margin: 0 0 1.625em;
|
||||
width: 45%;
|
||||
}
|
||||
article.feature-image.small .entry-summary {
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
}
|
||||
article.feature-image.small .entry-summary p a {
|
||||
background: #222;
|
||||
color: #eee;
|
||||
display: block;
|
||||
left: -19.8%;
|
||||
padding: 4px 26px 4px 75px;
|
||||
left: -23.8%;
|
||||
padding: 4px 26px 4px 85px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
top: 20px;
|
||||
width: 120px;
|
||||
width: 180px;
|
||||
}
|
||||
article.feature-image.small .entry-summary p a:hover {
|
||||
background: #1b8be0;
|
||||
|
@ -1141,10 +1128,10 @@ section.feature-image.large .showcase-heading {
|
|||
}
|
||||
section.feature-image.large .hentry {
|
||||
border-bottom: none;
|
||||
left: 9%;
|
||||
margin: 1.625em 9% 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 9%;
|
||||
}
|
||||
article.feature-image.large .entry-title a {
|
||||
background: #222;
|
||||
|
@ -1152,15 +1139,15 @@ article.feature-image.large .entry-title a {
|
|||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
padding: .2em 20px;
|
||||
}
|
||||
section.feature-image.large:hover .entry-title a,
|
||||
section.feature-image.large .entry-title:hover a {
|
||||
background: #1b8be0;
|
||||
background: rgba(0,145,255,0.8);
|
||||
color: #bfddF3;
|
||||
background: #eee;
|
||||
background: rgba(255,255,255,0.8);
|
||||
color: #222;
|
||||
}
|
||||
article.feature-image.large .entry-summary {
|
||||
display: none;
|
||||
|
@ -1169,8 +1156,83 @@ section.feature-image.large img {
|
|||
border-bottom: 1px solid #ddd;
|
||||
display: block;
|
||||
height: auto;
|
||||
padding: 0 0 6px;
|
||||
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 */
|
||||
|
@ -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 > span {
|
||||
border-bottom: 2px solid #999;
|
||||
display: block;
|
||||
bottom: -2px;
|
||||
color: #444;
|
||||
text-align: right;
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
line-height: 2.76333em;
|
||||
padding: 0.3125em 0 0.3125em 1em;
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
z-index: 1;
|
||||
}
|
||||
|
@ -1247,9 +1309,9 @@ section.recent-posts .other-recent-posts li:after {
|
|||
border: 1px solid #ddd;
|
||||
border-width: 1px 0;
|
||||
margin: 0 -8.9% 1.625em;
|
||||
overflow: hidden;
|
||||
padding: 1.625em 1.625em 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image-attachment div.attachment img {
|
||||
display: block;
|
||||
|
@ -1272,8 +1334,8 @@ img.size-large,
|
|||
img.size-full,
|
||||
img.size-medium,
|
||||
img.size-thumbnail {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
img.wp-smiley {
|
||||
margin-bottom: 0;
|
||||
|
@ -1285,8 +1347,8 @@ p img,
|
|||
}
|
||||
.wp-caption {
|
||||
background: #f4f2ed;
|
||||
max-width: 96%;
|
||||
margin-bottom: 1.625em;
|
||||
max-width: 96%;
|
||||
padding: 12px;
|
||||
}
|
||||
.wp-caption img {
|
||||
|
@ -1330,10 +1392,6 @@ p img,
|
|||
font-weight: bold;
|
||||
line-height: 2.2em;
|
||||
}
|
||||
#content nav a:focus,
|
||||
#content nav a:active,
|
||||
#content nav a:hover {
|
||||
}
|
||||
#nav-above {
|
||||
padding: 0 0 1.625em;
|
||||
}
|
||||
|
@ -1354,7 +1412,6 @@ p img,
|
|||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
#nav-single .nav-previous,
|
||||
#nav-single .nav-next {
|
||||
|
@ -1369,8 +1426,6 @@ p img,
|
|||
/* =Widgets
|
||||
----------------------------------------------- */
|
||||
|
||||
#secondary {
|
||||
}
|
||||
.widget-area {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
@ -1412,9 +1467,11 @@ p img,
|
|||
width: 58%;
|
||||
}
|
||||
.widget_search #searchsubmit {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px -1px 1px inset;
|
||||
background: #DDD;
|
||||
border: 1px solid #CCC;
|
||||
background: #ddd;
|
||||
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;
|
||||
font-size: 13px;
|
||||
line-height: 25px;
|
||||
|
@ -1423,9 +1480,11 @@ p img,
|
|||
}
|
||||
.widget_search #searchsubmit:active {
|
||||
background: #1b8be0;
|
||||
color: #BFDDF3;
|
||||
border-color: #0861A5;
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px inset;
|
||||
border-color: #0861a5;
|
||||
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
-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 */
|
||||
|
@ -1578,41 +1637,35 @@ section.ephemera .entry-title a span {
|
|||
.commentlist .avatar {
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -102px;
|
||||
-webkit-box-shadow: 0 1px 2px #ccc;
|
||||
-moz-box-shadow: 0 1px 2px #ccc;
|
||||
box-shadow: 0 1px 2px #ccc;
|
||||
left: -102px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.commentlist > li:before {
|
||||
content: url(images/comment-arrow.png) no-repeat;
|
||||
position: absolute;
|
||||
left: -21px;
|
||||
position: absolute;
|
||||
}
|
||||
.commentlist > li.pingback:before {
|
||||
content: '';
|
||||
}
|
||||
.commentlist .children .avatar {
|
||||
background: none;
|
||||
padding: 0;
|
||||
top: 2.2em;
|
||||
left: 2.2em;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.commentlist .children .bypostauthor > article .comment-meta .vcard .avatar {
|
||||
left: 2.2em;
|
||||
padding: 0;
|
||||
top: 2.2em;
|
||||
}
|
||||
a.comment-reply-link {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comment-reply-link:hover,
|
||||
.comment-reply-link:active,
|
||||
.comment-reply-link:focus {
|
||||
}
|
||||
|
||||
/* Post author highlighting */
|
||||
.commentlist > li.bypostauthor {
|
||||
|
@ -1697,12 +1750,6 @@ a.comment-reply-link {
|
|||
position: relative;
|
||||
width: 68.9%;
|
||||
}
|
||||
#respond a {
|
||||
}
|
||||
#respond a:focus,
|
||||
#respond a:active,
|
||||
#respond a:hover {
|
||||
}
|
||||
#respond input[type="text"],
|
||||
#respond textarea {
|
||||
background: #fff;
|
||||
|
@ -1733,13 +1780,12 @@ a.comment-reply-link {
|
|||
color: #555;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
left: 4px;
|
||||
min-width: 60px;
|
||||
padding: 4px 10px;
|
||||
position: relative;
|
||||
top: 41px;
|
||||
left: 4px;
|
||||
min-width: 60px;
|
||||
z-index: 1;
|
||||
/*text-shadow: 1px 1px 1px #fff; */
|
||||
}
|
||||
#respond input[type="text"]:focus,
|
||||
#respond textarea:focus {
|
||||
|
@ -1754,17 +1800,15 @@ a.comment-reply-link {
|
|||
color: #bd3500;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
left: 68%;
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 68%;
|
||||
z-index: 1;
|
||||
}
|
||||
#respond .comment-notes,
|
||||
#respond .logged-in-as {
|
||||
font-size: 13px;
|
||||
}
|
||||
#respond .logged-in-as a {
|
||||
}
|
||||
#respond p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
@ -1783,11 +1827,11 @@ a.comment-reply-link {
|
|||
color: #eee;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
left: 30px;
|
||||
margin: 20px 0;
|
||||
padding: 5px 42px 5px 22px;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
left: 30px;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
#respond input#submit:active {
|
||||
background: #1b8be0;
|
||||
|
@ -1820,10 +1864,10 @@ a.comment-reply-link {
|
|||
line-height: 2.2em;
|
||||
letter-spacing: 0.05em;
|
||||
position: absolute;
|
||||
top: 1.1em;
|
||||
right: 1.625em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
top: 1.1em;
|
||||
}
|
||||
#cancel-comment-reply-link:focus,
|
||||
#cancel-comment-reply-link:active,
|
||||
|
@ -1893,10 +1937,6 @@ p.comment-form-comment {
|
|||
#site-generator a {
|
||||
font-weight: bold;
|
||||
}
|
||||
#site-generator a:focus,
|
||||
#site-generator a:active,
|
||||
#site-generator a:hover {
|
||||
}
|
||||
|
||||
|
||||
/* =Responsive Structure
|
||||
|
@ -1936,9 +1976,9 @@ p.comment-form-comment {
|
|||
border: none;
|
||||
display: block;
|
||||
float: none;
|
||||
height: auto;
|
||||
margin: 0.625em auto 1.025em;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
position: static;
|
||||
}
|
||||
article.feature-image.small {
|
||||
|
@ -1967,8 +2007,8 @@ p.comment-form-comment {
|
|||
margin: 0 0 0 1.625em;
|
||||
}
|
||||
.singular .entry-meta .edit-link a {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
}
|
||||
.singular #author-info {
|
||||
|
@ -2024,11 +2064,11 @@ p.comment-form-comment {
|
|||
position: static;
|
||||
}
|
||||
.commentlist .children .avatar {
|
||||
position: absolute;
|
||||
background: none;
|
||||
padding: 0;
|
||||
top: 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) {
|
||||
|
@ -2056,8 +2096,8 @@ p.comment-form-comment {
|
|||
clear: both !important;
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
position: relative !important;
|
||||
max-width: 100%;
|
||||
position: relative !important;
|
||||
}
|
||||
#branding {
|
||||
border-top: none;
|
||||
|
@ -2108,8 +2148,8 @@ p.comment-form-comment {
|
|||
.singular .entry-content,
|
||||
.singular footer.entry-meta,
|
||||
.singular #comments-title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.singular .hentry {
|
||||
padding: 0;
|
||||
|
@ -2147,7 +2187,8 @@ p.comment-form-comment {
|
|||
/* Comments */
|
||||
.commentlist > li.comment {
|
||||
background: none;
|
||||
border: 1px solid #DDDDDD;
|
||||
border: 1px solid #ddd;
|
||||
-moz-border-radius: 3px 3px 3px 3px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
margin: 0 auto 1.625em;
|
||||
padding: 1.625em;
|
||||
|
@ -2155,10 +2196,10 @@ p.comment-form-comment {
|
|||
width: auto;
|
||||
}
|
||||
.commentlist .avatar {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
left: 2.2em;
|
||||
top: 2.2em;
|
||||
width: 39px;
|
||||
}
|
||||
.commentlist li.comment .comment-meta {
|
||||
line-height: 1.625em;
|
||||
|
|
Loading…
Reference in New Issue