golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
404.php
View File

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

4
archive.php
View File

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

4
author.php
View File

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

8
comments.php
View File

@ -21,12 +21,12 @@
if ( post_password_required() )
return;
?>
<div id="comments">
<div id="comments" class="comments-area">
<?php // You can start editing here -- including this comment! ?>
<?php if ( have_comments() ) : ?>
<h2 id="comments-title">
<h2 class="comments-title">
<?php
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>' );
@ -38,7 +38,7 @@
</ol><!-- .commentlist -->
<?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>
<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>
@ -53,4 +53,4 @@
<?php comment_form(); ?>
</div><!-- #comments -->
</div><!-- #comments .comments-area -->

4
footer.php
View File

@ -9,14 +9,14 @@
* @since Twenty Twelve 1.0
*/
?>
</div><!-- #main -->
</div><!-- #main .wrapper -->
<footer id="colophon" role="contentinfo">
<div class="site-info">
<?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>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
</div><!-- #page .site -->
<?php wp_footer(); ?>
</body>

4
full-width-page.php
View File

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

4
functions.php
View File

@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
* JavaScript for handling navigation menus and the resized
* 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.
@ -214,7 +214,7 @@ function twentytwelve_content_nav( $nav_id ) {
global $wp_query;
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>
<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>

6
header.php
View File

@ -23,14 +23,14 @@
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<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>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</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>
<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' ) ); ?>
@ -42,4 +42,4 @@
<?php endif; ?>
</header><!-- #masthead -->
<div id="main">
<div id="main" class="wrapper">

4
homepage.php
View File

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

8
image.php
View File

@ -9,12 +9,12 @@
get_header(); ?>
<div id="primary" class="image-attachment">
<div id="primary" class="site-content">
<div id="content" role="main">
<?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">
<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>' ); ?>
</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="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span>
</nav><!-- #image-navigation -->
@ -97,6 +97,6 @@ if ( count( $attachments ) > 1 ) {
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #primary .site-content -->
<?php get_footer(); ?>

4
index.php
View File

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

8
js/theme.js
View File

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

4
page.php
View File

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

20
rtl.css
View File

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

4
search.php
View File

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

8
single.php
View File

@ -9,18 +9,18 @@
get_header(); ?>
<div id="primary">
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?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>
<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>
</nav><!-- #nav-single -->
</nav><!-- .nav-single -->
<?php
// 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. ?>
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #primary .site-content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

128
style.css
View File

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