WordPress.org

Make WordPress Core

Changeset 21401


Ignore:
Timestamp:
08/02/12 17:50:52 (21 months 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.