Twenty Twelve: CSS and markup improvements for better child theme support, part 3. See #21379.

* Add classes like `.site` and `.site-content` in addition to the set of IDs already present, making things much better for child themes to have more than one generic element like `nav` inside the content container.
 * Bump JS version after selector change.
 * Move `image-attachment` to `post_class()` output

More exhaustive notes in the ticket on each id and class change.


git-svn-id: http://core.svn.wordpress.org/trunk@21404 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2012-08-02 19:12:11 +00:00
parent 40d63f512c
commit 2ecc5bacb8
17 changed files with 113 additions and 113 deletions

View File

@ -9,7 +9,7 @@
get_header(); ?> get_header(); ?>
<div id="primary"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<article id="post-0" class="post error404 no-results not-found"> <article id="post-0" class="post error404 no-results not-found">
@ -24,6 +24,6 @@ get_header(); ?>
</article><!-- #post-0 --> </article><!-- #post-0 -->
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -14,7 +14,7 @@
get_header(); ?> get_header(); ?>
<section id="primary"> <section id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
@ -71,7 +71,7 @@ get_header(); ?>
<?php endif; ?> <?php endif; ?>
</div><!-- #content --> </div><!-- #content -->
</section><!-- #primary --> </section><!-- #primary .site-content -->
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -9,7 +9,7 @@
get_header(); ?> get_header(); ?>
<section id="primary"> <section id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
@ -64,7 +64,7 @@ get_header(); ?>
<?php endif; ?> <?php endif; ?>
</div><!-- #content --> </div><!-- #content -->
</section><!-- #primary --> </section><!-- #primary .site-content -->
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -21,12 +21,12 @@
if ( post_password_required() ) if ( post_password_required() )
return; return;
?> ?>
<div id="comments"> <div id="comments" class="comments-area">
<?php // You can start editing here -- including this comment! ?> <?php // You can start editing here -- including this comment! ?>
<?php if ( have_comments() ) : ?> <?php if ( have_comments() ) : ?>
<h2 id="comments-title"> <h2 class="comments-title">
<?php <?php
printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ), printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' ); number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
@ -38,7 +38,7 @@
</ol><!-- .commentlist --> </ol><!-- .commentlist -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below" role="navigation"> <nav id="comment-nav-below" class="navigation" role="navigation">
<h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1> <h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div> <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div> <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div>
@ -53,4 +53,4 @@
<?php comment_form(); ?> <?php comment_form(); ?>
</div><!-- #comments --> </div><!-- #comments .comments-area -->

View File

@ -9,14 +9,14 @@
* @since Twenty Twelve 1.0 * @since Twenty Twelve 1.0
*/ */
?> ?>
</div><!-- #main --> </div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo"> <footer id="colophon" role="contentinfo">
<div class="site-info"> <div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?> <?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
</div><!-- .site-info --> </div><!-- .site-info -->
</footer><!-- #colophon --> </footer><!-- #colophon -->
</div><!-- #page --> </div><!-- #page .site -->
<?php wp_footer(); ?> <?php wp_footer(); ?>
</body> </body>

View File

