<!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" />
<title>[25979] trunk/src/wp-content/themes/twentyfourteen: Twenty Fourteen: implement an alternate "slider" view for home page featured content.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { 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 #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#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>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/25979">25979</a></dd>
<dt>Author</dt> <dd>lancewillett</dd>
<dt>Date</dt> <dd>2013-10-29 16:28:11 +0000 (Tue, 29 Oct 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Twenty Fourteen: implement an alternate "slider" view for home page featured content. Props iamtakashi for the design and implementation. Slider JavaScript code adapted from FlexSlider v2.2.0 props WooThemes and mbmufffin. See <a href="http://core.trac.wordpress.org/ticket/25550">#25550</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyfourteencontentfeaturedpostphp">trunk/src/wp-content/themes/twentyfourteen/content-featured-post.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteenfeaturedcontentphp">trunk/src/wp-content/themes/twentyfourteen/featured-content.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteenfunctionsphp">trunk/src/wp-content/themes/twentyfourteen/functions.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteeninccustomizerphp">trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteenincwidgetsphp">trunk/src/wp-content/themes/twentyfourteen/inc/widgets.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteenjsfunctionsjs">trunk/src/wp-content/themes/twentyfourteen/js/functions.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteensidebarphp">trunk/src/wp-content/themes/twentyfourteen/sidebar.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyfourteenstylecss">trunk/src/wp-content/themes/twentyfourteen/style.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyfourteenjssliderjs">trunk/src/wp-content/themes/twentyfourteen/js/slider.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentyfourteencontentfeaturedpostphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/content-featured-post.php (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/content-featured-post.php 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/content-featured-post.php 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -9,38 +9,24 @@
</span><span class="cx"> ?>
</span><span class="cx">
</span><span class="cx"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
</span><del>- <a class="attachment-featured-featured" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">
- <?php
- if ( has_post_thumbnail() ) :
</del><ins>+ <a class="post-thumbnail" href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">
+ <?php
+ if ( has_post_thumbnail() ) :
+ if ( 'grid' == get_theme_mod( 'featured_content_layout' ) )
</ins><span class="cx"> the_post_thumbnail( 'post-thumbnail-grid' );
</span><del>-
- else :
- $images = get_children( array(
- 'post_parent' => get_the_ID(),
- 'post_type' => 'attachment',
- 'post_mime_type' => 'image',
- 'orderby' => 'menu_order',
- 'order' => 'ASC',
- 'numberposts' => 1,
- ) );
-
- if ( $images ) :
- $image = array_shift( $images );
- echo wp_get_attachment_image( $image->ID, 'post-thumbnail-grid' );
- endif;
- endif;
- ?>
</del><ins>+ else
+ the_post_thumbnail( 'post-thumbnail-slider' );
+ endif;
+ ?>
</ins><span class="cx"> </a>
</span><span class="cx">
</span><del>- <div class="entry-wrap">
- <header class="entry-header">
- <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
- <div class="entry-meta">
- <span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
- </div><!-- .entry-meta -->
- <?php endif; ?>
</del><ins>+ <header class="entry-header">
+ <?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) &&twentyfourteen_categorized_blog() ) : ?>
+ <div class="entry-meta">
+ <span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
+ </div><!-- .entry-meta -->
+ <?php endif; ?>
</ins><span class="cx">
</span><del>- <?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
- </header><!-- .entry-header -->
- </div>
</del><ins>+ <?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">','</a></h1>' ); ?>
+ </header><!-- .entry-header -->
</ins><span class="cx"> </article><!-- #post-## -->
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteenfeaturedcontentphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/featured-content.php (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/featured-content.php 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/featured-content.php 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -11,7 +11,7 @@
</span><span class="cx"> ?>
</span><span class="cx">
</span><span class="cx"> <div id="featured-content" class="featured-content">
</span><del>-
</del><ins>+ <div class="featured-content-inner">
</ins><span class="cx"> <?php
</span><span class="cx"> do_action( 'twentyfourteen_featured_posts_before' );
</span><span class="cx">
</span><span class="lines">@@ -26,5 +26,5 @@
</span><span class="cx">
</span><span class="cx"> wp_reset_postdata();
</span><span class="cx"> ?>
</span><del>-
</del><ins>+ </div><!-- .featured-content-inner -->
</ins><span class="cx"> </div><!-- #featured-content .featured-content -->
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteenfunctionsphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/functions.php (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/functions.php 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/functions.php 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -68,6 +68,7 @@
</span><span class="cx"> add_theme_support( 'post-thumbnails' );
</span><span class="cx">
</span><span class="cx"> // Add several sizes for Post Thumbnails.
</span><ins>+ add_image_size( 'post-thumbnail-slider', 1038, 576, true );
</ins><span class="cx"> add_image_size( 'post-thumbnail-grid', 672, 372, true );
</span><span class="cx"> add_image_size( 'post-thumbnail', 672, 0 );
</span><span class="cx">
</span><span class="lines">@@ -219,9 +220,8 @@
</span><span class="cx"> * @return void
</span><span class="cx"> */
</span><span class="cx"> function twentyfourteen_scripts() {
</span><del>-
</del><span class="cx"> // Add Lato font, used in the main stylesheet.
</span><del>- wp_enqueue_style( 'twentyfourteen-lato' );
</del><ins>+ wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
</ins><span class="cx">
</span><span class="cx"> // Add Genericons font, used in the main stylesheet.
</span><span class="cx"> wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array(), '3.0' );
</span><span class="lines">@@ -238,10 +238,10 @@
</span><span class="cx"> if ( is_active_sidebar( 'sidebar-3' ) )
</span><span class="cx"> wp_enqueue_script( 'jquery-masonry' );
</span><span class="cx">
</span><ins>+ if ( 'slider' == get_theme_mod( 'featured_content_layout' ) )
+ wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131028', true );
+
</ins><span class="cx"> wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131011', true );
</span><del>-
- // Add Lato font used in the main stylesheet.
- wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
</del><span class="cx"> }
</span><span class="cx"> add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
</span><span class="cx">
</span><span class="lines">@@ -365,6 +365,7 @@
</span><span class="cx"> * 4. Full-width content layout.
</span><span class="cx"> * 5. Presence of footer widgets.
</span><span class="cx"> * 6. Single views.
</span><ins>+ * 7. Featured content layout.
</ins><span class="cx"> *
</span><span class="cx"> * @since Twenty Fourteen 1.0
</span><span class="cx"> *
</span><span class="lines">@@ -395,6 +396,11 @@
</span><span class="cx"> if ( is_singular() )
</span><span class="cx"> $classes[] = 'singular';
</span><span class="cx">
</span><ins>+ if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) )
+ $classes[] = 'slider';
+ elseif ( is_front_page() )
+ $classes[] = 'grid';
+
</ins><span class="cx"> return $classes;
</span><span class="cx"> }
</span><span class="cx"> add_filter( 'body_class', 'twentyfourteen_body_classes' );
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteeninccustomizerphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -30,6 +30,29 @@
</span><span class="cx"> 'section' => 'colors',
</span><span class="cx"> 'settings' => 'accent_color',
</span><span class="cx"> ) ) );
</span><ins>+
+ // Add the featured content section.
+ $wp_customize->add_section( 'featured_content', array(
+ 'title' => __( 'Featured Content', 'twentyfourteen' ),
+ 'priority' => 120,
+ ) );
+
+ // Add the featured content layout setting and control.
+ $wp_customize->add_setting( 'featured_content_layout', array(
+ 'default' => 'grid',
+ 'type' => 'theme_mod',
+ 'capability' => 'edit_theme_options',
+ ) );
+
+ $wp_customize->add_control( 'featured_content_layout', array(
+ 'label' => __( 'Layout', 'twentyfourteen' ),
+ 'section' => 'featured_content',
+ 'type' => 'select',
+ 'choices' => array(
+ 'grid' => __( 'Grid', 'twentyfourteen' ),
+ 'slider' => __( 'Slider', 'twentyfourteen' ),
+ ),
+ ) );
</ins><span class="cx"> }
</span><span class="cx"> add_action( 'customize_register', 'twentyfourteen_customize_register' );
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteenincwidgetsphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/inc/widgets.php (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/inc/widgets.php 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/inc/widgets.php 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -157,15 +157,15 @@
</span><span class="cx"> $total_images = count( $images );
</span><span class="cx">
</span><span class="cx"> if ( has_post_thumbnail() ) :
</span><del>- $featured_image = get_the_post_thumbnail( get_the_ID(), 'featured-thumbnail-formatted' );
</del><ins>+ $post_thumbnail = get_the_post_thumbnail( get_the_ID(), 'post-thumbnail' );
</ins><span class="cx"> elseif ( $total_images > 0 ) :
</span><span class="cx"> $image = array_shift( $images );
</span><del>- $featured_image = wp_get_attachment_image( $image, 'featured-thumbnail-formatted' );
</del><ins>+ $post_thumbnail = wp_get_attachment_image( $image, 'post-thumbnail' );
</ins><span class="cx"> endif;
</span><span class="cx">
</span><del>- if ( ! empty ( $featured_image ) ) :
</del><ins>+ if ( ! empty ( $post_thumbnail ) ) :
</ins><span class="cx"> ?>
</span><del>- <a href="<?php the_permalink(); ?>"><?php echo $featured_image; ?></a>
</del><ins>+ <a href="<?php the_permalink(); ?>"><?php echo $post_thumbnail; ?></a>
</ins><span class="cx"> <?php
</span><span class="cx"> endif;
</span><span class="cx"> ?>
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteenjsfunctionsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/js/functions.js (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/js/functions.js 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/js/functions.js 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -2,9 +2,7 @@
</span><span class="cx"> var body = $( 'body' ),
</span><span class="cx"> _window = $( window );
</span><span class="cx">
</span><del>- /**
- * Enables menu toggle for small screens.
- */
</del><ins>+ // Enable menu toggle for small screens.
</ins><span class="cx"> ( function() {
</span><span class="cx"> var nav = $( '#primary-navigation' ), button, menu;
</span><span class="cx"> if ( ! nav )
</span><span class="lines">@@ -26,7 +24,7 @@
</span><span class="cx"> } );
</span><span class="cx"> } )();
</span><span class="cx">
</span><del>- /**
</del><ins>+ /*
</ins><span class="cx"> * Makes "skip to content" link work correctly in IE9 and Chrome for better
</span><span class="cx"> * accessibility.
</span><span class="cx"> *
</span><span class="lines">@@ -44,9 +42,7 @@
</span><span class="cx"> } );
</span><span class="cx">
</span><span class="cx"> $( function() {
</span><del>- /**
- * Search toggle.
- */
</del><ins>+ // Search toggle.
</ins><span class="cx"> $( '.search-toggle' ).on( 'click.twentyfourteen', function() {
</span><span class="cx"> var that = $( this ),
</span><span class="cx"> wrapper = $( '.search-box-wrapper' );
</span><span class="lines">@@ -58,7 +54,7 @@
</span><span class="cx"> wrapper.find( '.search-field' ).focus();
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- /**
</del><ins>+ /*
</ins><span class="cx"> * Fixed navbar.
</span><span class="cx"> *
</span><span class="cx"> * The callback on the scroll event is only added if there is a header
</span><span class="lines">@@ -76,17 +72,13 @@
</span><span class="cx"> } );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- /**
- * Focus styles for primary menu.
- */
</del><ins>+ // Focus styles for primary menu.
</ins><span class="cx"> $( '.primary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {
</span><span class="cx"> $( this ).parents().toggleClass( 'focus' );
</span><span class="cx"> } );
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- /**
- * Arranges footer widgets vertically.
- */
</del><ins>+ // Arrange footer widgets vertically.
</ins><span class="cx"> if ( $.isFunction( $.fn.masonry ) ) {
</span><span class="cx"> $( '#footer-sidebar' ).masonry( {
</span><span class="cx"> itemSelector: '.widget',
</span><span class="lines">@@ -97,5 +89,15 @@
</span><span class="cx"> isResizable: true,
</span><span class="cx"> isRTL: $( 'body' ).is( '.rtl' )
</span><span class="cx"> } );
</span><del>- }
-} )( jQuery );
</del><span class="cx">\ No newline at end of file
</span><ins>+ };
+
+ // Initialize Featured Content slider.
+ _window.load( function() {
+ if ( body.is( '.slider' ) ) {
+ $( '.featured-content' ).featuredslider( {
+ selector: '.featured-content-inner > article',
+ controlsContainer: '.featured-content'
+ } );
+ }
+ } );
+} )( jQuery );
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteenjssliderjs"></a>
<div class="addfile"><h4>Added: trunk/src/wp-content/themes/twentyfourteen/js/slider.js (0 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/js/slider.js (rev 0)
+++ trunk/src/wp-content/themes/twentyfourteen/js/slider.js 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -0,0 +1,572 @@
</span><ins>+/*
+ * Twenty Fourteen Featured Content Slider
+ *
+ * Adapted from FlexSlider v2.2.0, copyright 2012 WooThemes
+ * @link http://www.woothemes.com/flexslider/
+ */
+
+( function( $ ) {
+ // FeaturedSlider: object instance.
+ $.featuredslider = function( el, options ) {
+ var slider = $( el );
+
+ // Make variables public.
+ slider.vars = $.extend( {}, $.featuredslider.defaults, options );
+
+ var namespace = slider.vars.namespace,
+ msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
+ touch = ( ( 'ontouchstart' in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch ),
+ eventType = 'click touchend MSPointerUp',
+ watchedEvent = '',
+ watchedEventClearTimer,
+ methods = {},
+ focused = true;
+
+ // Store a reference to the slider object.
+ $.data( el, 'featuredslider', slider );
+
+ // Private slider methods.
+ methods = {
+ init: function() {
+ slider.animating = false;
+ slider.currentSlide = 0;
+ slider.animatingTo = slider.currentSlide;
+ slider.atEnd = ( slider.currentSlide === 0 || slider.currentSlide === slider.last );
+ slider.containerSelector = slider.vars.selector.substr( 0, slider.vars.selector.search( ' ' ) );
+ slider.slides = $( slider.vars.selector, slider );
+ slider.container = $( slider.containerSelector, slider );
+ slider.count = slider.slides.length;
+ slider.prop = 'marginLeft';
+ slider.args = {};
+ // TOUCH
+ slider.transitions = ( function() {
+ var obj = document.createElement( 'div' ),
+ props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
+ for ( var i in props ) {
+ if ( obj.style[ props[i] ] !== undefined ) {
+ slider.pfx = props[i].replace( 'Perspective', '' ).toLowerCase();
+ slider.prop = '-' + slider.pfx + '-transform';
+ return true;
+ }
+ }
+ return false;
+ }() );
+ // CONTROLSCONTAINER
+ if ( slider.vars.controlsContainer !== '' )
+ slider.controlsContainer = $( slider.vars.controlsContainer ).length > 0 && $( slider.vars.controlsContainer );
+
+ slider.doMath();
+
+ // INIT
+ slider.setup( 'init' );
+
+ // CONTROLNAV
+ methods.controlNav.setup();
+
+ // DIRECTIONNAV
+ methods.directionNav.setup();
+
+ // KEYBOARD
+ if ( $( slider.containerSelector ).length === 1 ) {
+ $( document ).bind( 'keyup', function( event ) {
+ var keycode = event.keyCode;
+ if ( ! slider.animating && ( keycode === 39 || keycode === 37 ) ) {
+ var target = ( keycode === 39 ) ? slider.getTarget( 'next' ) : ( keycode === 37 ) ? slider.getTarget( 'prev' ) : false;
+ slider.featureAnimate( target );
+ }
+ } );
+ }
+
+ // TOUCH
+ if ( touch )
+ methods.touch();
+
+ $( window ).bind( 'resize orientationchange focus', methods.resize );
+
+ slider.find( 'img' ).attr( 'draggable', 'false' );
+ },
+
+ controlNav: {
+ setup: function() {
+ methods.controlNav.setupPaging();
+ },
+ setupPaging: function() {
+ var type = 'control-paging',
+ j = 1,
+ item,
+ slide;
+
+ slider.controlNavScaffold = $( '<ol class="' + namespace + 'control-nav ' + namespace + type + '"></ol>' );
+
+ if ( slider.pagingCount > 1 ) {
+ for ( var i = 0; i < slider.pagingCount; i++ ) {
+ slide = slider.slides.eq( i );
+ item = '<a>' + j + '</a>';
+ slider.controlNavScaffold.append( '<li>' + item + '</li>' );
+ j++;
+ }
+ }
+
+ // CONTROLSCONTAINER
+ ( slider.controlsContainer ) ? $( slider.controlsContainer ).append( slider.controlNavScaffold ) : slider.append( slider.controlNavScaffold );
+ methods.controlNav.set();
+
+ methods.controlNav.active();
+
+ slider.controlNavScaffold.delegate( 'a, img', eventType, function( event ) {
+ event.preventDefault();
+
+ if ( watchedEvent === '' || watchedEvent === event.type ) {
+ var $this = $( this ),
+ target = slider.controlNav.index( $this );
+
+ if ( ! $this.hasClass( namespace + 'active' ) ) {
+ slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev';
+ slider.featureAnimate( target );
+ }
+ }
+
+ // Set up flags to prevent event duplication.
+ if ( watchedEvent === '' )
+ watchedEvent = event.type;
+
+ methods.setToClearWatchedEvent();
+ } );
+ },
+ set: function() {
+ var selector = 'a';
+ slider.controlNav = $( '.' + namespace + 'control-nav li ' + selector, ( slider.controlsContainer ) ? slider.controlsContainer : slider );
+ },
+ active: function() {
+ slider.controlNav.removeClass( namespace + 'active' ).eq( slider.animatingTo ).addClass( namespace + 'active' );
+ },
+ update: function( action, pos ) {
+ if ( slider.pagingCount > 1 && action === 'add' ) {
+ slider.controlNavScaffold.append( $( '<li><a>' + slider.count + '</a></li>' ) );
+ } else if ( slider.pagingCount === 1 ) {
+ slider.controlNavScaffold.find( 'li' ).remove();
+ } else {
+ slider.controlNav.eq( pos ).closest( 'li' ).remove();
+ }
+ methods.controlNav.set();
+ ( slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length ) ? slider.update( pos, action ) : methods.controlNav.active();
+ }
+ },
+
+ directionNav: {
+ setup: function() {
+ var directionNavScaffold = $( '<ul class="' + namespace + 'direction-nav"><li><a class="' + namespace + 'prev" href="#">' + slider.vars.prevText + '</a></li><li><a class="' + namespace + 'next" href="#">' + slider.vars.nextText + '</a></li></ul>' );
+
+ // CONTROLSCONTAINER
+ if ( slider.controlsContainer ) {
+ $( slider.controlsContainer ).append( directionNavScaffold );
+ slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider.controlsContainer );
+ } else {
+ slider.append( directionNavScaffold );
+ slider.directionNav = $( '.' + namespace + 'direction-nav li a', slider );
+ }
+
+ methods.directionNav.update();
+
+ slider.directionNav.bind( eventType, function( event ) {
+ event.preventDefault();
+ var target;
+
+ if ( watchedEvent === '' || watchedEvent === event.type ) {
+ target = ( $( this ).hasClass( namespace + 'next' ) ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
+ slider.featureAnimate( target );
+ }
+
+ // Set up flags to prevent event duplication.
+ if ( watchedEvent === '' )
+ watchedEvent = event.type;
+
+ methods.setToClearWatchedEvent();
+ } );
+ },
+ update: function() {
+ var disabledClass = namespace + 'disabled';
+ if ( slider.pagingCount === 1 ) {
+ slider.directionNav.addClass( disabledClass ).attr( 'tabindex', '-1' );
+ } else {
+ slider.directionNav.removeClass( disabledClass ).removeAttr( 'tabindex' );
+ }
+ }
+ },
+
+ touch: function() {
+ var startX,
+ startY,
+ offset,
+ cwidth,
+ dx,
+ startT,
+ scrolling = false,
+ localX = 0,
+ localY = 0,
+ accDx = 0;
+
+ if ( ! msGesture ) {
+ el.addEventListener( 'touchstart', onTouchStart, false );
+
+ function onTouchStart( e ) {
+ if ( slider.animating ) {
+ e.preventDefault();
+ } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) {
+ cwidth = slider.w;
+ startT = Number( new Date() );
+
+ // Local vars for X and Y points.
+ localX = e.touches[0].pageX;
+ localY = e.touches[0].pageY;
+
+ offset = ( slider.animatingTo === slider.last ) ? 0 :
+ ( slider.currentSlide === slider.last ) ? slider.limit : ( slider.currentSlide + slider.cloneOffset ) * cwidth;
+ startX = localX;
+ startY = localY;
+
+ el.addEventListener( 'touchmove', onTouchMove, false );
+ el.addEventListener( 'touchend', onTouchEnd, false );
+ }
+ }
+
+ function onTouchMove( e ) {
+ // Local vars for X and Y points.
+ localX = e.touches[0].pageX;
+ localY = e.touches[0].pageY;
+
+ dx = startX - localX;
+ scrolling = Math.abs( dx ) < Math.abs( localY - startY );
+
+ var fxms = 500;
+
+ if ( ! scrolling || Number( new Date() ) - startT > fxms ) {
+ e.preventDefault();
+ if ( slider.transitions ) {
+ slider.setProps( offset + dx, 'setTouch' );
+ }
+ }
+ }
+
+ function onTouchEnd( e ) {
+ // Finish the touch by undoing the touch session.
+ el.removeEventListener( 'touchmove', onTouchMove, false );
+
+ if ( slider.animatingTo === slider.currentSlide && ! scrolling && ! ( dx === null ) ) {
+ var updateDx = dx,
+ target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
+
+ slider.featureAnimate( target );
+ }
+ el.removeEventListener( 'touchend', onTouchEnd, false );
+
+ startX = null;
+ startY = null;
+ dx = null;
+ offset = null;
+ }
+ } else {
+ el.style.msTouchAction = 'none';
+ el._gesture = new MSGesture();
+ el._gesture.target = el;
+ el.addEventListener( 'MSPointerDown', onMSPointerDown, false );
+ el._slider = slider;
+ el.addEventListener( 'MSGestureChange', onMSGestureChange, false );
+ el.addEventListener( 'MSGestureEnd', onMSGestureEnd, false );
+
+ function onMSPointerDown( e ) {
+ e.stopPropagation();
+ if ( slider.animating ) {
+ e.preventDefault();
+ } else {
+ el._gesture.addPointer( e.pointerId );
+ accDx = 0;
+ cwidth = slider.w;
+ startT = Number( new Date() );
+ offset = ( slider.animatingTo === slider.last ) ? 0 : ( slider.currentSlide === slider.last ) ? slider.limit : ( slider.currentSlide + slider.cloneOffset ) * cwidth;
+ }
+ }
+
+ function onMSGestureChange( e ) {
+ e.stopPropagation();
+ var slider = e.target._slider;
+ if ( ! slider )
+ return;
+
+ var transX = -e.translationX,
+ transY = -e.translationY;
+
+ // Accumulate translations.
+ accDx = accDx + transX;
+ dx = accDx;
+ scrolling = Math.abs( accDx ) < Math.abs( -transY );
+
+ if ( e.detail === e.MSGESTURE_FLAG_INERTIA ) {
+ setImmediate( function () {
+ el._gesture.stop();
+ } );
+
+ return;
+ }
+
+ if ( ! scrolling || Number( new Date() ) - startT > 500 ) {
+ e.preventDefault();
+ if ( slider.transitions ) {
+ slider.setProps( offset + dx, 'setTouch' );
+ }
+ }
+ }
+
+ function onMSGestureEnd( e ) {
+ e.stopPropagation();
+ var slider = e.target._slider;
+ if ( ! slider )
+ return;
+
+ if ( slider.animatingTo === slider.currentSlide && ! scrolling && ! ( dx === null ) ) {
+ var updateDx = dx,
+ target = ( updateDx > 0 ) ? slider.getTarget( 'next' ) : slider.getTarget( 'prev' );
+
+ slider.featureAnimate( target );
+ }
+
+ startX = null;
+ startY = null;
+ dx = null;
+ offset = null;
+ accDx = 0;
+ }
+ }
+ },
+
+ resize: function() {
+ if ( ! slider.animating && slider.is( ':visible' ) ) {
+ slider.doMath();
+
+ // SMOOTH HEIGHT
+ methods.smoothHeight();
+ slider.newSlides.width( slider.computedW );
+ slider.setProps( slider.computedW, 'setTotal' );
+ }
+ },
+
+ smoothHeight: function( dur ) {
+ var $obj = slider.viewport;
+ ( dur ) ? $obj.animate( { 'height': slider.slides.eq( slider.animatingTo ).height() }, dur ) : $obj.height( slider.slides.eq( slider.animatingTo ).height() );
+ },
+
+ setToClearWatchedEvent: function() {
+ clearTimeout( watchedEventClearTimer );
+ watchedEventClearTimer = setTimeout( function() {
+ watchedEvent = '';
+ }, 3000 );
+ }
+ };
+
+ // Public methods.
+ slider.featureAnimate = function( target ) {
+ if ( target !== slider.currentSlide )
+ slider.direction = ( target > slider.currentSlide ) ? 'next' : 'prev';
+
+ if ( ! slider.animating && slider.is( ':visible' ) ) {
+ slider.animating = true;
+ slider.animatingTo = target;
+
+ // CONTROLNAV
+ methods.controlNav.active();
+
+ slider.slides.removeClass( namespace + 'active-slide' ).eq( target ).addClass( namespace + 'active-slide' );
+
+ slider.atEnd = target === 0 || target === slider.last;
+
+ // DIRECTIONNAV
+ methods.directionNav.update();
+
+ var dimension = slider.computedW,
+ margin, slideString, calcNext;
+
+ if ( slider.currentSlide === 0 && target === slider.count - 1 && slider.direction !== 'next' ) {
+ slideString = 0;
+ } else if ( slider.currentSlide === slider.last && target === 0 && slider.direction !== 'prev' ) {
+ slideString = ( slider.count + 1 ) * dimension;
+ } else {
+ slideString = ( target + slider.cloneOffset ) * dimension;
+ }
+ slider.setProps( slideString, '', slider.vars.animationSpeed );
+ if ( slider.transitions ) {
+ if ( ! slider.atEnd ) {
+ slider.animating = false;
+ slider.currentSlide = slider.animatingTo;
+ }
+ slider.container.unbind( 'webkitTransitionEnd transitionend' );
+ slider.container.bind( 'webkitTransitionEnd transitionend', function() {
+ slider.wrapup( dimension );
+ } );
+ } else {
+ slider.container.animate( slider.args, slider.vars.animationSpeed, 'swing', function() {
+ slider.wrapup( dimension );
+ } );
+ }
+
+ // SMOOTH HEIGHT
+ methods.smoothHeight( slider.vars.animationSpeed );
+ }
+ };
+
+ slider.wrapup = function( dimension ) {
+ if ( slider.currentSlide === 0 && slider.animatingTo === slider.last ) {
+ slider.setProps( dimension, 'jumpEnd' );
+ } else if ( slider.currentSlide === slider.last && slider.animatingTo === 0 ) {
+ slider.setProps( dimension, 'jumpStart' );
+ }
+ slider.animating = false;
+ slider.currentSlide = slider.animatingTo;
+ };
+
+ slider.getTarget = function( dir ) {
+ slider.direction = dir;
+ if ( dir === 'next' ) {
+ return ( slider.currentSlide === slider.last ) ? 0 : slider.currentSlide + 1;
+ } else {
+ return ( slider.currentSlide === 0 ) ? slider.last : slider.currentSlide - 1;
+ }
+ };
+
+ slider.setProps = function( pos, special, dur ) {
+ var target = ( function() {
+ var posCheck = ( pos ) ? pos : slider.itemW * slider.animatingTo,
+ posCalc = ( function() {
+ switch ( special ) {
+ case 'setTotal': return ( slider.currentSlide + slider.cloneOffset ) * pos;
+ case 'setTouch': return pos;
+ case 'jumpEnd': return slider.count * pos;
+ case 'jumpStart': return pos;
+ default: return pos;
+ }
+ }() );
+
+ return ( posCalc * -1 ) + 'px';
+ }() );
+
+ if ( slider.transitions ) {
+ target = 'translate3d(' + target + ',0,0 )';
+ dur = ( dur !== undefined ) ? ( dur / 1000 ) + 's' : '0s';
+ slider.container.css( '-' + slider.pfx + '-transition-duration', dur );
+ }
+
+ slider.args[slider.prop] = target;
+ if ( slider.transitions || dur === undefined )
+ slider.container.css( slider.args );
+ };
+
+ slider.setup = function( type ) {
+ var sliderOffset, arr;
+
+ if ( type === 'init' ) {
+ slider.viewport = $( '<div class="' + namespace + 'viewport"></div>' ).css( { 'overflow': 'hidden', 'position': 'relative' } ).appendTo( slider ).append( slider.container );
+ slider.cloneCount = 0;
+ slider.cloneOffset = 0;
+ }
+ slider.cloneCount = 2;
+ slider.cloneOffset = 1;
+ // Clear out old clones.
+ if ( type !== 'init' )
+ slider.container.find( '.clone' ).remove();
+
+ slider.container.append( slider.slides.first().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) ).prepend( slider.slides.last().clone().addClass( 'clone' ).attr( 'aria-hidden', 'true' ) );
+ slider.newSlides = $( slider.vars.selector, slider );
+
+ sliderOffset = slider.currentSlide + slider.cloneOffset;
+ slider.container.width( ( slider.count + slider.cloneCount ) * 200 + '%' );
+ slider.setProps( sliderOffset * slider.computedW, 'init' );
+ setTimeout( function() {
+ slider.doMath();
+ slider.newSlides.css( { 'width': slider.computedW, 'float': 'left', 'display': 'block' } );
+ // SMOOTH HEIGHT
+ methods.smoothHeight();
+ }, ( type === 'init' ) ? 100 : 0 );
+
+ slider.slides.removeClass( namespace + 'active-slide' ).eq( slider.currentSlide ).addClass( namespace + 'active-slide' );
+ };
+
+ slider.doMath = function() {
+ var slide = slider.slides.first();
+
+ slider.w = ( slider.viewport===undefined ) ? slider.width() : slider.viewport.width();
+ slider.h = slide.height();
+ slider.boxPadding = slide.outerWidth() - slide.width();
+
+ slider.itemW = slider.w;
+ slider.pagingCount = slider.count;
+ slider.last = slider.count - 1;
+ slider.computedW = slider.itemW - slider.boxPadding;
+ };
+
+ slider.update = function( pos, action ) {
+ slider.doMath();
+
+ // Update currentSlide and slider.animatingTo if necessary.
+ if ( pos < slider.currentSlide ) {
+ slider.currentSlide += 1;
+ } else if ( pos <= slider.currentSlide && pos !== 0 ) {
+ slider.currentSlide -= 1;
+ }
+ slider.animatingTo = slider.currentSlide;
+
+ // Update controlNav.
+ if ( action === 'add' || slider.pagingCount > slider.controlNav.length ) {
+ methods.controlNav.update( 'add' );
+ } else if ( action === 'remove' || slider.pagingCount < slider.controlNav.length ) {
+ if ( slider.currentSlide > slider.last ) {
+ slider.currentSlide -= 1;
+ slider.animatingTo -= 1;
+ }
+ methods.controlNav.update( 'remove', slider.last );
+ }
+ // Update directionNav.
+ methods.directionNav.update();
+ };
+
+ // FeaturedSlider: initialize.
+ methods.init();
+ };
+
+ // Ensure the slider isn't focused if the window loses focus.
+ $( window ).blur( function ( e ) {
+ focused = false;
+ } ).focus( function ( e ) {
+ focused = true;
+ } );
+
+ // Default settings.
+ $.featuredslider.defaults = {
+ namespace: 'slider-', // String: prefix string attached to the class of every element generated by the plugin.
+ selector: '.slides > li', // String: selector, must match a simple pattern.
+ animationSpeed: 600, // Integer: Set the speed of animations, in milliseconds.
+ controlsContainer: '', // jQuery Object/Selector: container navigation to append elements.
+
+ // Text labels: @todo allow translation
+ prevText: 'Previous', // String: Set the text for the "previous" directionNav item.
+ nextText: 'Next' // String: Set the text for the "next" directionNav item.
+ };
+
+ // FeaturedSlider: plugin function.
+ $.fn.featuredslider = function( options ) {
+ if ( options === undefined )
+ options = {};
+
+ if ( typeof options === 'object' ) {
+ return this.each( function() {
+ var $this = $( this ),
+ selector = ( options.selector ) ? options.selector : '.slides > li',
+ $slides = $this.find( selector );
+
+ if ( $slides.length === 1 || $slides.length === 0 ) {
+ $slides.fadeIn( 400 );
+ } else if ( $this.data( 'featuredslider' ) === undefined ) {
+ new $.featuredslider( this, options );
+ }
+ } );
+ }
+ };
+} )( jQuery );
</ins><span class="cx">Property changes on: trunk/src/wp-content/themes/twentyfourteen/js/slider.js
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="trunksrcwpcontentthemestwentyfourteensidebarphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/sidebar.php (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/sidebar.php 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/sidebar.php 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -8,20 +8,18 @@
</span><span class="cx"> */
</span><span class="cx"> ?>
</span><span class="cx"> <div id="secondary">
</span><del>- <div id="secondary-top">
- <?php
- $description = get_bloginfo( 'description' );
- if ( ! empty ( $description ) ) :
- ?>
- <h2 class="site-description"><?php echo esc_html( $description ); ?></h2>
- <?php endif; ?>
</del><ins>+ <?php
+ $description = get_bloginfo( 'description' );
+ if ( ! empty ( $description ) ) :
+ ?>
+ <h2 class="site-description"><?php echo esc_html( $description ); ?></h2>
+ <?php endif; ?>
</ins><span class="cx">
</span><del>- <?php if ( has_nav_menu( 'secondary' ) ) : ?>
- <nav role="navigation" class="navigation site-navigation secondary-navigation">
- <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
- </nav>
- <?php endif; ?>
- </div><!-- #secondary-top -->
</del><ins>+ <?php if ( has_nav_menu( 'secondary' ) ) : ?>
+ <nav role="navigation" class="navigation site-navigation secondary-navigation">
+ <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
+ </nav>
+ <?php endif; ?>
</ins><span class="cx">
</span><span class="cx"> <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
</span><span class="cx"> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
</span><span class="lines">@@ -29,6 +27,6 @@
</span><span class="cx"> do_action( 'before_sidebar' );
</span><span class="cx"> dynamic_sidebar( 'sidebar-1' );
</span><span class="cx"> ?>
</span><del>- </div><!-- #secondary-bottom -->
</del><ins>+ </div><!-- #primary-sidebar .primary-sidebar -->
</ins><span class="cx"> <?php endif; ?>
</span><span class="cx"> </div><!-- #secondary -->
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyfourteenstylecss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-content/themes/twentyfourteen/style.css (25978 => 25979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-content/themes/twentyfourteen/style.css 2013-10-29 14:31:07 UTC (rev 25978)
+++ trunk/src/wp-content/themes/twentyfourteen/style.css 2013-10-29 16:28:11 UTC (rev 25979)
</span><span class="lines">@@ -556,12 +556,7 @@
</span><span class="cx">
</span><span class="cx"> img.size-full,
</span><span class="cx"> img.size-large,
</span><del>-img.wp-post-image {
- height: auto;
- max-width: 100%;
-}
-
-.attachment-featured-featured img,
</del><ins>+img.wp-post-image,
</ins><span class="cx"> .post-thumbnail img {
</span><span class="cx"> height: auto;
</span><span class="cx"> max-width: 100%;
</span><span class="lines">@@ -708,6 +703,8 @@
</span><span class="cx"> .footer-sidebar:after,
</span><span class="cx"> .hentry:before,
</span><span class="cx"> .hentry:after,
</span><ins>+.slider-direction-nav:before,
+.slider-direction-nav:after,
</ins><span class="cx"> [class*="content"]:before,
</span><span class="cx"> [class*="content"]:after,
</span><span class="cx"> [class*="site"]:before,
</span><span class="lines">@@ -719,6 +716,7 @@
</span><span class="cx"> .clear:after,
</span><span class="cx"> .footer-sidebar:after,
</span><span class="cx"> .hentry:after,
</span><ins>+.slider-direction-nav:after,
</ins><span class="cx"> [class*="content"]:after,
</span><span class="cx"> [class*="site"]:after {
</span><span class="cx"> clear: both;
</span><span class="lines">@@ -732,6 +730,7 @@
</span><span class="cx"> .contributor-posts-link:before,
</span><span class="cx"> .menu-toggle:before,
</span><span class="cx"> .search-toggle:before,
</span><ins>+.slider-direction-nav a:before,
</ins><span class="cx"> .widget_twentyfourteen_ephemera .widget-title:before {
</span><span class="cx"> -webkit-font-smoothing: antialiased;
</span><span class="cx"> display: inline-block;
</span><span class="lines">@@ -780,14 +779,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .site-header {
</span><del>- background-color: #000;
</del><span class="cx"> max-width: 1260px;
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 100%;
</span><del>- z-index: 3;
</del><ins>+ z-index: 4;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .header-main {
</span><ins>+ background-color: #000;
</ins><span class="cx"> min-height: 48px;
</span><span class="cx"> padding: 0 10px;
</span><span class="cx"> }
</span><span class="lines">@@ -812,7 +811,7 @@
</span><span class="cx"> cursor: pointer;
</span><span class="cx"> float: right;
</span><span class="cx"> height: 48px;
</span><del>- margin-right: 38px;
</del><ins>+ margin-right: 48px;
</ins><span class="cx"> text-align: center;
</span><span class="cx"> width: 48px;
</span><span class="cx"> }
</span><span class="lines">@@ -845,10 +844,10 @@
</span><span class="cx"> .search-box .search-field {
</span><span class="cx"> background-color: #fff;
</span><span class="cx"> float: right;
</span><del>- font-size: 13px;
</del><ins>+ font-size: 16px;
</ins><span class="cx"> margin: 12px 10px;
</span><del>- padding: 3px 2px 3px 6px;
- width: 240px;
</del><ins>+ padding: 1px 2px 2px 6px;
+ width: 300px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx">
</span><span class="lines">@@ -929,7 +928,7 @@
</span><span class="cx"> .secondary-navigation {
</span><span class="cx"> border-bottom: 1px solid rgba(255, 255, 255, 0.2);
</span><span class="cx"> font-size: 14px;
</span><del>- margin: 48px 0 0;
</del><ins>+ margin: 48px 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondary-navigation a {
</span><span class="lines">@@ -1006,7 +1005,7 @@
</span><span class="cx"> float: none;
</span><span class="cx"> height: auto;
</span><span class="cx"> margin: 0;
</span><del>- min-height: 180px;
</del><ins>+ min-height: 192px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 100%;
</span><span class="cx"> z-index: 0;
</span><span class="lines">@@ -1978,6 +1977,7 @@
</span><span class="cx"> #secondary {
</span><span class="cx"> background-color: #000;
</span><span class="cx"> border-top: 1px solid #000;
</span><ins>+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
</ins><span class="cx"> clear: both;
</span><span class="cx"> color: rgba(255, 255, 255, 0.55);
</span><span class="cx"> font-size: 14px;
</span><span class="lines">@@ -1998,6 +1998,9 @@
</span><span class="cx"> .primary-sidebar {
</span><span class="cx"> padding-top: 48px;
</span><span class="cx"> }
</span><ins>+.secondary-navigation + .primary-sidebar {
+ padding-top: 0;
+}
</ins><span class="cx">
</span><span class="cx"> .footer-sidebar a,
</span><span class="cx"> .primary-sidebar a {
</span><span class="lines">@@ -2079,7 +2082,7 @@
</span><span class="cx"> .widget-area input[type="reset"],
</span><span class="cx"> .widget-area input[type="submit"] {
</span><span class="cx"> font-size: 11px;
</span><del>- padding: 6px 24px;
</del><ins>+ padding: 6px 15px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .widget-area input[type="email"],
</span><span class="lines">@@ -2446,7 +2449,6 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .footer-sidebar {
</span><del>- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
</del><span class="cx"> padding-top: 48px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2455,6 +2457,10 @@
</span><span class="cx"> padding: 15px 10px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#supplementary + .site-info {
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
</ins><span class="cx"> .site-info a {
</span><span class="cx"> color: rgba(255, 255, 255, 0.75);
</span><span class="cx"> }
</span><span class="lines">@@ -2474,35 +2480,47 @@
</span><span class="cx"> -webkit-box-sizing: border-box;
</span><span class="cx"> -moz-box-sizing: border-box;
</span><span class="cx"> box-sizing: border-box;
</span><ins>+ position: relative;
</ins><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.featured-content-inner {
+ overflow: hidden;
+}
+
</ins><span class="cx"> .featured-content .hentry {
</span><span class="cx"> color: #fff;
</span><span class="cx"> margin: 0;
</span><ins>+ max-width: 100%;
</ins><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.attachment-featured-featured {
- background-color: #000;
</del><ins>+.featured-content .post-thumbnail,
+.featured-content .post-thumbnail:hover {
+ background: transparent;
+}
+
+.featured-content .post-thumbnail {
</ins><span class="cx"> display: block;
</span><del>- overflow: hidden;
</del><ins>+ min-height: 0;
+ position: relative;
+ padding-top: 55.357142857%;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.attachment-featured-featured:hover img {
- opacity: 0.85;
</del><ins>+.featured-content .post-thumbnail img {
+ left: 0;
+ position: absolute;
+ top: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.featured-content .entry-wrap {
</del><ins>+.featured-content .entry-header {
</ins><span class="cx"> background-color: #000;
</span><del>- border-color: #000;
- border-style: solid;
- border-width: 12px 10px;
</del><span class="cx"> -webkit-box-sizing: border-box;
</span><span class="cx"> -moz-box-sizing: border-box;
</span><span class="cx"> box-sizing: border-box;
</span><span class="cx"> min-height: 96px;
</span><span class="cx"> overflow: hidden;
</span><ins>+ padding: 24px 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .featured-content a {
</span><span class="lines">@@ -2533,20 +2551,132 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx">
</span><ins>+/* Slider */
+
+.slider .featured-content .hentry {
+ display: none;
+ -webkit-backface-visibility: hidden;
+ position: relative;
+}
+
+.slider .featured-content .post-thumbnail {
+ padding-top: 55.49132947%;
+}
+
+.slider-control-paging {
+ background-color: #000;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ float: left;
+ list-style: none;
+ margin: -24px 0 0 0;
+ position: relative;
+ width: 100%;
+ z-index: 3;
+}
+
+.slider-control-paging li {
+ float: left;
+ margin: 2px 4px 2px 0;
+}
+
+.slider-control-paging li:last-child {
+ margin-right: 0;
+}
+
+.slider-control-paging a {
+ cursor: pointer;
+ display: block;
+ height: 44px;
+ position: relative;
+ text-indent: -999em;
+ width: 44px;
+}
+
+.slider-control-paging a:before {
+ background-color: #4d4d4d;
+ content: "";
+ height: 12px;
+ left: 10px;
+ position: absolute;
+ top: 16px;
+ width: 12px;
+}
+
+.slider-control-paging a:hover:before {
+ background-color: #24890d;
+}
+
+.slider-control-paging a.slider-active:before {
+ background-color: #41a62a;
+}
+
+.slider-direction-nav {
+ clear: both;
+ list-style: none;
+ margin: 0;
+ position: relative;
+ width: 100%;
+ z-index: 3;
+}
+
+.slider-direction-nav li {
+ border-color: #fff;
+ border-style: solid;
+ border-width: 2px 1px 0 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ float: left;
+ text-align: center;
+ width: 50%;
+}
+
+.slider-direction-nav li:last-child {
+ border-width: 2px 0 0 1px;
+}
+
+.slider-direction-nav a {
+ background-color: #000;
+ display: block;
+ font-size: 0;
+ height: 46px;
+}
+
+.slider-direction-nav a:hover {
+ background-color: #24890d;
+}
+
+.slider-direction-nav a:before {
+ content: "\f430";
+ color: #fff;
+ font-size: 32px;
+ line-height: 46px;
+}
+
+.slider-direction-nav a.slider-next:before {
+ content: "\f429";
+}
+
+.slider-direction-nav .slider-disabled {
+ display: none;
+}
+
</ins><span class="cx"> /**
</span><span class="cx"> * 10.0 Media Queries
</span><span class="cx"> * -----------------------------------------------------------------------------
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> @media screen and (max-width: 400px) {
</span><del>- .list-view .post-thumbnail {
</del><ins>+ .list-view .site-content .post-thumbnail {
</ins><span class="cx"> background: none;
</span><span class="cx"> min-height: 0;
</span><span class="cx"> width: auto;
</span><span class="cx"> z-index: 2;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .list-view .post-thumbnail img {
</del><ins>+ .list-view .site-content .post-thumbnail img {
</ins><span class="cx"> float: left;
</span><span class="cx"> margin: 0 10px 3px 0;
</span><span class="cx"> width: 84px;
</span><span class="lines">@@ -2745,6 +2875,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 673px) {
</span><ins>+ .header-main {
+ padding: 0 0 0 30px;
+ }
+
</ins><span class="cx"> .content-area {
</span><span class="cx"> float: left;
</span><span class="cx"> padding-top: 36px;
</span><span class="lines">@@ -2795,6 +2929,11 @@
</span><span class="cx"> padding-left: 30px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ #secondary,
+ #supplementary {
+ padding: 0 30px;
+ }
+
</ins><span class="cx"> .content-sidebar {
</span><span class="cx"> border: 0;
</span><span class="cx"> float: right;
</span><span class="lines">@@ -2803,29 +2942,74 @@
</span><span class="cx"> width: 33.33333333%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .hentry {
</del><ins>+ .grid .featured-content .hentry {
</ins><span class="cx"> float: left;
</span><span class="cx"> width: 50%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .hentry:nth-child( 2n+1 ) {
</del><ins>+ .grid .featured-content .hentry:nth-child( 2n+1 ) {
</ins><span class="cx"> clear: both;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .entry-wrap {
</del><ins>+ .grid .featured-content .entry-header {
+ border-color: #000;
+ border-style: solid;
+ border-width: 12px 10px;
</ins><span class="cx"> height: 96px;
</span><ins>+ padding: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- .attachment-featured-featured {
- height: 186px;
</del><ins>+ .slider .featured-content .entry-title {
+ font-size: 22px;
+ line-height: 1.0909090909;
</ins><span class="cx"> }
</span><ins>+
+ .slider .featured-content .entry-header {
+ bottom: 0;
+ min-height: inherit;
+ padding: 24px 30px 48px;
+ position: absolute;
+ width: 50%;
+ z-index: 3;
+ }
+
+ .slider-control-paging {
+ background: transparent;
+ margin-top: -48px;
+ padding-left: 20px;
+ width: 50%;
+ }
+
+ .slider-direction-nav {
+ clear: none;
+ float: right;
+ margin-top: -48px;
+ width: 98px;
+ }
+
+ .slider-direction-nav li {
+ border: none;
+ padding: 0 1px; 0 0;
+ }
+
+ .slider-direction-nav li:last-child {
+ padding: 0 0 0 1px;
+ }
+
+ .slider-direction-nav a {
+ height: 48px;
+ }
+
+ .slider-direction-nav a:before {
+ line-height: 48px;
+ }
+
+ .site-info {
+ padding: 15px 30px;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 782px) {
</span><del>- .header-main {
- padding: 0 0 0 30px;
- }
-
</del><span class="cx"> .search-toggle {
</span><span class="cx"> margin-right: 0;
</span><span class="cx"> }
</span><span class="lines">@@ -2945,10 +3129,6 @@
</span><span class="cx"> .primary-navigation li .current-menu-ancestor > a {
</span><span class="cx"> background-color: #000;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 213px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 810px) {
</span><span class="lines">@@ -2992,10 +3172,6 @@
</span><span class="cx"> .contributor-summary {
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 224px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 870px) {
</span><span class="lines">@@ -3057,10 +3233,6 @@
</span><span class="cx"> .featured-content {
</span><span class="cx"> margin-bottom: -24px;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 241px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 1008px) {
</span><span class="lines">@@ -3101,14 +3273,13 @@
</span><span class="cx">
</span><span class="cx"> #secondary {
</span><span class="cx"> background-color: transparent;
</span><del>- border-top: 0;
</del><ins>+ border: 0;
</ins><span class="cx"> clear: none;
</span><span class="cx"> float: left;
</span><span class="cx"> font-size: 11px;
</span><span class="cx"> line-height: 1.6363636363;
</span><span class="cx"> margin: 0 0 0 -100%;
</span><span class="cx"> min-height: 100vh;
</span><del>- padding: 0 30px;
</del><span class="cx"> width: 122px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -3145,7 +3316,7 @@
</span><span class="cx"> .secondary-navigation {
</span><span class="cx"> border-bottom: 1px solid rgba(255, 255, 255, 0.2);
</span><span class="cx"> font-size: 11px;
</span><del>- margin: 0 0 48px;
</del><ins>+ margin-top: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .secondary-navigation ul,
</span><span class="lines">@@ -3203,10 +3374,6 @@
</span><span class="cx"> width: 25%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .site-info {
- padding: 15px 30px;
- }
-
</del><span class="cx"> .front-page-content-wrapper {
</span><span class="cx"> float: left;
</span><span class="cx"> }
</span><span class="lines">@@ -3215,25 +3382,21 @@
</span><span class="cx"> padding-left: 182px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .hentry {
</del><ins>+ .grid .featured-content .hentry {
</ins><span class="cx"> width: 33.3333333%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .hentry:nth-child( 2n+1 ) {
</del><ins>+ .grid .featured-content .hentry:nth-child( 2n+1 ) {
</ins><span class="cx"> clear: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .hentry:nth-child( 3n+1 ) {
</del><ins>+ .grid .featured-content .hentry:nth-child( 3n+1 ) {
</ins><span class="cx"> clear: both;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .featured-content .entry-wrap {
</del><ins>+ .grid .featured-content .entry-header {
</ins><span class="cx"> height: 120px;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 152px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 1040px) {
</span><span class="lines">@@ -3273,10 +3436,6 @@
</span><span class="cx"> padding-right: 30px;
</span><span class="cx"> padding-left: 30px;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 158px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 1080px) {
</span><span class="lines">@@ -3301,6 +3460,33 @@
</span><span class="cx"> .secondary-navigation ul ul {
</span><span class="cx"> left: 162px;
</span><span class="cx"> }
</span><ins>+
+ .slider .featured-content .entry-title {
+ font-size: 33px;
+ }
+
+ .slider .featured-content .entry-header,
+ .slider-control-paging {
+ width: 534px;
+ }
+
+ .slider-control-paging {
+ padding-left: 24px;
+ }
+
+ .slider-control-paging li {
+ margin: 12px 12px 12px 0
+ }
+
+ .slider-control-paging a {
+ height: 24px;
+ width: 24px;
+ }
+
+ .slider-control-paging a:before {
+ left: 6px;
+ top: 6px;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 1110px) {
</span><span class="lines">@@ -3317,10 +3503,6 @@
</span><span class="cx"> padding-right: 30px;
</span><span class="cx"> padding-left: 30px;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 164px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 1218px) {
</span><span class="lines">@@ -3349,10 +3531,6 @@
</span><span class="cx"> .full-width .site-content footer.entry-meta {
</span><span class="cx"> margin-right: auto;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 184px;
- }
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-width: 1260px) {
</span><span class="lines">@@ -3369,8 +3547,4 @@
</span><span class="cx"> .site-content blockquote.alignright {
</span><span class="cx"> margin-right: -18%;
</span><span class="cx"> }
</span><del>-
- .attachment-featured-featured {
- height: 192px;
- }
</del><span class="cx"> }
</span><span class="cx">\ No newline at end of file
</span></span></pre>
</div>
</div>
</body>
</html>