Twenty Twelve: CSS and markup improvements for better child theme support, part 1.

Move all media queries to bottom of document.


git-svn-id: http://core.svn.wordpress.org/trunk@21401 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2012-08-02 17:50:52 +00:00
parent 606c472881
commit 4b2f431080
2 changed files with 132 additions and 147 deletions

View File

@ -156,12 +156,6 @@ label ~ span.required {
margin: 8px 0 8px 24px;
}
@media screen and (min-width: 600px) {
.page-template-homepage-php #secondary aside.widget_text img {
float: right;
margin: 8px 0 8px 24px;
}
}
/* =Widget styling
-------------------------------------------------------------- */
@ -186,4 +180,15 @@ label ~ span.required {
padding-left: 1.714285714rem;
text-align: left;
padding-right: 0;
}
/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.page-template-homepage-php #secondary aside.widget_text img {
float: right;
margin: 8px 0 8px 24px;
}
}

View File

@ -4,7 +4,7 @@ Theme URI: http://wordpress.org/extend/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a homepage template with a its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 0.6
Version: 0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, responsive-width, custom-background, custom-header, custom-menu, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
@ -19,8 +19,8 @@ Use it to make something cool, have fun, and share what you've learned with othe
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
$rembase: 14;
$line-height: 24;
$rembase: 14;
$line-height: 24;
---------- Examples
@ -200,7 +200,6 @@ li.bypostauthor cite span {
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle,
input#searchsubmit,
article.post-password-required input[type=submit] {
@ -381,19 +380,6 @@ img.wp-post-image {
padding-top: 1.714285714rem;
overflow: hidden;
}
@media screen and (min-width: 600px) {
#author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
}
@media screen and (min-width: 600px) {
#author-description {
float: right;
width: 80%;
}
}
#author-description p {
color: #777;
font-size: 13px;
@ -437,38 +423,6 @@ a:hover {
padding: 0 1.714285714rem;
background-color: #fff;
}
@media screen and (min-width: 600px) {
#page {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}
}
@media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
body #page {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty #page,
body.custom-background-white #page {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
#main {
overflow: hidden;
}
@ -476,30 +430,10 @@ a:hover {
margin: 24px 0 0;
margin: 1.714285714rem 0 0;
}
@media screen and (min-width: 600px) {
#primary {
float: left;
width: 65.104166667%;
}
}
@media screen and (min-width: 600px) {
body.page-template-full-width-page-php #primary,
body.page-template-homepage-php #primary,
body.single-attachment #primary,
body.full-width #primary {
width: 100%;
}
}
#secondary {
margin: 24px 0 0;
margin: 1.714285714rem 0 0;
}
@media screen and (min-width: 600px) {
#secondary {
float: right;
width: 26.041666667%;
}
}
/* Header */
.site-header {
@ -510,12 +444,6 @@ a:hover {
.site-header hgroup h2 {
text-align: center;
}
@media screen and (min-width: 600px) {
.site-header hgroup h1,
.site-header hgroup h2 {
text-align: left;
}
}
.site-header hgroup h1 a,
.site-header hgroup h2 a {
color: #515151;
@ -531,13 +459,6 @@ a:hover {
font-size: 1.714285714rem;
line-height: 2;
}
@media screen and (min-width: 600px) {
.site-header hgroup h1 {
font-size: 26px;
font-size: 1.857142857rem;
line-height: 1.846153846;
}
}
.site-header hgroup h2 {
font-weight: normal;
font-size: 13px;
@ -717,7 +638,7 @@ footer[role="contentinfo"] a:hover {
}
/* =Basic post styling
/* =Main content
-------------------------------------------------------------- */
.entry-meta {
@ -740,13 +661,6 @@ header.entry-header .entry-title {
header.entry-header .entry-title a {
text-decoration: none;
}
@media screen and (min-width: 600px) {
header.entry-header .entry-title {
font-size: 22px;
font-size: 1.571428571rem;
line-height: 1.090909091;
}
}
header.entry-header .entry-format {
margin-top: 24px;
margin-top: 1.714285714rem;
@ -995,7 +909,7 @@ footer .edit-link {
}
/* =Styling for the archive view
/* =Archives
-------------------------------------------------------------- */
.archive #content .archive-header,
@ -1016,7 +930,7 @@ footer .edit-link {
}
/* =Styling for the single image attachment view
/* =Single image attachment view
-------------------------------------------------------------- */
.image-attachment div.attachment {
@ -1035,7 +949,7 @@ footer .edit-link {
}
/* =Aside post styling
/* =Aside post format
-------------------------------------------------------------- */
article.format-aside h1 {
@ -1066,9 +980,10 @@ article.format-aside p {
}
/* =Image post styling
/* =Post formats
-------------------------------------------------------------- */
/* Image posts */
article.format-image footer h1 {
font-size: 13px;
font-size: 0.928571429rem;
@ -1081,10 +996,7 @@ article.format-image footer h2 {
line-height: 2.181818182;
}
/* =Link post styling
-------------------------------------------------------------- */
/* Link posts */
article.format-link header {
padding: 0 10px;
padding: 0 0.714285714rem;
@ -1110,10 +1022,7 @@ article.format-link .entry-content a {
text-decoration: none;
}
/* =Quote post styling
-------------------------------------------------------------- */
/* Quote posts */
article.format-quote .entry-content p {
margin: 0;
padding-bottom: 24px;
@ -1132,7 +1041,7 @@ article.format-quote .entry-content blockquote {
}
/* =Comment styling
/* =Comments
-------------------------------------------------------------- */
#comments-title {
@ -1289,14 +1198,6 @@ a.comment-reply-link:hover {
border-radius: 3px;
width: 96%;
}
@media screen and (min-width: 600px) {
#respond form input[type="text"] {
width: 46.333333333%;
}
#respond form textarea.blog-textarea {
width: 79.666666667%;
}
}
#respond form p.form-allowed-tags {
margin: 0;
font-size: 12px;
@ -1315,27 +1216,13 @@ label ~ span.required {
}
/* =Home page template styling
/* =Homepage template
-------------------------------------------------------------- */
.page-template-homepage-php #content article {
border: 0;
margin-bottom: 0;
}
@media screen and (min-width: 600px) {
.page-template-homepage-php #content,
.page-template-homepage-php article {
overflow: hidden;
}
.page-template-homepage-php.has-post-thumbnail article {
float: left;
width: 47.916666667%;
}
.entry-page-image {
float: right;
width: 47.916666667%;
}
}
.page-template-homepage-php #secondary {
clear: both;
float: none;
@ -1365,23 +1252,9 @@ label ~ span.required {
margin: 8px 24px 8px 0;
margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
}
@media screen and (min-width: 600px) {
.page-template-homepage-php #secondary aside {
float: left;
width: 51.875%;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.page-template-homepage-php #secondary aside:nth-child(even) {
float: right;
width: 39.0625%;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
}
/* =Widget styling
/* =Widgets
-------------------------------------------------------------- */
.widget ul ul {
@ -1425,6 +1298,113 @@ label ~ span.required {
}
/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
#author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
#author-description {
float: right;
width: 80%;
}
#page {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}
#primary {
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 {
width: 100%;
}
#secondary {
float: right;
width: 26.041666667%;
}
.site-header hgroup h1,
.site-header hgroup h2 {
text-align: left;
}
.site-header hgroup h1 {
font-size: 26px;
font-size: 1.857142857rem;
line-height: 1.846153846;
}
header.entry-header .entry-title {
font-size: 22px;
font-size: 1.571428571rem;
line-height: 1.090909091;
}
#respond form input[type="text"] {
width: 46.333333333%;
}
#respond form textarea.blog-textarea {
width: 79.666666667%;
}
.page-template-homepage-php #content,
.page-template-homepage-php article {
overflow: hidden;
}
.page-template-homepage-php.has-post-thumbnail article {
float: left;
width: 47.916666667%;
}
.entry-page-image {
float: right;
width: 47.916666667%;
}
.page-template-homepage-php #secondary aside {
float: left;
width: 51.875%;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.page-template-homepage-php #secondary aside:nth-child(even) {
float: right;
width: 39.0625%;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
}
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
body #page {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty #page,
body.custom-background-white #page {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
/* =Print
----------------------------------------------- */