WordPress.org
Get WordPress

Make WordPress Core

Changeset 21401


Ignore:
Timestamp:
08/02/2012 05:50:52 PM (14 years ago)
Author:
lancewillett
Message:

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

Move all media queries to bottom of document.

Location:
trunk/wp-content/themes/twentytwelve
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-content/themes/twentytwelve/rtl.css

    r21334 r21401  
    157157}
    158158
    159 @media screen and (min-width: 600px) {
    160         .page-template-homepage-php #secondary aside.widget_text img {
    161                 float: right;
    162                 margin: 8px 0 8px 24px;
    163         }
    164 }
    165159
    166160/* =Widget styling
    … …  
    188182        padding-right: 0;
    189183}
     184
     185/* =Media queries
     186-------------------------------------------------------------- */
     187
     188/* Minimum width of 600 pixels. */
     189@media screen and (min-width: 600px) {
     190        .page-template-homepage-php #secondary aside.widget_text img {
     191                float: right;
     192                margin: 8px 0 8px 24px;
     193        }
     194}

  • trunk/wp-content/themes/twentytwelve/style.css

    r21398 r21401  
    55Author URI: http://wordpress.org/
    66Description: 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.
    7 Version: 0.6
     7Version: 0.7
    88License: GNU General Public License v2 or later
    99License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    2020values (and line heights) are calculated using two variables:
    2121
    22 $rembase:      14;
    23 $line-height:  24;
     22$rembase:     14;
     23$line-height: 24;
    2424
    2525---------- Examples
    … …  
    201201        box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
    202202}
    203 
    204203.menu-toggle,
    205204input#searchsubmit,
    … …  
    382381        overflow: hidden;
    383382}
    384 @media screen and (min-width: 600px) {
    385         #author-avatar {
    386                 float: left;
    387                 margin-top: 8px;
    388                 margin-top: 0.571428571rem;
    389         }
    390 }
    391 @media screen and (min-width: 600px) {
    392         #author-description {
    393                 float: right;
    394                 width: 80%;
    395         }
    396 }
    397383#author-description p {
    398384        color: #777;
    … …  
    438424        background-color: #fff;
    439425}
    440 @media screen and (min-width: 600px) {
    441         #page {
    442                 margin: 0 auto;
    443                 max-width: 960px;
    444                 max-width: 68.571428571rem;
    445                 overflow: hidden;
    446         }
    447 }
    448 @media screen and (min-width: 960px) {
    449         body {
    450                 background-color: #e6e6e6;
    451         }
    452         body #page {
    453                 padding: 0 40px;
    454                 padding: 0 2.857142857rem;
    455                 margin-top: 48px;
    456                 margin-top: 3.428571429rem;
    457                 margin-bottom: 48px;
    458                 margin-bottom: 3.428571429rem;
    459                 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    460         }
    461         body.custom-background-empty {
    462                 background-color: #fff;
    463         }
    464         body.custom-background-empty #page,
    465         body.custom-background-white #page {
    466                 padding: 0;
    467                 margin-top: 0;
    468                 margin-bottom: 0;
    469                 box-shadow: none;
    470         }
    471 }
    472426#main {
    473427        overflow: hidden;
    … …  
    477431        margin: 1.714285714rem 0 0;
    478432}
    479 @media screen and (min-width: 600px) {
    480         #primary {
    481                 float: left;
    482                 width: 65.104166667%;
    483         }
    484 }
    485 @media screen and (min-width: 600px) {
    486         body.page-template-full-width-page-php #primary,
    487         body.page-template-homepage-php #primary,
    488         body.single-attachment #primary,
    489         body.full-width #primary {
    490                 width: 100%;
    491         }
    492 }
    493433#secondary {
    494434        margin: 24px 0 0;
    495435        margin: 1.714285714rem 0 0;
    496 }
    497 @media screen and (min-width: 600px) {
    498         #secondary {
    499                 float: right;
    500                 width: 26.041666667%;
    501         }
    502436}
    503437
    … …  
    510444.site-header hgroup h2 {
    511445        text-align: center;
    512 }
    513 @media screen and (min-width: 600px) {
    514         .site-header hgroup h1,
    515         .site-header hgroup h2 {
    516                 text-align: left;
    517         }
    518446}
    519447.site-header hgroup h1 a,
    … …  
    531459        font-size: 1.714285714rem;
    532460        line-height: 2;
    533 }
    534 @media screen and (min-width: 600px) {
    535         .site-header hgroup h1 {
    536                 font-size: 26px;
    537                 font-size: 1.857142857rem;
    538                 line-height: 1.846153846;
    539         }
    540461}
    541462.site-header hgroup h2 {
    … …  
    718639
    719640
    720 /* =Basic post styling
     641/* =Main content
    721642-------------------------------------------------------------- */
    722643
    … …  
    740661header.entry-header .entry-title a {
    741662        text-decoration: none;
    742 }
    743 @media screen and (min-width: 600px) {
    744         header.entry-header .entry-title {
    745                 font-size: 22px;
    746                 font-size: 1.571428571rem;
    747                 line-height: 1.090909091;
    748         }
    749663}
    750664header.entry-header .entry-format {
    … …  
    996910
    997911
    998 /* =Styling for the archive view
     912/* =Archives
    999913-------------------------------------------------------------- */
    1000914
    … …  
    1017931
    1018932
    1019 /* =Styling for the single image attachment view
     933/* =Single image attachment view
    1020934-------------------------------------------------------------- */
    1021935
    … …  
    1036950
    1037951
    1038 /* =Aside post styling
     952/* =Aside post format
    1039953-------------------------------------------------------------- */
    1040954
    … …  
    1067981
    1068982
    1069 /* =Image post styling
     983/* =Post formats
    1070984-------------------------------------------------------------- */
    1071985
     986/* Image posts */
    1072987article.format-image footer h1 {
    1073988        font-size: 13px;
    … …  
    1082997}
    1083998
    1084 
    1085 /* =Link post styling
    1086 -------------------------------------------------------------- */
    1087 
     999/* Link posts */
    10881000article.format-link header {
    10891001        padding: 0 10px;
    … …  
    11111023}
    11121024
    1113 
    1114 /* =Quote post styling
    1115 -------------------------------------------------------------- */
    1116 
     1025/* Quote posts */
    11171026article.format-quote .entry-content p {
    11181027        margin: 0;
    … …  
    11331042
    11341043
    1135 /* =Comment styling
     1044/* =Comments
    11361045-------------------------------------------------------------- */
    11371046
    … …  
    12901199        width: 96%;
    12911200}
    1292 @media screen and (min-width: 600px) {
    1293         #respond form input[type="text"] {
    1294                 width: 46.333333333%;
    1295         }
    1296         #respond form textarea.blog-textarea {
    1297                 width: 79.666666667%;
    1298         }
    1299 }
    13001201#respond form p.form-allowed-tags {
    13011202        margin: 0;
    … …  
    13161217
    13171218
    1318 /* =Home page template styling
     1219/* =Homepage template
    13191220-------------------------------------------------------------- */
    13201221
    … …  
    13221223        border: 0;
    13231224        margin-bottom: 0;
    1324 }
    1325 @media screen and (min-width: 600px) {
    1326         .page-template-homepage-php #content,
    1327         .page-template-homepage-php article {
    1328                 overflow: hidden;
    1329         }
    1330         .page-template-homepage-php.has-post-thumbnail article {
    1331                 float: left;
    1332                 width: 47.916666667%;
    1333         }
    1334         .entry-page-image {
    1335                 float: right;
    1336                 width: 47.916666667%;
    1337         }
    13381225}
    13391226.page-template-homepage-php #secondary {
    … …  
    13661253        margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
    13671254}
    1368 @media screen and (min-width: 600px) {
    1369         .page-template-homepage-php #secondary aside {
    1370                 float: left;
    1371                 width: 51.875%;
    1372                 margin-bottom: 24px;
    1373                 margin-bottom: 1.714285714rem;
    1374         }
    1375         .page-template-homepage-php #secondary aside:nth-child(even) {
    1376                 float: right;
    1377                 width: 39.0625%;
    1378                 margin: 0 0 24px;
    1379                 margin: 0 0 1.714285714rem;
    1380         }
    1381 }
    1382 
    1383 
    1384 /* =Widget styling
     1255
     1256
     1257/* =Widgets
    13851258-------------------------------------------------------------- */
    13861259
    … …  
    14261299
    14271300
     1301/* =Media queries
     1302-------------------------------------------------------------- */
     1303
     1304/* Minimum width of 600 pixels. */
     1305@media screen and (min-width: 600px) {
     1306        #author-avatar {
     1307                float: left;
     1308                margin-top: 8px;
     1309                margin-top: 0.571428571rem;
     1310        }
     1311        #author-description {
     1312                float: right;
     1313                width: 80%;
     1314        }
     1315        #page {
     1316                margin: 0 auto;
     1317                max-width: 960px;
     1318                max-width: 68.571428571rem;
     1319                overflow: hidden;
     1320        }
     1321        #primary {
     1322                float: left;
     1323                width: 65.104166667%;
     1324        }
     1325        body.page-template-full-width-page-php #primary,
     1326        body.page-template-homepage-php #primary,
     1327        body.single-attachment #primary,
     1328        body.full-width #primary {
     1329                width: 100%;
     1330        }
     1331        #secondary {
     1332                float: right;
     1333                width: 26.041666667%;
     1334        }
     1335        .site-header hgroup h1,
     1336        .site-header hgroup h2 {
     1337                text-align: left;
     1338        }
     1339        .site-header hgroup h1 {
     1340                font-size: 26px;
     1341                font-size: 1.857142857rem;
     1342                line-height: 1.846153846;
     1343        }
     1344        header.entry-header .entry-title {
     1345                font-size: 22px;
     1346                font-size: 1.571428571rem;
     1347                line-height: 1.090909091;
     1348        }
     1349        #respond form input[type="text"] {
     1350                width: 46.333333333%;
     1351        }
     1352        #respond form textarea.blog-textarea {
     1353                width: 79.666666667%;
     1354        }
     1355        .page-template-homepage-php #content,
     1356        .page-template-homepage-php article {
     1357                overflow: hidden;
     1358        }
     1359        .page-template-homepage-php.has-post-thumbnail article {
     1360                float: left;
     1361                width: 47.916666667%;
     1362        }
     1363        .entry-page-image {
     1364                float: right;
     1365                width: 47.916666667%;
     1366        }
     1367        .page-template-homepage-php #secondary aside {
     1368                float: left;
     1369                width: 51.875%;
     1370                margin-bottom: 24px;
     1371                margin-bottom: 1.714285714rem;
     1372        }
     1373        .page-template-homepage-php #secondary aside:nth-child(even) {
     1374                float: right;
     1375                width: 39.0625%;
     1376                margin: 0 0 24px;
     1377                margin: 0 0 1.714285714rem;
     1378        }
     1379}
     1380
     1381/* Minimum width of 960 pixels. */
     1382@media screen and (min-width: 960px) {
     1383        body {
     1384                background-color: #e6e6e6;
     1385        }
     1386        body #page {
     1387                padding: 0 40px;
     1388                padding: 0 2.857142857rem;
     1389                margin-top: 48px;
     1390                margin-top: 3.428571429rem;
     1391                margin-bottom: 48px;
     1392                margin-bottom: 3.428571429rem;
     1393                box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
     1394        }
     1395        body.custom-background-empty {
     1396                background-color: #fff;
     1397        }
     1398        body.custom-background-empty #page,
     1399        body.custom-background-white #page {
     1400                padding: 0;
     1401                margin-top: 0;
     1402                margin-bottom: 0;
     1403                box-shadow: none;
     1404        }
     1405}
     1406
     1407
    14281408/* =Print
    14291409----------------------------------------------- */
Note: See TracChangeset for help on using the changeset viewer.