<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[17761] trunk/wp-content/themes/twentyeleven: Twenty Eleven: style.
css cleanup and Showcase template improvements, props matveb - see #17198</title>
</head>
<body>
<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/17761">17761</a></dd>
<dt>Author</dt> <dd>lancewillett</dd>
<dt>Date</dt> <dd>2011-04-29 00:19:02 +0000 (Fri, 29 Apr 2011)</dd>
</dl>
<h3>Log Message</h3>
<pre>Twenty Eleven: style.css cleanup and Showcase template improvements, props matveb - see <a href="http://trac.wordpress.org/ticket/17198">#17198</a>
* 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</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpcontentthemestwentyelevenfunctionsphp">trunk/wp-content/themes/twentyeleven/functions.php</a></li>
<li><a href="#trunkwpcontentthemestwentyelevenshowcasephp">trunk/wp-content/themes/twentyeleven/showcase.php</a></li>
<li><a href="#trunkwpcontentthemestwentyelevenstylecss">trunk/wp-content/themes/twentyeleven/style.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkwpcontentthemestwentyelevenjsshowcasejs">trunk/wp-content/themes/twentyeleven/js/showcase.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpcontentthemestwentyelevenfunctionsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-content/themes/twentyeleven/functions.php (17760 => 17761)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-content/themes/twentyeleven/functions.php 2011-04-29 00:11:10 UTC (rev 17760)
+++ trunk/wp-content/themes/twentyeleven/functions.php 2011-04-29 00:19:02 UTC (rev 17761)
</span><span class="lines">@@ -128,8 +128,8 @@
</span><span class="cx"> set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
</span><span class="cx">
</span><span class="cx"> // Add Twenty Eleven's custom image sizes
</span><del>- 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
</del><ins>+ 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
</ins><span class="cx">
</span><span class="cx"> // Add a way for the custom header to be styled in the admin panel that controls
</span><span class="cx"> // custom headers. See twentyeleven_admin_header_style(), below.
</span></span></pre></div>
<a id="trunkwpcontentthemestwentyelevenjsshowcasejs"></a>
<div class="addfile"><h4>Added: trunk/wp-content/themes/twentyeleven/js/showcase.js (0 => 17761)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-content/themes/twentyeleven/js/showcase.js (rev 0)
+++ trunk/wp-content/themes/twentyeleven/js/showcase.js 2011-04-29 00:19:02 UTC (rev 17761)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+(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);
</ins><span class="cx">\ No newline at end of file
</span><span class="cx">Property changes on: trunk/wp-content/themes/twentyeleven/js/showcase.js
</span><span class="cx">___________________________________________________________________
</span><span class="cx">Name: svn:eol-style
</span><span class="cx"> + native
</span></span></pre></div>
<a id="trunkwpcontentthemestwentyelevenshowcasephp"></a>
<div class="modfile"><h4>Modified: trunk/wp-content/themes/twentyeleven/showcase.php (17760 => 17761)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-content/themes/twentyeleven/showcase.php 2011-04-29 00:11:10 UTC (rev 17760)
+++ trunk/wp-content/themes/twentyeleven/showcase.php 2011-04-29 00:19:02 UTC (rev 17761)
</span><span class="lines">@@ -3,10 +3,19 @@
</span><span class="cx"> * Template Name: Showcase Template
</span><span class="cx"> * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
</span><span class="cx"> *
</span><ins>+ * 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.
+ *
</ins><span class="cx"> * @package WordPress
</span><span class="cx"> * @subpackage Twenty Eleven
</span><span class="cx"> */
</span><span class="cx">
</span><ins>+// Enqueue showcase script for the slider
+wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
+
</ins><span class="cx"> get_header(); ?>
</span><span class="cx">
</span><span class="cx"> <div id="primary" class="showcase">
</span><span class="lines">@@ -15,33 +24,56 @@
</span><span class="cx"> <?php the_post(); ?>
</span><span class="cx">
</span><span class="cx"> <?php
</span><del>- // If we have content for this page, let's display it.
</del><ins>+ /**
+ * We are using a heading by rendering the_content
+ * If we have content for this page, let's display it.
+ */
</ins><span class="cx"> if ( '' != get_the_content() )
</span><span class="cx"> get_template_part( 'content', 'intro' );
</span><span class="cx"> ?>
</span><span class="cx">
</span><span class="cx"> <?php
</span><del>- // See if we have any sticky posts and use the latest to create a featured post
</del><ins>+ /**
+ * Begin the featured posts section.
+ *
+ * See if we have any sticky posts and use them to create our featured posts.
+ */
</ins><span class="cx"> $sticky = get_option( 'sticky_posts' );
</span><span class="cx"> $featured_args = array(
</span><del>- 'posts_per_page' => 1,
</del><ins>+ 'posts_per_page' => 4,
</ins><span class="cx"> 'post__in' => $sticky,
</span><span class="cx"> );
</span><span class="cx">
</span><ins>+ // The Featured Posts query.
</ins><span class="cx"> $featured = new WP_Query();
</span><span class="cx"> $featured->query( $featured_args );
</span><span class="cx">
</span><ins>+ /**
+ * 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
</ins><span class="cx"> // Let's roll.
</span><del>- if ( $sticky ) :
</del><ins>+ while ( $featured->have_posts() ) : $featured->the_post();
</ins><span class="cx">
</span><del>- $featured->the_post();
</del><ins>+ // Increase the counter.
+ $counter_slider++;
</ins><span class="cx">
</span><del>- // We're going to add a class to our featured post for featured images
- // by default it'll have no class though
</del><ins>+ /**
+ * We're going to add a class to our featured post for featured images
+ * by default it'll have no class though.
+ */
</ins><span class="cx"> $feature_class = '';
</span><span class="cx">
</span><span class="cx"> if ( has_post_thumbnail() ) {
</span><del>- // … but if it has a featured image let's add some class
</del><ins>+ // ... but if it has a featured image let's add some class
</ins><span class="cx"> $feature_class = 'feature-image small';
</span><span class="cx">
</span><span class="cx"> // Hang on. Let's check this here image out.
</span><span class="lines">@@ -49,20 +81,23 @@
</span><span class="cx">
</span><span class="cx"> // Is it bigger than or equal to our header?
</span><span class="cx"> if ( $image[1] >= HEADER_IMAGE_WIDTH ) {
</span><del>- // Let's add a BIGGER class. It's EXTRA classy now.
</del><ins>+ // If bigger, let's add a BIGGER class. It's EXTRA classy now.
</ins><span class="cx"> $feature_class = 'feature-image large';
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>- ?>
</del><ins>+ ?>
</ins><span class="cx">
</span><span class="cx"> <?php if ( has_post_thumbnail() ) : ?>
</span><del>- <section class="featured-post <?php echo $feature_class; ?>">
</del><ins>+ <section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
</ins><span class="cx"> <?php else : ?>
</span><del>- <section class="featured-post">
</del><ins>+ <section class="featured-post" id="featured-post-<?php echo $counter_slider; ?>">
</ins><span class="cx"> <?php endif; ?>
</span><del>- <h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
</del><ins>+
</ins><span class="cx"> <?php
</span><del>- // Dynamic thumbnails!
</del><ins>+ /**
+ * If the thumbnail is as big as the header image
+ * make it a large featured post, otherwise render it small
+ */
</ins><span class="cx"> if ( has_post_thumbnail() ) {
</span><span class="cx"> if ( $image[1] >= HEADER_IMAGE_WIDTH ) { ?>
</span><span class="cx"> <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>
</span><span class="lines">@@ -73,14 +108,43 @@
</span><span class="cx"> ?>
</span><span class="cx"> <?php get_template_part( 'content', 'featured' ); ?>
</span><span class="cx"> </section>
</span><del>- <?php endif; ?>
</del><ins>+ <?php endwhile; ?>
</ins><span class="cx">
</span><ins>+ <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>
+
</ins><span class="cx"> <section class="recent-posts">
</span><span class="cx"> <h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
</span><span class="cx">
</span><span class="cx"> <?php
</span><span class="cx">
</span><del>- // Display our recent posts, showing full content for the very latest, ignoring Aside posts
</del><ins>+ // Display our recent posts, showing full content for the very latest, ignoring Aside posts.
</ins><span class="cx"> $recent_args = array(
</span><span class="cx"> 'order' => 'DESC',
</span><span class="cx"> 'post__not_in' => get_option( 'sticky_posts' ),
</span><span class="lines">@@ -93,12 +157,13 @@
</span><span class="cx"> ),
</span><span class="cx"> ),
</span><span class="cx"> );
</span><ins>+ // Our new query for the Recent Posts section.
</ins><span class="cx"> $recent = new WP_Query();
</span><span class="cx"> $recent->query( $recent_args );
</span><span class="cx"> $counter = 0;
</span><span class="cx">
</span><span class="cx"> while ( $recent->have_posts() ) : $recent->the_post();
</span><del>- // set $more to 0 in order to only get the first part of the post
</del><ins>+ // Set $more to 0 in order to only get the first part of the post.
</ins><span class="cx"> global $more;
</span><span class="cx"> $more = 0;
</span><span class="cx"> $counter++;
</span></span></pre></div>
<a id="trunkwpcontentthemestwentyelevenstylecss"></a>
<div class="modfile"><h4>Modified: trunk/wp-content/themes/twentyeleven/style.css (17760 => 17761)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-content/themes/twentyeleven/style.css 2011-04-29 00:11:10 UTC (rev 17760)
+++ trunk/wp-content/themes/twentyeleven/style.css 2011-04-29 00:19:02 UTC (rev 17761)
</span><span class="lines">@@ -603,10 +603,6 @@
</span><span class="cx"> top: 5px;
</span><span class="cx"> z-index: 1;
</span><span class="cx"> }
</span><del>-#branding .with-image #searchform {
- bottom: -27px;
- top: auto;
-}
</del><span class="cx"> #branding .only-search #s {
</span><span class="cx"> background-color: #666;
</span><span class="cx"> border-color: #000;
</span><span class="lines">@@ -615,6 +611,10 @@
</span><span class="cx"> #branding .only-search #s:focus {
</span><span class="cx"> background-color: #bbb;
</span><span class="cx"> }
</span><ins>+#branding .with-image #searchform {
+ bottom: -27px;
+ top: auto;
+}
</ins><span class="cx">
</span><span class="cx">
</span><span class="cx"> /* =Content
</span><span class="lines">@@ -679,10 +679,6 @@
</span><span class="cx"> .entry-meta a {
</span><span class="cx"> font-weight: bold;
</span><span class="cx"> }
</span><del>-.entry-meta a:focus,
-.entry-meta a:active,
-.entry-meta a:hover {
-}
</del><span class="cx"> .entry-content,
</span><span class="cx"> .entry-summary {
</span><span class="cx"> padding: 1.625em 0 0;
</span><span class="lines">@@ -702,10 +698,6 @@
</span><span class="cx"> line-height: 2.6em;
</span><span class="cx"> text-transform: uppercase;
</span><span class="cx"> }
</span><del>-.entry-content a {
-}
-.entry-content a:hover {
-}
</del><span class="cx"> .entry-content table,
</span><span class="cx"> .comment-content table {
</span><span class="cx"> border-bottom: 1px solid #ddd;
</span><span class="lines">@@ -767,9 +759,9 @@
</span><span class="cx"> }
</span><span class="cx"> .entry-meta .edit-link a {
</span><span class="cx"> background: #aaa;
</span><del>- color: #fff;
</del><span class="cx"> -moz-border-radius: 3px;
</span><span class="cx"> border-radius: 3px;
</span><ins>+ color: #fff;
</ins><span class="cx"> float: right;
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> font-weight: 300;
</span><span class="lines">@@ -809,10 +801,10 @@
</span><span class="cx"> background: #fff;
</span><span class="cx"> -moz-border-radius: 3px;
</span><span class="cx"> border-radius: 3px;
</span><del>- padding: 3px;
</del><span class="cx"> -webkit-box-shadow: 0 1px 2px #bbb;
</span><span class="cx"> -moz-box-shadow: 0 1px 2px #bbb;
</span><span class="cx"> box-shadow: 0 1px 2px #bbb;
</span><ins>+ padding: 3px;
</ins><span class="cx"> }
</span><span class="cx"> #author-description {
</span><span class="cx"> float: left;
</span><span class="lines">@@ -833,21 +825,21 @@
</span><span class="cx"> border-radius: 24px;
</span><span class="cx"> color: #777;
</span><span class="cx"> font-size: 18px;
</span><ins>+ font-weight: 300;
</ins><span class="cx"> height: 48px;
</span><ins>+ line-height: 46px;
</ins><span class="cx"> overflow: hidden;
</span><span class="cx"> position: absolute;
</span><ins>+ text-align: center;
+ text-decoration: none;
</ins><span class="cx"> top: 0;
</span><span class="cx"> right: 0;
</span><del>- text-align: center;
- text-decoration: none;
</del><span class="cx"> width: 48px;
</span><del>- font-weight: 300;
- line-height: 46px;
</del><span class="cx"> }
</span><span class="cx"> .entry-header .comments-link a:hover {
</span><span class="cx"> background: #777;
</span><ins>+ border-color: #555;
</ins><span class="cx"> color: #fff;
</span><del>- border-color: #555;
</del><span class="cx"> }
</span><span class="cx"> .entry-header .comments-link .leave-reply {
</span><span class="cx"> font-size: 14px;
</span><span class="lines">@@ -875,18 +867,11 @@
</span><span class="cx"> .singular .entry-header .entry-meta {
</span><span class="cx"> padding-right: 0;
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> .singular .entry-header .entry-meta {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="cx"> }
</span><del>-.singular .entry-header a {
-}
-.singular .entry-header a:hover {
-}
-.singular footer.entry-meta {
-}
</del><span class="cx"> .singular blockquote.pull {
</span><span class="cx"> font-size: 21px;
</span><span class="cx"> font-weight: bold;
</span><span class="lines">@@ -904,10 +889,10 @@
</span><span class="cx"> width: 33%;
</span><span class="cx"> }
</span><span class="cx"> .singular .entry-meta .edit-link a {
</span><ins>+ bottom: auto;
</ins><span class="cx"> color: #fff;
</span><ins>+ left: 50px;
</ins><span class="cx"> position: absolute;
</span><del>- bottom: auto;
- left: 50px;
</del><span class="cx"> right: auto;
</span><span class="cx"> top: 80px;
</span><span class="cx"> }
</span><span class="lines">@@ -1004,8 +989,8 @@
</span><span class="cx"> border: 1px solid #ddd;
</span><span class="cx"> border-width: 1px 0;
</span><span class="cx"> margin: 0 -8.9% 1.625em;
</span><ins>+ overflow: hidden;
</ins><span class="cx"> padding: 1.625em 8.9%;
</span><del>- overflow: hidden;
</del><span class="cx"> }
</span><span class="cx"> .error404 #main #s {
</span><span class="cx"> width: 80%;
</span><span class="lines">@@ -1061,9 +1046,9 @@
</span><span class="cx"> article.intro .edit-link a {
</span><span class="cx"> position: absolute;
</span><span class="cx"> background: #aaa;
</span><del>- color: #fff;
</del><span class="cx"> -moz-border-radius: 3px;
</span><span class="cx"> border-radius: 3px;
</span><ins>+ color: #fff;
</ins><span class="cx"> padding: 0px 8px;
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> right: 20px;
</span><span class="lines">@@ -1076,7 +1061,6 @@
</span><span class="cx">
</span><span class="cx"> /* Featured post */
</span><span class="cx"> section.featured-post {
</span><del>- border-bottom: 1px solid #e8e8e8;
</del><span class="cx"> float: left;
</span><span class="cx"> margin: -1.625em -8.9% 1.625em;
</span><span class="cx"> padding: 1.625em 8.9% 0;
</span><span class="lines">@@ -1086,7 +1070,6 @@
</span><span class="cx"> section.featured-post .hentry {
</span><span class="cx"> border: none;
</span><span class="cx"> color: #666;
</span><del>- font-size: 13px;
</del><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx"> section.featured-post .entry-meta {
</span><span class="lines">@@ -1103,7 +1086,7 @@
</span><span class="cx"> margin: -10px -8.9% 1.625em 0;
</span><span class="cx"> max-width: 59%;
</span><span class="cx"> position: relative;
</span><del>- right: -20px;
</del><ins>+ right: -35px;
</ins><span class="cx"> }
</span><span class="cx"> section.featured-post .attachment-small-feature:hover {
</span><span class="cx"> border-color: #888;
</span><span class="lines">@@ -1113,16 +1096,20 @@
</span><span class="cx"> margin: 0 0 1.625em;
</span><span class="cx"> width: 45%;
</span><span class="cx"> }
</span><ins>+article.feature-image.small .entry-summary {
+ color: #555;
+ font-size: 13px;
+}
</ins><span class="cx"> article.feature-image.small .entry-summary p a {
</span><span class="cx"> background: #222;
</span><span class="cx"> color: #eee;
</span><span class="cx"> display: block;
</span><del>- left: -19.8%;
- padding: 4px 26px 4px 75px;
</del><ins>+ left: -23.8%;
+ padding: 4px 26px 4px 85px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> text-decoration: none;
</span><span class="cx"> top: 20px;
</span><del>- width: 120px;
</del><ins>+ width: 180px;
</ins><span class="cx"> }
</span><span class="cx"> article.feature-image.small .entry-summary p a:hover {
</span><span class="cx"> background: #1b8be0;
</span><span class="lines">@@ -1141,10 +1128,10 @@
</span><span class="cx"> }
</span><span class="cx"> section.feature-image.large .hentry {
</span><span class="cx"> border-bottom: none;
</span><ins>+ left: 9%;
</ins><span class="cx"> margin: 1.625em 9% 0 0;
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><del>- left: 9%;
</del><span class="cx"> }
</span><span class="cx"> article.feature-image.large .entry-title a {
</span><span class="cx"> background: #222;
</span><span class="lines">@@ -1152,15 +1139,15 @@
</span><span class="cx"> -moz-border-radius: 3px;
</span><span class="cx"> border-radius: 3px;
</span><span class="cx"> color: #fff;
</span><ins>+ display: inline-block;
</ins><span class="cx"> font-weight: 300;
</span><del>- display: inline-block;
</del><span class="cx"> padding: .2em 20px;
</span><span class="cx"> }
</span><span class="cx"> section.feature-image.large:hover .entry-title a,
</span><span class="cx"> section.feature-image.large .entry-title:hover a {
</span><del>- background: #1b8be0;
- background: rgba(0,145,255,0.8);
- color: #bfddF3;
</del><ins>+ background: #eee;
+ background: rgba(255,255,255,0.8);
+ color: #222;
</ins><span class="cx"> }
</span><span class="cx"> article.feature-image.large .entry-summary {
</span><span class="cx"> display: none;
</span><span class="lines">@@ -1169,10 +1156,85 @@
</span><span class="cx"> border-bottom: 1px solid #ddd;
</span><span class="cx"> display: block;
</span><span class="cx"> height: auto;
</span><ins>+ max-width: 117.9%;
</ins><span class="cx"> padding: 0 0 6px;
</span><del>- max-width: 117.9%;
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+/* 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);
+}
+
</ins><span class="cx"> /* Recent Posts */
</span><span class="cx"> section.recent-posts {
</span><span class="cx"> padding: 0 0 1.625em;
</span><span class="lines">@@ -1209,16 +1271,16 @@
</span><span class="cx"> section.recent-posts .other-recent-posts .comments-link a,
</span><span class="cx"> section.recent-posts .other-recent-posts .comments-link > span {
</span><span class="cx"> border-bottom: 2px solid #999;
</span><ins>+ bottom: -2px;
+ color: #444;
</ins><span class="cx"> display: block;
</span><del>- color: #444;
- text-align: right;
</del><span class="cx"> font-size: 10px;
</span><span class="cx"> font-weight: 500;
</span><span class="cx"> line-height: 2.76333em;
</span><span class="cx"> padding: 0.3125em 0 0.3125em 1em;
</span><span class="cx"> position: absolute;
</span><del>- bottom: -2px;
</del><span class="cx"> right: 0;
</span><ins>+ text-align: right;
</ins><span class="cx"> text-transform: uppercase;
</span><span class="cx"> z-index: 1;
</span><span class="cx"> }
</span><span class="lines">@@ -1247,9 +1309,9 @@
</span><span class="cx"> border: 1px solid #ddd;
</span><span class="cx"> border-width: 1px 0;
</span><span class="cx"> margin: 0 -8.9% 1.625em;
</span><ins>+ overflow: hidden;
</ins><span class="cx"> padding: 1.625em 1.625em 0;
</span><span class="cx"> text-align: center;
</span><del>- overflow: hidden;
</del><span class="cx"> }
</span><span class="cx"> .image-attachment div.attachment img {
</span><span class="cx"> display: block;
</span><span class="lines">@@ -1272,8 +1334,8 @@
</span><span class="cx"> img.size-full,
</span><span class="cx"> img.size-medium,
</span><span class="cx"> img.size-thumbnail {
</span><ins>+ height: auto;
</ins><span class="cx"> max-width: 100%;
</span><del>- height: auto;
</del><span class="cx"> }
</span><span class="cx"> img.wp-smiley {
</span><span class="cx"> margin-bottom: 0;
</span><span class="lines">@@ -1285,8 +1347,8 @@
</span><span class="cx"> }
</span><span class="cx"> .wp-caption {
</span><span class="cx"> background: #f4f2ed;
</span><ins>+ margin-bottom: 1.625em;
</ins><span class="cx"> max-width: 96%;
</span><del>- margin-bottom: 1.625em;
</del><span class="cx"> padding: 12px;
</span><span class="cx"> }
</span><span class="cx"> .wp-caption img {
</span><span class="lines">@@ -1330,10 +1392,6 @@
</span><span class="cx"> font-weight: bold;
</span><span class="cx"> line-height: 2.2em;
</span><span class="cx"> }
</span><del>-#content nav a:focus,
-#content nav a:active,
-#content nav a:hover {
-}
</del><span class="cx"> #nav-above {
</span><span class="cx"> padding: 0 0 1.625em;
</span><span class="cx"> }
</span><span class="lines">@@ -1354,7 +1412,6 @@
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: -4px;
</span><span class="cx"> right: 0;
</span><del>- z-index: 1000;
</del><span class="cx"> }
</span><span class="cx"> #nav-single .nav-previous,
</span><span class="cx"> #nav-single .nav-next {
</span><span class="lines">@@ -1369,8 +1426,6 @@
</span><span class="cx"> /* =Widgets
</span><span class="cx"> ----------------------------------------------- */
</span><span class="cx">
</span><del>-#secondary {
-}
</del><span class="cx"> .widget-area {
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> }
</span><span class="lines">@@ -1412,9 +1467,11 @@
</span><span class="cx"> width: 58%;
</span><span class="cx"> }
</span><span class="cx"> .widget_search #searchsubmit {
</span><del>- -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px -1px 1px inset;
- background: #DDD;
- border: 1px solid #CCC;
</del><ins>+ 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);
</ins><span class="cx"> color: #888;
</span><span class="cx"> font-size: 13px;
</span><span class="cx"> line-height: 25px;
</span><span class="lines">@@ -1423,9 +1480,11 @@
</span><span class="cx"> }
</span><span class="cx"> .widget_search #searchsubmit:active {
</span><span class="cx"> background: #1b8be0;
</span><del>- color: #BFDDF3;
- border-color: #0861A5;
- -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px inset;
</del><ins>+ 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;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Ephemera Widget */
</span><span class="lines">@@ -1578,41 +1637,35 @@
</span><span class="cx"> .commentlist .avatar {
</span><span class="cx"> -moz-border-radius: 3px;
</span><span class="cx"> border-radius: 3px;
</span><ins>+ -webkit-box-shadow: 0 1px 2px #ccc;
+ -moz-box-shadow: 0 1px 2px #ccc;
+ box-shadow: 0 1px 2px #ccc;
+ left: -102px;
</ins><span class="cx"> padding: 0;
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><del>- left: -102px;
- -webkit-box-shadow: 0 1px 2px #ccc;
- -moz-box-shadow: 0 1px 2px #ccc;
- box-shadow: 0 1px 2px #ccc;
</del><span class="cx"> }
</span><span class="cx"> .commentlist > li:before {
</span><span class="cx"> content: url(images/comment-arrow.png) no-repeat;
</span><ins>+ left: -21px;
</ins><span class="cx"> position: absolute;
</span><del>- left: -21px;
</del><span class="cx"> }
</span><span class="cx"> .commentlist > li.pingback:before {
</span><span class="cx"> content: '';
</span><span class="cx"> }
</span><span class="cx"> .commentlist .children .avatar {
</span><span class="cx"> background: none;
</span><del>- padding: 0;
- top: 2.2em;
- left: 2.2em;
</del><span class="cx"> -webkit-box-shadow: none;
</span><span class="cx"> -moz-box-shadow: none;
</span><span class="cx"> box-shadow: none;
</span><ins>+ left: 2.2em;
+ padding: 0;
+ top: 2.2em;
</ins><span class="cx"> }
</span><del>-.commentlist .children .bypostauthor > article .comment-meta .vcard .avatar {
-}
</del><span class="cx"> a.comment-reply-link {
</span><span class="cx"> font-size: 12px;
</span><span class="cx"> font-weight: bold;
</span><span class="cx"> }
</span><del>-.comment-reply-link:hover,
-.comment-reply-link:active,
-.comment-reply-link:focus {
-}
</del><span class="cx">
</span><span class="cx"> /* Post author highlighting */
</span><span class="cx"> .commentlist > li.bypostauthor {
</span><span class="lines">@@ -1697,12 +1750,6 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 68.9%;
</span><span class="cx"> }
</span><del>-#respond a {
-}
-#respond a:focus,
-#respond a:active,
-#respond a:hover {
-}
</del><span class="cx"> #respond input[type="text"],
</span><span class="cx"> #respond textarea {
</span><span class="cx"> background: #fff;
</span><span class="lines">@@ -1733,13 +1780,12 @@
</span><span class="cx"> color: #555;
</span><span class="cx"> display: inline-block;
</span><span class="cx"> font-size: 13px;
</span><ins>+ left: 4px;
+ min-width: 60px;
</ins><span class="cx"> padding: 4px 10px;
</span><span class="cx"> position: relative;
</span><span class="cx"> top: 41px;
</span><del>- left: 4px;
- min-width: 60px;
</del><span class="cx"> z-index: 1;
</span><del>- /*text-shadow: 1px 1px 1px #fff; */
</del><span class="cx"> }
</span><span class="cx"> #respond input[type="text"]:focus,
</span><span class="cx"> #respond textarea:focus {
</span><span class="lines">@@ -1754,17 +1800,15 @@
</span><span class="cx"> color: #bd3500;
</span><span class="cx"> font-size: 22px;
</span><span class="cx"> font-weight: bold;
</span><ins>+ left: 68%;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 52px;
</span><del>- left: 68%;
</del><span class="cx"> z-index: 1;
</span><span class="cx"> }
</span><span class="cx"> #respond .comment-notes,
</span><span class="cx"> #respond .logged-in-as {
</span><span class="cx"> font-size: 13px;
</span><span class="cx"> }
</span><del>-#respond .logged-in-as a {
-}
</del><span class="cx"> #respond p {
</span><span class="cx"> margin: 10px 0;
</span><span class="cx"> }
</span><span class="lines">@@ -1783,11 +1827,11 @@
</span><span class="cx"> color: #eee;
</span><span class="cx"> cursor: pointer;
</span><span class="cx"> font-size: 15px;
</span><ins>+ left: 30px;
</ins><span class="cx"> margin: 20px 0;
</span><span class="cx"> padding: 5px 42px 5px 22px;
</span><ins>+ position: relative;
</ins><span class="cx"> text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
</span><del>- position: relative;
- left: 30px;
</del><span class="cx"> }
</span><span class="cx"> #respond input#submit:active {
</span><span class="cx"> background: #1b8be0;
</span><span class="lines">@@ -1820,10 +1864,10 @@
</span><span class="cx"> line-height: 2.2em;
</span><span class="cx"> letter-spacing: 0.05em;
</span><span class="cx"> position: absolute;
</span><del>- top: 1.1em;
</del><span class="cx"> right: 1.625em;
</span><span class="cx"> text-decoration: none;
</span><span class="cx"> text-transform: uppercase;
</span><ins>+ top: 1.1em;
</ins><span class="cx"> }
</span><span class="cx"> #cancel-comment-reply-link:focus,
</span><span class="cx"> #cancel-comment-reply-link:active,
</span><span class="lines">@@ -1893,10 +1937,6 @@
</span><span class="cx"> #site-generator a {
</span><span class="cx"> font-weight: bold;
</span><span class="cx"> }
</span><del>-#site-generator a:focus,
-#site-generator a:active,
-#site-generator a:hover {
-}
</del><span class="cx">
</span><span class="cx">
</span><span class="cx"> /* =Responsive Structure
</span><span class="lines">@@ -1936,9 +1976,9 @@
</span><span class="cx"> border: none;
</span><span class="cx"> display: block;
</span><span class="cx"> float: none;
</span><ins>+ height: auto;
</ins><span class="cx"> margin: 0.625em auto 1.025em;
</span><span class="cx"> max-width: 100%;
</span><del>- height: auto;
</del><span class="cx"> position: static;
</span><span class="cx"> }
</span><span class="cx"> article.feature-image.small {
</span><span class="lines">@@ -1967,8 +2007,8 @@
</span><span class="cx"> margin: 0 0 0 1.625em;
</span><span class="cx"> }
</span><span class="cx"> .singular .entry-meta .edit-link a {
</span><ins>+ left: 0px;
</ins><span class="cx"> position: absolute;
</span><del>- left: 0px;
</del><span class="cx"> top: 40px;
</span><span class="cx"> }
</span><span class="cx"> .singular #author-info {
</span><span class="lines">@@ -2024,11 +2064,11 @@
</span><span class="cx"> position: static;
</span><span class="cx"> }
</span><span class="cx"> .commentlist .children .avatar {
</span><del>- position: absolute;
</del><span class="cx"> background: none;
</span><ins>+ left: 2.2em;
</ins><span class="cx"> padding: 0;
</span><ins>+ position: absolute;
</ins><span class="cx"> top: 2.2em;
</span><del>- left: 2.2em;
</del><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
</span><span class="lines">@@ -2056,8 +2096,8 @@
</span><span class="cx"> clear: both !important;
</span><span class="cx"> display: block !important;
</span><span class="cx"> float: none !important;
</span><ins>+ max-width: 100%;
</ins><span class="cx"> position: relative !important;
</span><del>- max-width: 100%;
</del><span class="cx"> }
</span><span class="cx"> #branding {
</span><span class="cx"> border-top: none;
</span><span class="lines">@@ -2108,8 +2148,8 @@
</span><span class="cx"> .singular .entry-content,
</span><span class="cx"> .singular footer.entry-meta,
</span><span class="cx"> .singular #comments-title {
</span><ins>+ margin: 0;
</ins><span class="cx"> width: 100%;
</span><del>- margin: 0;
</del><span class="cx"> }
</span><span class="cx"> .singular .hentry {
</span><span class="cx"> padding: 0;
</span><span class="lines">@@ -2147,7 +2187,8 @@
</span><span class="cx"> /* Comments */
</span><span class="cx"> .commentlist > li.comment {
</span><span class="cx"> background: none;
</span><del>- border: 1px solid #DDDDDD;
</del><ins>+ border: 1px solid #ddd;
+ -moz-border-radius: 3px 3px 3px 3px;
</ins><span class="cx"> border-radius: 3px 3px 3px 3px;
</span><span class="cx"> margin: 0 auto 1.625em;
</span><span class="cx"> padding: 1.625em;
</span><span class="lines">@@ -2155,10 +2196,10 @@
</span><span class="cx"> width: auto;
</span><span class="cx"> }
</span><span class="cx"> .commentlist .avatar {
</span><del>- width: 39px;
</del><span class="cx"> height: 39px;
</span><span class="cx"> left: 2.2em;
</span><span class="cx"> top: 2.2em;
</span><ins>+ width: 39px;
</ins><span class="cx"> }
</span><span class="cx"> .commentlist li.comment .comment-meta {
</span><span class="cx"> line-height: 1.625em;
</span></span></pre>
</div>
</div>
</body>
</html>