From fa3d86936ab753b978b64b153d66ac37636c041f Mon Sep 17 00:00:00 2001
From: obenland <obenland@gmx.de>
Date: Wed, 27 Feb 2013 14:47:03 -0800
Subject: [PATCH] _s: Simplify and unify navigation classes throughout
 Underscores.

For more information about the philosophy behind the new approach,
see http://24ways.org/2012/a-harder-working-class/
---
 comments.php          | 16 +++++------
 header.php            |  2 +-
 image.php             |  6 ++---
 inc/template-tags.php | 12 ++++-----
 js/navigation.js      | 10 +++----
 style.css             | 62 +++++++++++++++++++++----------------------
 6 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/comments.php b/comments.php
index 3f5d2c7b..5f69ebee 100644
--- a/comments.php
+++ b/comments.php
@@ -35,11 +35,11 @@
 		</h2>
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
-		<nav role="navigation" id="comment-nav-above" class="site-navigation comment-navigation">
+		<nav id="comment-nav-above" role="navigation" class="navigation-comment">
 			<h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
-			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
-			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
-		</nav><!-- #comment-nav-before .site-navigation .comment-navigation -->
+			<div class="previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
+			<div class="next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
+		</nav><!-- #comment-nav-before -->
 		<?php endif; // check for comment navigation ?>
 
 		<ol class="comment-list">
@@ -55,11 +55,11 @@
 		</ol><!-- .commentlist -->
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
-		<nav role="navigation" id="comment-nav-below" class="site-navigation comment-navigation">
+		<nav id="comment-nav-below" role="navigation" class="navigation-comment">
 			<h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
-			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
-			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
-		</nav><!-- #comment-nav-below .site-navigation .comment-navigation -->
+			<div class="previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
+			<div class="next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
+		</nav><!-- #comment-nav-below -->
 		<?php endif; // check for comment navigation ?>
 
 	<?php endif; // have_comments() ?>
diff --git a/header.php b/header.php
index a1a98a4f..5720a8ed 100644
--- a/header.php
+++ b/header.php
@@ -31,7 +31,7 @@
 			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 		</hgroup>
 
-		<nav role="navigation" class="site-navigation main-navigation" id="site-navigation">
+		<nav id="site-navigation" class="navigation-main" role="navigation">
 			<h1 class="menu-toggle"><?php _e( 'Menu', '_s' ); ?></h1>
 			<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>
 
diff --git a/image.php b/image.php
index 342922b6..a8c76090 100644
--- a/image.php
+++ b/image.php
@@ -35,9 +35,9 @@ get_header();
 							<?php edit_post_link( __( 'Edit', '_s' ), '<span class="sep"> | </span> <span class="edit-link">', '</span>' ); ?>
 						</div><!-- .entry-meta -->
 
-						<nav id="image-navigation" class="site-navigation">
-							<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', '_s' ) ); ?></span>
-							<span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', '_s' ) ); ?></span>
+						<nav id="image-navigation" class="navigation-image">
+							<span class="previous"><?php previous_image_link( false, __( '&larr; Previous', '_s' ) ); ?></span>
+							<span class="next"><?php next_image_link( false, __( 'Next &rarr;', '_s' ) ); ?></span>
 						</nav><!-- #image-navigation -->
 					</header><!-- .entry-header -->
 
diff --git a/inc/template-tags.php b/inc/template-tags.php
index 3ed0a3dd..47f895bc 100644
--- a/inc/template-tags.php
+++ b/inc/template-tags.php
@@ -30,9 +30,7 @@ function _s_content_nav( $nav_id ) {
 	if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
 		return;
 
-	$nav_class = 'site-navigation paging-navigation';
-	if ( is_single() )
-		$nav_class = 'site-navigation post-navigation';
+	$nav_class = ( is_single() ) ? 'navigation-post' : 'navigation-paging';
 
 	?>
 	<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?>">
@@ -40,17 +38,17 @@ function _s_content_nav( $nav_id ) {
 
 	<?php if ( is_single() ) : // navigation links for single posts ?>
 
-		<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', '_s' ) . '</span> %title' ); ?>
-		<?php next_post_link( '<div class="nav-next">%link</div>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', '_s' ) . '</span>' ); ?>
+		<?php previous_post_link( '<div class="previous">%link</div>', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', '_s' ) . '</span> %title' ); ?>
+		<?php next_post_link( '<div class="next">%link</div>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', '_s' ) . '</span>' ); ?>
 
 	<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
 
 		<?php if ( get_next_posts_link() ) : ?>
-		<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', '_s' ) ); ?></div>
+		<div class="previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', '_s' ) ); ?></div>
 		<?php endif; ?>
 
 		<?php if ( get_previous_posts_link() ) : ?>
-		<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', '_s' ) ); ?></div>
+		<div class="next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', '_s' ) ); ?></div>
 		<?php endif; ?>
 
 	<?php endif; ?>
diff --git a/js/navigation.js b/js/navigation.js
index 568e4c9d..22f7444e 100644
--- a/js/navigation.js
+++ b/js/navigation.js
@@ -4,9 +4,9 @@
  * Handles toggling the navigation menu for small screens.
  */
 ( function() {
-	var button    = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h1' )[0],
-	    menu      = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0];
-	    container = document.getElementById( 'site-navigation' );
+	var container = document.getElementById( 'site-navigation' ),
+	    button    = container.getElementsByTagName( 'h1' )[0],
+	    menu      = container.getElementsByTagName( 'ul' )[0];
 
 	if ( undefined == button || undefined == menu )
 		return false;
@@ -18,11 +18,11 @@
 		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
 			button.className = button.className.replace( ' toggled-on', '' );
 			menu.className = menu.className.replace( ' toggled-on', '' );
-			container.className = container.className.replace( ' main-small-navigation', ' main-navigation' );
+			container.className = container.className.replace( 'main-small-navigation', 'navigation-main' );
 		} else {
 			button.className += ' toggled-on';
 			menu.className += ' toggled-on';
-			container.className = container.className.replace( ' main-navigation', ' main-small-navigation' );
+			container.className = container.className.replace( 'navigation-main', 'main-small-navigation' );
 		}
 	};
 