@ -9,7 +9,7 @@
get_header(); ?> get_header(); ?>
<div id="primary"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
@ -18,6 +18,6 @@ get_header(); ?>
<?php endwhile; // end of the loop. ?> <?php endwhile; // end of the loop. ?>
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
* JavaScript for handling navigation menus and the resized * JavaScript for handling navigation menus and the resized
* styles for small screen sizes. * styles for small screen sizes.
*/ */
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130320', true ); wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20120802', true );
/** /**
* Load special font CSS file. * Load special font CSS file.
@ -214,7 +214,7 @@ function twentytwelve_content_nav( $nav_id ) {
global $wp_query; global $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?> if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $nav_id; ?>" role="navigation"> <nav id="<?php echo $nav_id; ?>" class="navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
<div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div> <div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div> <div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>

View File

@ -23,14 +23,14 @@
</head> </head>
<body <?php body_class(); ?>> <body <?php body_class(); ?>>
<div id="page" class="hfeed"> <div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner"> <header id="masthead" class="site-header" role="banner">
<hgroup> <hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup> </hgroup>
<nav class="site-navigation main-navigation" role="navigation"> <nav class="main-navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3> <h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div> <div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
@ -42,4 +42,4 @@
<?php endif; ?> <?php endif; ?>
</header><!-- #masthead --> </header><!-- #masthead -->
<div id="main"> <div id="main" class="wrapper">

View File

@ -9,7 +9,7 @@
get_header(); ?> get_header(); ?>
<div id="primary"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
@ -24,7 +24,7 @@ get_header(); ?>
<?php endwhile; // end of the loop. ?> <?php endwhile; // end of the loop. ?>
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_sidebar( 'home' ); ?> <?php get_sidebar( 'home' ); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -9,12 +9,12 @@
get_header(); ?> get_header(); ?>
<div id="primary" class="image-attachment"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class( 'image-attachment' ); ?>>
<header class="entry-header"> <header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1> <h1 class="entry-title"><?php the_title(); ?></h1>
@ -35,7 +35,7 @@ get_header(); ?>
<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?> <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta --> </footer><!-- .entry-meta -->
<nav id="image-navigation" role="navigation"> <nav id="image-navigation" class="navigation" role="navigation">
<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span> <span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span>
<span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span> <span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span>
</nav><!-- #image-navigation --> </nav><!-- #image-navigation -->
@ -97,6 +97,6 @@ if ( count( $attachments ) > 1 ) {
<?php endwhile; // end of the loop. ?> <?php endwhile; // end of the loop. ?>
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -15,7 +15,7 @@
get_header(); ?> get_header(); ?>
<div id="primary"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
@ -59,7 +59,7 @@ get_header(); ?>
<?php endif; // end have_posts() check ?> <?php endif; // end have_posts() check ?>
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -10,8 +10,8 @@ jQuery( document ).ready( function( $ ) {
timeout = false; timeout = false;
$.fn.smallMenu = function() { $.fn.smallMenu = function() {
masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' ); masthead.find( '.main-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' ); masthead.find( '.main-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
$( '.menu-toggle' ).off( 'click' ).click( function() { $( '.menu-toggle' ).off( 'click' ).click( function() {
masthead.find( '.menu' ).slideToggle(); masthead.find( '.menu' ).slideToggle();
@ -32,8 +32,8 @@ jQuery( document ).ready( function( $ ) {
if ( ! largeWindow.matches ) { if ( ! largeWindow.matches ) {
$.fn.smallMenu(); $.fn.smallMenu();
} else { } else {
masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' ); masthead.find( '.main-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' ); masthead.find( '.main-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
masthead.find( '.menu' ).removeAttr( 'style' ); masthead.find( '.menu' ).removeAttr( 'style' );
} }
}, 200 ); }, 200 );

View File

@ -14,7 +14,7 @@
get_header(); ?> get_header(); ?>
<div id="primary"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
@ -23,7 +23,7 @@ get_header(); ?>
<?php endwhile; // end of the loop. ?> <?php endwhile; // end of the loop. ?>
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

20
rtl.css
View File

@ -24,11 +24,11 @@ td {
.alignleft { .alignleft {
float: left; float: left;
} }
#content .gallery-columns-4 .gallery-item { .site-content .gallery-columns-4 .gallery-item {
padding-left: 2%; padding-left: 2%;
padding-right: 0; padding-right: 0;
} }
#content .gallery-columns-5 .gallery-item { .site-content .gallery-columns-5 .gallery-item {
padding-left: 2%; padding-left: 2%;
padding-right: 0; padding-right: 0;
} }
@ -117,20 +117,20 @@ article.format-link .entry-content {
/* =Comment styling /* =Comment styling
-------------------------------------------------------------- */ -------------------------------------------------------------- */
#comments article header img { .comments-area article header img {
float: right; float: right;
} }
#comments article header cite, .comments-area article header cite,
#comments article header time { .comments-area article header time {
margin-right: 85px; margin-right: 85px;
margin-right: 6.071428571rem; margin-right: 6.071428571rem;
margin-left: auto; margin-left: auto;
} }
#comments article header h4 { .comments-area article header h4 {
left: 0; left: 0;
right: auto; right: auto;
} }
#comments li.bypostauthor cite span { .comments-area li.bypostauthor cite span {
margin-right: 5px; margin-right: 5px;
margin-right: 0.357142857rem; margin-right: 0.357142857rem;
margin-left: auto; margin-left: auto;
@ -151,7 +151,7 @@ label ~ span.required {
/* =Home page template styling /* =Home page template styling
-------------------------------------------------------------- */ -------------------------------------------------------------- */
.page-template-homepage-php #secondary aside.widget_text img { .page-template-homepage-php .widget-area .widget_text img {
float: right; float: right;
margin: 8px 0 8px 24px; margin: 8px 0 8px 24px;
} }
@ -160,7 +160,7 @@ label ~ span.required {
/* =Widget styling /* =Widget styling
-------------------------------------------------------------- */ -------------------------------------------------------------- */
.widget ul ul { .widget-area .widget ul ul {
margin-right: 12px; margin-right: 12px;
margin-right: 0.857142857rem; margin-right: 0.857142857rem;
margin-left: auto; margin-left: auto;
@ -187,7 +187,7 @@ label ~ span.required {
/* Minimum width of 600 pixels. */ /* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
.page-template-homepage-php #secondary aside.widget_text img { .page-template-homepage-php .widget-area .widget_text img {
float: right; float: right;
margin: 8px 0 8px 24px; margin: 8px 0 8px 24px;
} }

View File

@ -9,7 +9,7 @@
get_header(); ?> get_header(); ?>
<section id="primary"> <section id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
@ -43,7 +43,7 @@ get_header(); ?>
<?php endif; ?> <?php endif; ?>
</div><!-- #content --> </div><!-- #content -->
</section><!-- #primary --> </section><!-- #primary .site-content -->
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

View File

@ -9,18 +9,18 @@
get_header(); ?> get_header(); ?>
<div id="primary"> <div id="primary" class="site-content">
<div id="content" role="main"> <div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?> <?php get_template_part( 'content', get_post_format() ); ?>
<nav id="nav-single"> <nav class="nav-single">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span>', 'twentytwelve' ) . ' %title' ); ?></span> <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span>', 'twentytwelve' ) . ' %title' ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', '%title ' . __( '<span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></span> <span class="nav-next"><?php next_post_link( '%link', '%title ' . __( '<span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></span>
</nav><!-- #nav-single --> </nav><!-- .nav-single -->
<?php <?php
// If comments are open or we have at least one comment, load up the comment template // If comments are open or we have at least one comment, load up the comment template
@ -31,7 +31,7 @@ get_header(); ?>
<?php endwhile; // end of the loop. ?> <?php endwhile; // end of the loop. ?>
</div><!-- #content --> </div><!-- #content -->
</div><!-- #primary --> </div><!-- #primary .site-content -->
<?php get_sidebar(); ?> <?php get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

128
style.css
View File

@ -329,17 +329,17 @@ img.wp-smiley {
width: 100%; width: 100%;
height: auto; height: auto;
} }
#content .gallery-columns-4 .gallery-item { .site-content .gallery-columns-4 .gallery-item {
width: 23%; width: 23%;
padding-right: 2%; padding-right: 2%;
} }
#content .gallery-columns-5 .gallery-item { .site-content .gallery-columns-5 .gallery-item {
width: 18%; width: 18%;
padding-right: 2%; padding-right: 2%;
} }
/* Navigation */ /* Navigation */
#content nav { .site-content nav {
clear: both; clear: both;
line-height: 2; line-height: 2;
overflow: hidden; overflow: hidden;
@ -365,7 +365,7 @@ img.wp-smiley {
text-align: right; text-align: right;
width: 50%; width: 50%;
} }
#nav-single + #comments, .nav-single + .comments-area,
#comment-nav-above { #comment-nav-above {
margin: 48px 0; margin: 48px 0;
margin: 3.428571429rem 0; margin: 3.428571429rem 0;
@ -418,19 +418,19 @@ a:hover {
} }
/* Page structure */ /* Page structure */
#page { .wrapper {
overflow: hidden;
}
.site {
padding: 0 24px; padding: 0 24px;
padding: 0 1.714285714rem; padding: 0 1.714285714rem;
background-color: #fff; background-color: #fff;
} }
#main { .site-content {
overflow: hidden;
}
#primary {
margin: 24px 0 0; margin: 24px 0 0;
margin: 1.714285714rem 0 0; margin: 1.714285714rem 0 0;
} }
#secondary { .widget-area {
margin: 24px 0 0; margin: 24px 0 0;
margin: 1.714285714rem 0 0; margin: 1.714285714rem 0 0;
} }
@ -592,24 +592,24 @@ section[role="banner"] {
} }
/* Sidebar */ /* Sidebar */
#secondary aside { .widget-area .widget {
margin-bottom: 48px; margin-bottom: 48px;
margin-bottom: 3.428571429rem; margin-bottom: 3.428571429rem;
} }
#secondary aside h3 { .widget-area .widget h3 {
margin-bottom: 24px; margin-bottom: 24px;
margin-bottom: 1.714285714rem; margin-bottom: 1.714285714rem;
} }
#secondary aside p, .widget-area .widget p,
#secondary aside li { .widget-area .widget li {
font-size: 13px; font-size: 13px;
font-size: 0.928571429rem; font-size: 0.928571429rem;
line-height: 1.846153846; line-height: 1.846153846;
} }
#secondary aside a { .widget-area .widget a {
color: #777; color: #777;
} }
#secondary aside a:hover { .widget-area .widget a:hover {
color: #21759b; color: #21759b;
} }
@ -884,7 +884,7 @@ img.aligncenter {
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
padding: 6px 10px 6px 0; padding: 6px 10px 6px 0;
} }
#content article { .site-content article {
padding-bottom: 24px; padding-bottom: 24px;
padding-bottom: 1.714285714rem; padding-bottom: 1.714285714rem;
margin-bottom: 72px; margin-bottom: 72px;
@ -912,7 +912,7 @@ footer .edit-link {
/* =Archives /* =Archives
-------------------------------------------------------------- */ -------------------------------------------------------------- */
.archive #content .archive-header, .archive .site-content .archive-header,
.search .page-header { .search .page-header {
margin-bottom: 48px; margin-bottom: 48px;
margin-bottom: 3.428571429rem; margin-bottom: 3.428571429rem;
@ -1044,7 +1044,7 @@ article.format-quote .entry-content blockquote {
/* =Comments /* =Comments
-------------------------------------------------------------- */ -------------------------------------------------------------- */
#comments-title { .comments-title {
margin-bottom: 48px; margin-bottom: 48px;
margin-bottom: 3.428571429rem; margin-bottom: 3.428571429rem;
font-size: 16px; font-size: 16px;
@ -1052,55 +1052,55 @@ article.format-quote .entry-content blockquote {
line-height: 1.5; line-height: 1.5;
font-weight: normal; font-weight: normal;
} }
#comments article { .comments-area article {
margin: 24px 0; margin: 24px 0;
margin: 1.714285714rem 0; margin: 1.714285714rem 0;
overflow: hidden; overflow: hidden;
} }
#comments article header { .comments-area article header {
margin: 0 0 48px; margin: 0 0 48px;
margin: 0 0 3.428571429rem; margin: 0 0 3.428571429rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
#comments article header img { .comments-area article header img {
float: left; float: left;
padding: 0; padding: 0;
line-height: 0; line-height: 0;
} }
#comments article header cite, .comments-area article header cite,
#comments article header time { .comments-area article header time {
display: block; display: block;
margin-left: 85px; margin-left: 85px;
margin-left: 6.071428571rem; margin-left: 6.071428571rem;
} }
#comments article header cite { .comments-area article header cite {
font-style: normal; font-style: normal;
font-size: 15px; font-size: 15px;
font-size: 1.071428571rem; font-size: 1.071428571rem;
line-height: 1.6; line-height: 1.6;
} }
#comments article header time { .comments-area article header time {
line-height: 1.714285714; line-height: 1.714285714;
text-decoration: none; text-decoration: none;
font-size: 12px; font-size: 12px;
font-size: 0.857142857rem; font-size: 0.857142857rem;
color: #5e5e5e; color: #5e5e5e;
} }
#comments article header a { .comments-area article header a {
text-decoration: none; text-decoration: none;
color: #5e5e5e; color: #5e5e5e;
} }
#comments article header a:hover { .comments-area article header a:hover {
color: #21759b; color: #21759b;
} }
#comments article header cite a { .comments-area article header cite a {
color: #444; color: #444;
} }
#comments article header cite a:hover { .comments-area article header cite a:hover {
text-decoration: underline; text-decoration: underline;
} }
#comments article header h4 { .comments-area article header h4 {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -1120,12 +1120,12 @@ article.format-quote .entry-content blockquote {
border-radius: 3px; border-radius: 3px;
border: 1px solid #007cbd; border: 1px solid #007cbd;
} }
#comments article p { .comments-area article p {
margin: 24px 0; margin: 24px 0;
margin: 1.714285714rem 0; margin: 1.714285714rem 0;
line-height: 1.714285714; line-height: 1.714285714;
} }
#comments li.bypostauthor cite span { .comments-area li.bypostauthor cite span {
margin-left: 5px; margin-left: 5px;
margin-left: 0.357142857rem; margin-left: 0.357142857rem;
padding: 2px 5px; padding: 2px 5px;
@ -1219,11 +1219,11 @@ label ~ span.required {
/* =Homepage template /* =Homepage template
-------------------------------------------------------------- */ -------------------------------------------------------------- */
.page-template-homepage-php #content article { .page-template-homepage-php .site-content article {
border: 0; border: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.page-template-homepage-php #secondary { .page-template-homepage-php .widget-area {
clear: both; clear: both;
float: none; float: none;
width: auto; width: auto;
@ -1231,7 +1231,7 @@ label ~ span.required {
padding-top: 1.714285714rem; padding-top: 1.714285714rem;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
} }
.page-template-homepage-php #secondary aside li { .page-template-homepage-php .widget-area .widget li {
margin: 8px 0 0; margin: 8px 0 0;
margin: 0.571428571rem 0 0; margin: 0.571428571rem 0 0;
font-size: 13px; font-size: 13px;
@ -1241,13 +1241,13 @@ label ~ span.required {
list-style-type: square; list-style-type: square;
list-style-position: inside; list-style-position: inside;
} }
.page-template-homepage-php #secondary aside li a { .page-template-homepage-php .widget-area .widget li a {
color: #777; color: #777;
} }
.page-template-homepage-php #secondary aside li a:hover { .page-template-homepage-php .widget-area .widget li a:hover {
color: #21759b; color: #21759b;
} }
.page-template-homepage-php #secondary aside.widget_text img { .page-template-homepage-php .widget-area .widget_text img {
float: left; float: left;
margin: 8px 24px 8px 0; margin: 8px 24px 8px 0;
margin: 0.571428571rem 1.714285714rem 0.571428571rem 0; margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
@ -1257,7 +1257,7 @@ label ~ span.required {
/* =Widgets /* =Widgets
-------------------------------------------------------------- */ -------------------------------------------------------------- */
.widget ul ul { .widget-area .widget ul ul {
margin-left: 12px; margin-left: 12px;
margin-left: 0.857142857rem; margin-left: 0.857142857rem;
} }
@ -1312,23 +1312,23 @@ label ~ span.required {
float: right; float: right;
width: 80%; width: 80%;
} }
#page { .site {
margin: 0 auto; margin: 0 auto;
max-width: 960px; max-width: 960px;
max-width: 68.571428571rem; max-width: 68.571428571rem;
overflow: hidden; overflow: hidden;
} }
#primary { .site-content {
float: left; float: left;
width: 65.104166667%; width: 65.104166667%;
} }
body.page-template-full-width-page-php #primary, body.page-template-full-width-page-php .site-content,
body.page-template-homepage-php #primary, body.page-template-homepage-php .site-content,
body.single-attachment #primary, body.single-attachment .site-content,
body.full-width #primary { body.full-width .site-content {
width: 100%; width: 100%;
} }
#secondary { .widget-area {
float: right; float: right;
width: 26.041666667%; width: 26.041666667%;
} }
@ -1352,7 +1352,7 @@ label ~ span.required {
#respond form textarea.blog-textarea { #respond form textarea.blog-textarea {
width: 79.666666667%; width: 79.666666667%;
} }
.page-template-homepage-php #content, .page-template-homepage-php .site-content,
.page-template-homepage-php article { .page-template-homepage-php article {
overflow: hidden; overflow: hidden;
} }
@ -1364,13 +1364,13 @@ label ~ span.required {
float: right; float: right;
width: 47.916666667%; width: 47.916666667%;
} }
.page-template-homepage-php #secondary aside { .page-template-homepage-php .widget-area .widget {
float: left; float: left;
width: 51.875%; width: 51.875%;
margin-bottom: 24px; margin-bottom: 24px;
margin-bottom: 1.714285714rem; margin-bottom: 1.714285714rem;
} }
.page-template-homepage-php #secondary aside:nth-child(even) { .page-template-homepage-php .widget-area .widget:nth-child(even) {
float: right; float: right;
width: 39.0625%; width: 39.0625%;
margin: 0 0 24px; margin: 0 0 24px;
@ -1383,7 +1383,7 @@ label ~ span.required {
body { body {
background-color: #e6e6e6; background-color: #e6e6e6;
} }
body #page { body .site {
padding: 0 40px; padding: 0 40px;
padding: 0 2.857142857rem; padding: 0 2.857142857rem;
margin-top: 48px; margin-top: 48px;
@ -1395,8 +1395,8 @@ label ~ span.required {
body.custom-background-empty { body.custom-background-empty {
background-color: #fff; background-color: #fff;
} }
body.custom-background-empty #page, body.custom-background-empty .site,
body.custom-background-white #page { body.custom-background-white .site {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -1424,7 +1424,7 @@ label ~ span.required {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }
#page { .site {
clear: both !important; clear: both !important;
display: block !important; display: block !important;
float: none !important; float: none !important;
@ -1448,23 +1448,23 @@ label ~ span.required {
img.header-image { img.header-image {
display: none; display: none;
} }
nav.site-navigation { nav.main-navigation {
display: none; display: none;
} }
#main { .wrapper {
border-top: none; border-top: none;
box-shadow: none; box-shadow: none;
} }
#primary { .site-content {
float: left; float: left;
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
#content { .site-content {
margin: 0; margin: 0;
width: auto; width: auto;
} }
.singular #content { .singular .site-content {
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
@ -1474,13 +1474,13 @@ label ~ span.required {
.entry-meta .edit-link a { .entry-meta .edit-link a {
display: none; display: none;
} }
#content nav { .site-content nav {
display: none; display: none;
} }
.singular .entry-header, .singular .entry-header,
.singular .entry-content, .singular .entry-content,
.singular footer.entry-meta, .singular footer.entry-meta,
.singular #comments-title { .singular .comments-title {
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
@ -1508,7 +1508,7 @@ label ~ span.required {
#respond { #respond {
display: none; display: none;
} }
#secondary { .widget-area {
display: none; display: none;
} }
#colophon { #colophon {
@ -1527,8 +1527,8 @@ label ~ span.required {
top: 2.2em; top: 2.2em;
width: 39px; width: 39px;
} }
#comments article header cite, .comments-area article header cite,
#comments article header time { .comments-area article header time {
margin-left: 50px; margin-left: 50px;
margin-left: 3.57142857rem; margin-left: 3.57142857rem;
} }