diff --git a/style.css b/style.css
index 7b8da788..0291319e 100644
--- a/style.css
+++ b/style.css
@@ -279,26 +279,26 @@ input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly i
 	border: 0;
 	padding: 0;
 }
-input[type=text],
-input[type=email],
-input[type=password],
-input[type=search],
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
 textarea {
 	color: #666;
 	border: 1px solid #ccc;
 	border-radius: 3px;
 }
-input[type=text]:focus,
-input[type=email]:focus,
-input[type=password]:focus,
-input[type=search]:focus,
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
 textarea:focus {
 	color: #111;
 }
-input[type=text],
-input[type=email],
-input[type=password],
-input[type=search] {
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"] {
 	padding: 3px;
 }
 textarea {
@@ -349,26 +349,26 @@ a:active {
 /* =Menu
 ----------------------------------------------- */
 
-.main-navigation {
+.navigation-main {
 	clear: both;
 	display: block;
 	float: left;
 	width: 100%;
 }
-.main-navigation ul {
+.navigation-main ul {
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
 }
-.main-navigation li {
+.navigation-main li {
 	float: left;
 	position: relative;
 }
-.main-navigation a {
+.navigation-main a {
 	display: block;
 	text-decoration: none;
 }
-.main-navigation ul ul {
+.navigation-main ul ul {
 	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
 	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
 	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
@@ -379,26 +379,26 @@ a:active {
 		left: 0;
 	z-index: 99999;
 }
-.main-navigation ul ul ul {
+.navigation-main ul ul ul {
 	left: 100%;
 	top: 0;
 }
-.main-navigation ul ul a {
+.navigation-main ul ul a {
 	width: 200px;
 }
-.main-navigation ul ul li {
+.navigation-main ul ul li {
 }
-.main-navigation li:hover > a {
+.navigation-main li:hover > a {
 }
-.main-navigation ul ul :hover > a {
+.navigation-main ul ul :hover > a {
 }
-.main-navigation ul ul a:hover {
+.navigation-main ul ul a:hover {
 }
-.main-navigation ul li:hover > ul {
+.navigation-main ul li:hover > ul {
 	display: block;
 }
-.main-navigation li.current_page_item a,
-.main-navigation li.current-menu-item a {
+.navigation-main li.current_page_item a,
+.navigation-main li.current-menu-item a {
 }
 
 /* Small menu */
@@ -417,7 +417,7 @@ a:active {
 		display: block;
 	}
 
-	.main-navigation ul {
+	.navigation-main ul {
 		display: none;
 	}
 }
@@ -533,15 +533,15 @@ object {
 /* =Navigation
 ----------------------------------------------- */
 
-.site-content .site-navigation {
+.site-content [class*="navigation"] {
 	margin: 0 0 1.5em;
 	overflow: hidden;
 }
-.site-content .nav-previous {
+[class*="navigation"] .previous {
 	float: left;
 	width: 50%;
 }
-.site-content .nav-next {
+[class*="navigation"] .next {
 	float: right;
 	text-align: right;
 	width: 50%;
@@ -577,7 +577,7 @@ object {
 ----------------------------------------------- */
 
 /* Globally hidden elements when Infinite Scroll is supported and in use. */
-.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
+.infinite-scroll .navigation-paging, /* Older / Newer Posts Navigation (always hidden) */
 .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
 	display: none;
 }