WordPress.org
Get WordPress

Make WordPress Core

Changeset 25519


Ignore:
Timestamp:
09/20/2013 06:21:30 PM (12 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: first pass at improving responsive patterns and allowing for a full-width layout when no secondary sidebar is present. Props iamtakashi, see #25332.

Location:
trunk/src/wp-content/themes/twentyfourteen
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentyfourteen/comments.php

    r25216 r25519  
    4141                'style'      => 'ol',
    4242                'short_ping' => true,
    43                 'avatar_size'=> 42,
     43                'avatar_size'=> 34,
    4444            ) );
    4545        ?>

  • trunk/src/wp-content/themes/twentyfourteen/contributor-page.php

    r25510 r25519  
    1010
    1111    <div id="primary" class="content-area">
    12         <div id="content" class="site-content full-width" role="main">
     12        <div id="content" class="site-content" role="main">
    1313            <?php
    1414                while ( have_posts() ) :

  • trunk/src/wp-content/themes/twentyfourteen/featured-content.php

    r25023 r25519  
    1010?>
    1111
    12 <div class="featured-content-wrapper">
    13     <div id="featured-content" class="featured-content">
     12<div id="featured-content" class="featured-content">
    1413
    15         <?php
    16             do_action( 'twentyfourteen_featured_posts_before' );
     14    <?php
     15        do_action( 'twentyfourteen_featured_posts_before' );
    1716
    18             $featured_posts = twentyfourteen_get_featured_posts();
    19             foreach ( (array) $featured_posts as $order => $post ) :
    20                 setup_postdata( $post );
     17        $featured_posts = twentyfourteen_get_featured_posts();
     18        foreach ( (array) $featured_posts as $order => $post ) :
     19            setup_postdata( $post );
    2120
    22                 get_template_part( 'content', 'featured-post' );
    23             endforeach;
     21            get_template_part( 'content', 'featured-post' );
     22        endforeach;
    2423
    25             do_action( 'twentyfourteen_featured_posts_after' );
     24        do_action( 'twentyfourteen_featured_posts_after' );
    2625
    27             wp_reset_postdata();
    28         ?>
     26        wp_reset_postdata();
     27    ?>
    2928
    30     </div><!-- .featured-content -->
    31 </div><!-- .featured-content-wrapper -->
     29</div><!-- #featured-content .featured-content -->

  • trunk/src/wp-content/themes/twentyfourteen/front-page.php

    r25213 r25519  
    99get_header(); ?>
    1010
    11     <div class="front-page-content-wrapper">
    12         <div class="front-page-content-main">
     11<div class="front-page-content-wrapper">
    1312
    14             <?php if ( twentyfourteen_has_featured_posts() ) : ?>
    15                 <?php get_template_part( 'featured-content' ); ?>
    16             <?php endif; ?>
     13    <?php
     14        if ( twentyfourteen_has_featured_posts() )
     15            get_template_part( 'featured-content' );
     16    ?>
    1717
    18             <div class="front-page-content-area">
     18        <div id="primary" class="content-area no-sidebar">
     19            <div id="content" class="site-content" role="main">
     20            <?php
     21                if ( have_posts() ) :
     22                    while ( have_posts() ) :
     23                        the_post();
    1924
    20                 <div id="primary" class="content-area no-sidebar">
    21                     <div id="content" class="site-content" role="main">
    22                     <?php
    23                         if ( have_posts() ) :
    24                             while ( have_posts() ) :
    25                                 the_post();
     25                        get_template_part( 'content', get_post_format() );
    2626
    27                                 get_template_part( 'content', get_post_format() );
     27                        comments_template();
     28                    endwhile;
     29                    twentyfourteen_paging_nav();
    2830
    29                                 comments_template();
    30                             endwhile;
    31                             twentyfourteen_paging_nav();
     31                else :
     32                    get_template_part( 'content', 'none' );
    3233
    33                         else :
    34                             get_template_part( 'content', 'none' );
     34                endif;
     35            ?>
     36            </div><!-- #content .site-content -->
     37        </div><!-- #primary .content-area -->
    3538
    36                         endif;
    37                     ?>
    38                     </div><!-- #content .site-content -->
    39                 </div><!-- #primary .content-area -->
     39        <?php get_sidebar( 'ephemera' ); ?>
    4040
    41                 <?php get_sidebar( 'ephemera' ); ?>
    42 
    43             </div><!-- .front-page-content-area -->
    44 
    45         </div><!-- .front-page-content-main -->
    46     </div><!-- .front-page-content-wrapper -->
     41</div><!-- .front-page-content-wrapper -->
    4742
    4843<?php

  • trunk/src/wp-content/themes/twentyfourteen/full-width-page.php

    r25021 r25519  
    1010
    1111    <div id="primary" class="content-area">
    12         <div id="content" class="site-content full-width" role="main">
     12        <div id="content" class="site-content" role="main">
    1313            <?php
    1414                while ( have_posts() ) :

  • trunk/src/wp-content/themes/twentyfourteen/functions.php

    r25510 r25519  
    100100
    101101/**
    102  * Adjusts content_width value for full width and attachment templates.
     102 * Adjusts content_width value for full-width and attachment templates.
    103103 *
    104104 * @return void
    … …  
    106106function twentyfourteen_content_width() {
    107107    if ( is_page_template( 'full-width-page.php' ) || is_attachment() )
    108         $GLOBALS['content_width'] = 895;
     108        $GLOBALS['content_width'] = 810;
    109109}
    110110add_action( 'template_redirect', 'twentyfourteen_content_width' );
    … …  
    362362    ?>
    363363
    364     <div class="contributor clear">
    365         <div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>
    366         <div class="contributor-summary">
    367             <h2 class="contributor-name"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2>
    368             <p class="contributor-bio">
    369                 <?php echo get_the_author_meta( 'description', $contributor_id ); ?>
    370             </p>
    371             <a class="contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>">
    372                 <?php printf( _n( '%d Article', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>
    373             </a>
    374         </div>
     364    <div class="contributor">
     365        <div class="contributor-info clear">
     366            <div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>
     367            <div class="contributor-summary">
     368                <h2 class="contributor-name"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2>
     369                <p class="contributor-bio">
     370                    <?php echo get_the_author_meta( 'description', $contributor_id ); ?>
     371                </p>
     372                <a class="contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>">
     373                    <?php printf( _n( '%d Article', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>
     374                </a>
     375            </div><!-- .contributor-summary -->
     376        </div><!-- .contributor-info -->
    375377    </div><!-- .contributor -->
    376378
    … …  
    457459 * 1. Single or multiple authors.
    458460 * 2. Index views.
     461 * 3. Full-width content layout.
    459462 *
    460463 * @param array $classes A list of existing body class values.
    … …  
    462465 */
    463466function twentyfourteen_body_classes( $classes ) {
    464     // Adds a class of group-blog to blogs with more than 1 published author
    465     if ( is_multi_author() ) {
     467    if ( is_multi_author() )
    466468        $classes[] = 'group-blog';
    467     }
    468     if ( is_archive() || is_search() || is_home() ) {
     469
     470    if ( is_archive() || is_search() || is_home() )
    469471        $classes[] = 'list-view';
    470     }
     472
     473    if ( is_page_template( 'full-width-page.php' ) || is_page_template( 'contributor-page.php' ) || is_attachment() )
     474        $classes[] = 'full-width';
    471475
    472476    return $classes;

  • trunk/src/wp-content/themes/twentyfourteen/image.php

    r25023 r25519  
    77 */
    88
     9$metadata = wp_get_attachment_metadata();
     10
    911get_header();
    1012?>
    1113
    1214<section id="primary" class="content-area image-attachment">
    13     <div id="content" class="site-content full-width" role="main">
     15    <div id="content" class="site-content" role="main">
    1416
    1517    <?php while ( have_posts() ) : the_post(); ?>
    … …  
    2022
    2123                <div class="entry-meta">
    22                     <?php $metadata = wp_get_attachment_metadata(); ?>
    2324
    2425                    <span class="entry-date"><time class="entry-date" datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time></span>
    … …  
    7172
    7273        <nav id="image-navigation" class="navigation image-navigation">
     74            <div class="nav-links">
    7375            <?php previous_image_link( false, __( '<div class="previous-image">Previous Image</div>', 'twentyfourteen' ) ); ?>
    7476            <?php next_image_link( false, __( '<div class="next-image">Next Image</div>', 'twentyfourteen' ) ); ?>
     77            </div><!-- .nav-links -->
    7578        </nav><!-- #image-navigation -->
    7679

  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r25510 r25519  
    118118    clear: both;
    119119    font-weight: 700;
    120     margin-bottom: 12px;
    121     margin-bottom: 1.2rem;
     120    margin: 36px 0 12px;
     121    margin: 3.6rem 0 1.2rem;
    122122}
    123123h1 {
    124     font-size: 33px;
    125     font-size: 3.3rem;
    126     line-height: 1.0909090909;
    127 }
    128 h2 {
    129     font-size: 30px;
    130     font-size: 3.0rem;
    131     line-height: 1.2;
    132 }
    133 h3 {
    134124    font-size: 26px;
    135125    font-size: 2.6rem;
    136126    line-height: 1.3846153846;
    137127}
    138 h4 {
     128h2 {
     129    font-size: 24px;
     130    font-size: 2.4rem;
     131    line-height: 1;
     132}
     133h3 {
    139134    font-size: 22px;
    140135    font-size: 2.2rem;
    141136    line-height: 1.0909090909;
     137}
     138h4 {
     139    font-size: 20px;
     140    font-size: 2.0rem;
     141    line-height: 1.2;
    142142}
    143143h5 {
    … …  
    522522.site {
    523523    background-color: #fff;
    524     max-width: 1230px;
    525     max-width: 123.0rem;
     524    max-width: 1260px;
    526525    position: relative;
    527526}
    528 .site-main {
    529     max-width: 1230px;
    530     max-width: 123.0rem;
    531 }
    532527.content-area {
    533     padding-top:24px;
    534     padding-top:2.4rem;
     528    padding-top: 24px;
    535529}
    536530#secondary {
    … …  
    578572.site-header {
    579573    background-color: #000;
    580     max-width: 1230px;
    581     max-width: 123.0rem;
     574    max-width: 1260px;
    582575    position: relative;
    583576    width: 100%;
    … …  
    665658    background-color: #35921f;
    666659}
    667 .search-toggle {
    668     display: none;
    669 }
    670660.search-toggle:hover {
    671661    cursor: pointer;
    … …  
    795785    font-size: 14px;
    796786    font-size: 1.4rem;
    797     margin-bottom: 48px;
    798     margin-bottom: 4.8rem;
     787    margin: 0 auto 48px;
     788    max-width: 474px;
    799789}
    800790.secondary-navigation a {
    … …  
    830820/* Mobile Navigations */
    831821#mobile-navigations {
    832     margin-top: 1px;
    833     margin-top: 0.1rem;
     822    margin: 1px auto 0;
     823    max-width: 474px;
    834824}
    835825.mobile-navigation {
    … …  
    896886    z-index: 0;
    897887}
     888.full-width .attachment-featured-thumbnail img {
     889    display: block;
     890    margin: 0 auto;
     891}
    898892.entry-header {
    899893    position: relative;
    … …  
    10171011
    10181012/* .content-area specific styles */
     1013.content-area .entry-header,
     1014.content-area .entry-content,
     1015.content-area .page-content,
     1016.content-area .entry-summary,
     1017.content-area .entry-meta {
     1018    margin: 0 auto;
     1019    max-width: 474px;
     1020}
    10191021.content-area .entry-header {
    10201022    background-color: #fff;
    … …  
    10501052    padding: 0 1.0rem;
    10511053}
    1052 .content-area footer.entry-meta .entry-meta {
    1053     margin-bottom: 24px;
    1054     margin-bottom: 2.4rem;
     1054.content-area footer.entry-meta {
     1055    margin-bottom: 36px;
     1056    margin-bottom: 3.6rem;
    10551057}
    10561058.content-area footer.entry-meta .entry-title {
    … …  
    10811083.format-quote .entry-summary,
    10821084.format-link .entry-content,
    1083 .format-link.entry-summary  {
     1085.format-link.entry-summary {
    10841086    padding-top: 0;
    10851087}
    … …  
    11021104
    11031105/* Page specific styles */
    1104 .page .entry-header,
    11051106.page .entry-content,
    11061107.error404 .page-header,
    … …  
    12371238.archive-header,
    12381239.page-header {
    1239     margin: 0 0 24px;
    1240     margin: 0 0 2.4rem;
    1241     padding: 0 10px;
    1242     padding: 0 1.0rem;
     1240    margin: 0 auto 12px;
     1241    max-width: 474px;
    12431242}
    12441243.archive-title,
    … …  
    12741273    width: 100%;
    12751274}
    1276 .front-page-content-area {
    1277     max-width: 1230px;
    1278     max-width: 123.0rem;
     1275
     1276
     1277/* =404 Page
     1278----------------------------------------------- */
     1279
     1280.error404 .page-content .search-form {
     1281    margin-bottom: 36px;
     1282    margin-bottom: 3.6rem;
     1283}
     1284.error404 .page-content .widget-title {
     1285    border-top: 5px solid #000;
     1286    color: #2b2b2b;
     1287    padding-top: 7px;
     1288    padding-top: 0.7rem;
     1289}
     1290
     1291
     1292/* =Full-width Layout
     1293----------------------------------------------- */
     1294
     1295.full-width .hentry {
     1296    max-width: 100%;
    12791297}
    12801298
    … …  
    13691387    box-sizing:         border-box;
    13701388    clear: both;
     1389    margin: 0 auto;
     1390    max-width: 494px;
    13711391    padding: 23px 10px 0;
    13721392    padding: 2.3rem 1.0rem 0;
    … …  
    14871507    margin-bottom: 36px;
    14881508    margin-bottom: 3.6rem;
    1489 }
    1490 
    1491 
    1492 /* =404 Page
    1493 ----------------------------------------------- */
    1494 
    1495 .error404 .page-content .search-form {
    1496     margin-bottom: 36px;
    1497     margin-bottom: 3.6rem;
    1498 }
    1499 .error404 .page-content .widget-title {
    1500     border-top: 5px solid #000;
    1501     color: #2b2b2b;
    1502     padding-top: 7px;
    1503     padding-top: 0.7rem;
    15041509}
    15051510
    … …  
    17281733.post-navigation,
    17291734.image-navigation {
    1730     border-top: 1px solid rgba(0, 0, 0, 0.1);
    1731     margin: 24px 0 0;
    1732     margin: 2.4rem 0 0;
    1733 }
    1734 
     1735    margin: 24px auto;
     1736    max-width: 474px;
     1737    padding: 0 10px;
     1738}
     1739.nav-links {
     1740    border-top: 1px solid rgba(0, 0, 0, 0.1);
     1741 }
    17351742.post-navigation [rel="prev"],
    17361743.post-navigation [rel="next"],
    … …  
    17421749    box-sizing:         border-box;
    17431750    float: none;
    1744     padding: 11px 10px;
    1745     padding: 1.1rem 1.0rem;
     1751    padding: 11px 0;
    17461752    text-align: left;
    17471753    width: 100%;
    … …  
    17811787    margin-bottom: 48px;
    17821788    margin-bottom: 4.8rem;
    1783     padding-left: 10px;
    1784     padding-left: 1.0rem;
    17851789    text-transform: uppercase;
    17861790}
    … …  
    18031807
    18041808.comments-area {
    1805     margin-top: 36px;
    1806     margin-top: 3.6rem;
     1809    margin: 36px auto;
     1810    margin: 3.6rem auto;
     1811    max-width: 474px;
     1812    max-width: 47.4rem;
     1813    padding: 0 10px;
     1814    padding: 0 1.0rem;
    18071815}
    18081816.comments-title,
    … …  
    18131821    line-height: 1.5;
    18141822    margin-bottom: 0;
    1815     padding: 0 10px;
    1816     padding: 0 1.0rem;
    18171823    text-transform: uppercase;
    18181824}
    18191825.comment-form {
    18201826    background: #fff;
    1821     padding: 0 10px;
    1822     padding: 0 1.0rem;
    18231827}
    18241828.comment-list {
    … …  
    18651869    margin-bottom: 24px;
    18661870    margin-bottom: 2.4rem;
    1867     padding: 24px 10px 0;
    1868     padding: 2.4rem 1.0rem 0;
     1871    padding-top: 24px;
    18691872}
    18701873.comment-list li:first-child article {
    … …  
    19461949.comment-list .children {
    19471950    list-style: none;
    1948     margin-left: 20px;
    1949     margin-left: 2.0rem;
     1951    margin-left: 18px;
    19501952}
    19511953.comments-area .children article {
    … …  
    19781980    text-transform: uppercase;
    19791981}
    1980 .comment-form {
    1981     padding: 0 10px;
    1982     padding: 0 1.0rem;
    1983 }
    19841982.comment-form label {
    19851983    display: block;
    … …  
    19941992    margin-bottom: 0;
    19951993}
     1994
    19961995
    19971996/* =Primary Sidebar
    … …  
    20362035}
    20372036.widget {
    2038     margin: 0 0 48px;
    2039     margin: 0 0 4.8rem;
     2037    margin: 0 auto 48px;
     2038    max-width: 474px;
    20402039    overflow: hidden;
    20412040}
    … …  
    23292328    -moz-box-sizing: border-box;
    23302329    box-sizing:      border-box;
    2331     padding: 48px 0;
    2332     padding: 4.8rem 0;
     2330    padding: 48px 10px;
     2331}
     2332.contributor-info {
     2333    margin: 0 auto;
     2334    max-width: 474px;
    23332335}
    23342336.contributor-avatar {
    … …  
    23372339    padding: 0.2rem;
    23382340    border: 1px solid rgba(0, 0, 0, 0.1);
    2339     margin-right: 30px;
    2340     margin-right: 3.0rem;
     2341    margin: 0 30px 20px 0;
    23412342}
    23422343.contributor-avatar .avatar {
    23432344    vertical-align: middle;
    2344 }
    2345 .contributor-summary {
    2346     float: left;
    2347     max-width: 474px;
    2348     max-width: 47.4rem;
    2349     width: -webkit-calc(100% - 164px);
    2350     width:         calc(100% - 164px);
    23512345}
    23522346.contributor-name {
    … …  
    23552349    font-weight: 900;
    23562350    line-height: 1.5;
    2357     margin-bottom: 0;
     2351    margin: 0;
    23582352    text-transform: uppercase;
    23592353}
    … …  
    23662360.contributor-posts-link:before {
    23672361    content: '\f443';
    2368     vertical-align: text-bottom;
     2362    margin: -3px 5px -2px -3px;
    23692363}
    23702364
    … …  
    24382432        display: block;
    24392433    }
    2440 }
    2441 
    2442 /* Enable Genricons */
    2443 @media screen and (min-width: 400px) {
     2434    .archive-header,
     2435    .page-header {
     2436        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     2437        padding-top: 12px;
     2438        padding-top: 1.2rem;
     2439    }
     2440    .error404 .page-header {
     2441        border-bottom: 0;
     2442        padding: 0 10px;
     2443        padding: 0 1.0rem;
     2444    }
     2445}
     2446
     2447@media screen and (min-width: 401px) {
    24442448    .attachment-featured-thumbnail:hover img {
    24452449        opacity: 0.8;
    … …  
    24532457        content: '';
    24542458    }
    2455 
    24562459    .content-area .featured-post:before,
    24572460    .content-area .post-format a:before,
    24582461    .content-area .post-format + .entry-date a:before,
    2459     .content-area .entry-date a:before,
     2462    .attachment span.entry-date:before,
    24602463    .content-area .byline a:before,
    24612464    .content-area .comments-link a:before,
    … …  
    25072510    .content-area .post-format + .entry-date a:before,
    25082511    .content-area .entry-date a:before,
    2509     .attachment .entry-date:before {
     2512    .attachment span.entry-date:before {
    25102513        content: '\F303';
    25112514        margin: 0 1px 0 0;
    … …  
    25332536        content: '\F301';
    25342537    }
    2535     .page .entry-meta .edit-link a:before {
    2536         margin: 5px 2px 0 0;
    2537         margin: 0.5rem 0.2rem 0 0;
    2538     }
    2539 }
    2540 
    2541 /* Post formatted posts and post list start to appear on the right */
    2542 @media screen and (min-width: 672px) {
    2543     .search-toggle {
    2544         display: block;
    2545     }
     2538    .archive-header,
     2539    .page-header {
     2540        margin-bottom: 24px;
     2541        padding: 0 10px;
     2542    }
     2543    .search-results .content-area .type-page {
     2544        border-top: 1px solid rgba(0, 0, 0, 0.1);
     2545    }
     2546    .search-results .content-area .type-page .entry-header {
     2547        margin-top: 24px;
     2548    }
     2549}
     2550
     2551@media screen and (min-width: 642px) {
     2552    .content-area .entry-header {
     2553        margin-top: -48px;
     2554        padding-right: 30px;
     2555        padding-left: 30px;
     2556    }
     2557    .attachment .content-area .entry-header {
     2558        margin-top: 0;
     2559    }
     2560}
     2561
     2562@media screen and (min-width: 673px) {
    25462563    .content-area {
    25472564        float: left;
    2548         padding: 36px 0;
    2549         padding: 3.6rem 0;
     2565        padding-top: 36px;
    25502566        width: 100%;
    25512567    }
    25522568    .site-content {
    2553         margin: 0 33.33333333% 0 0;
    2554     }
    2555     .content-sidebar {
     2569        margin-right: 33.33333333%;
     2570    }
     2571    .content-area .entry-header {
     2572        margin-top: 0;
     2573    }
     2574    .content-area .entry-content,
     2575    .content-area .entry-summary,
     2576    .content-area footer.entry-meta,
     2577    .archive-header,
     2578    .page-header,
     2579    .page-content,
     2580    .post-navigation,
     2581    .image-navigation,
     2582    .comments-area {
     2583        padding-right: 30px;
     2584        padding-right: 3.0rem;
     2585        padding-left: 30px;
     2586        padding-left: 3.0rem;
     2587    }
     2588    .content-sidebar,
     2589    .ephemera {
    25562590        float: right;
    2557         margin: 0 0 0 -30.35714285%;
    2558         padding: 36px 10px 24px 0;
    2559         padding: 3.6rem 1.0rem 2.4rem 0;
    2560         width: 30.35714285%;
     2591        margin-left: -33.33333333%;
     2592        padding: 36px 30px 24px;
     2593        width: 33.33333333%;
    25612594    }
    25622595    .ephemera {
    25632596        border: none;
    25642597        clear: none;
    2565         float: right;
    2566         margin: 0 0 0 -30.35714285%;
    2567         padding: 36px 10px 0 0;
    2568         padding: 3.6rem 1.0rem 0 0;
    2569         width: 30.35714285%;
     2598    }
     2599    #secondary {
     2600        padding: 48px 30px 0;
    25702601    }
    25712602    #featured-content .hentry {
    … …  
    25802611        height: 9.6rem;
    25812612    }
    2582     .full-width.site-content {
    2583         margin: 0;
    2584     }
    2585     .full-width.site-content .hentry {
    2586         max-width: 100%;
    2587     }
    2588 }
    2589 
    2590 @media screen and (min-width: 740px) {
     2613    .full-width .site-content {
     2614        margin-right: 0;
     2615    }
     2616}
     2617
     2618@media screen and (min-width: 770px) {
     2619    .header-main {
     2620        margin-right: 0;
     2621    }
     2622    .primary-navigation {
     2623        display: block;
     2624    }
     2625}
     2626
     2627@media screen and (min-width: 810px) {
     2628    .full-width .entry-content img.size-medium.alignleft,
     2629    .full-width .entry-content img.size-large.alignleft,
     2630    .full-width .entry-content img.size-full.alignleft,
     2631    .full-width .entry-content .wp-caption.alignleft,
     2632    .full-width .entry-content blockquote.alignleft {
     2633        margin-left: -168px;
     2634    }
     2635    .full-width .entry-content img.size-medium.alignright,
     2636    .full-width .entry-content img.size-large.alignright,
     2637    .full-width .entry-content img.size-full.alignright,
     2638    .full-width .entry-content .wp-caption.alignright,
     2639    .full-width .entry-content blockquote.alignright {
     2640        margin-right: -168px;
     2641    }
     2642    .full-width .entry-content img.size-full.alignnone,
     2643    .single-attachment .entry-content .attachment {
     2644        margin-right: -168px;
     2645        margin-left: -168px;
     2646        max-width: 810px;
     2647    }
     2648    .single-attachment .entry-content .attachment {
     2649        text-align: center;
     2650    }
     2651    .full-width .entry-content blockquote.alignleft,
     2652    .full-width .entry-content blockquote.alignright {
     2653        width: -webkit-calc(50% + 130px);
     2654        width:         calc(50% + 130px);
     2655    }
     2656    .contributor-avatar {
     2657        margin-left: -168px;
     2658    }
     2659    .contributor-summary {
     2660        float: left
     2661    }
     2662}
     2663
     2664@media screen and (min-width: 870px) {
     2665    .content-area {
     2666        padding-top: 72px;
     2667    }
     2668    .home .content-area {
     2669        padding-top: 36px;
     2670    }
    25912671    .content-area .entry-header {
    2592         margin: -48px 4.59183673% 0;
    2593         margin: -4.8rem 4.59183673% 0;
    2594         padding: 24px 4.46428571% 12px;
    2595         padding: 2.4rem 4.46428571% 1.2rem;
    2596     }
    2597     .content-area .entry-content,
    2598     .content-area .entry-summary {
    2599         margin: 0 4.59183673%;
    2600         padding: 12px 4.46428571% 0;
    2601         padding: 1.2rem 4.46428571% 0;
    2602     }
    2603     .content-area footer.entry-meta {
    2604         margin: 12px 4.59183673% 24px;
    2605         margin: 1.2rem 4.59183673% 2.4rem;
    2606         padding: 0 4.46428571%;
    2607     }
    2608     .archive-header,
    2609     .page-header {
    2610         margin: 0 4.59183673% 24px;
    2611         margin: 0 4.59183673% 2.4rem;
    2612         padding: 0 4.46428571%;
    2613     }
    2614     .page .content-area .entry-header,
    2615     .error404 .content-area .page-header {
    2616         margin: 0 4.59183673%;
    2617         padding: 0 4.46428571% 12px;
    2618         padding: 0 4.46428571% 1.2rem;
    2619     }
    2620     .content-area .full-width .entry-header {
    2621         margin: 0 6.04307432%;
    2622         padding: 0 0 12px;
    2623         padding: 0 0 1.2rem;
    2624     }
    2625     .content-area .full-width .entry-content {
    2626         margin: 0 6.04307432%;
    2627         padding: 0;
    2628     }
    2629     .content-area .full-width footer.entry-meta {
    2630         margin: 0 6.04307432%;
    2631         padding: 0;
     2672        margin-top: -48px;
    26322673    }
    26332674    .content-area .format-aside .entry-header,
    … …  
    26552696    }
    26562697    .comment-author .avatar {
    2657         width: 42px;
    2658         width: 4.2rem;
    2659         height: 42px;
    2660         height: 4.2rem;
     2698        top: 2px;
     2699        width: 34px;
     2700        height: 34px;
    26612701    }
    26622702    .comment-author,
    … …  
    26642704    .comment-content,
    26652705    .comment-list .reply {
    2666         padding-left: 60px;
    2667         padding-left: 6.0rem;
    2668     }
    2669     .comments-title,
    2670     .no-comments,
    2671     .comment-respond,
    2672     .comments-area article,
    2673     .comment-list .trackback,
    2674     .comment-list .pingback,
    2675     .post-navigation [rel="prev"],
    2676     .post-navigation [rel="next"] {
    2677         padding-right: 9.12778904%;
    2678         padding-left: 9.12778904%;
    2679     }
    2680     .comment-reply-title,
    2681     .comment-form {
    2682         padding: 0;
    2683     }
    2684     .comment-navigation {
    2685         padding-left: 9.12778904%;
     2706        padding-left: 54px;
     2707    }
     2708    .comment-list .children {
     2709        margin-left: 37px;
    26862710    }
    26872711    .comment .comment-respond {
    … …  
    26892713        margin-left: 6.0rem;
    26902714    }
    2691     .image-navigation .previous-image,
    2692     .image-navigation .next-image,
    2693     .full-width .comment-navigation,
    2694     .full-width .comments-title,
    2695     .full-width .comment-respond,
    2696     .full-width .comments-area article,
    2697     .full-width .comment-list .trackback,
    2698     .full-width .comment-list .pingback {
    2699         padding-right: 6.04307432%;
    2700         padding-left: 6.04307432%;
    2701     }
    2702     .full-width .comment-reply-title,
    2703     .full-width .comment-form {
    2704         padding: 0;
    2705     }
    2706     .content-area .no-results .entry-header {
    2707         margin: 0 4.59183673%;
    2708         padding: 0 4.46428571%;
    2709     }
    2710 }
    2711 
    2712 @media screen and (min-width: 770px) {
    2713     .header-main {
    2714         margin-right: 0;
    2715     }
    2716     .primary-navigation {
    2717         display: block;
    2718     }
    2719 }
    2720 
    2721 @media screen and (min-width: 870px) {
    2722     .content-area {
    2723         padding-top: 72px;
    2724         padding-top: 7.2rem;
    2725     }
    2726     .home .content-area {
    2727         padding-top: 36px;
    2728         padding-top: 3.6rem;
    2729     }
    2730     .content-area .entry-header {
    2731         margin-right: 8.03571428%;
    2732         margin-left: 12.5%;
    2733     }
    2734     .content-area .entry-content,
    2735     .content-area .entry-summary {
    2736         margin-right: 8.03571428%;
    2737         margin-left: 12.5%;
    2738     }
    2739     .content-area footer.entry-meta {
    2740         margin: 12px 8.03571428% 24px 12.5%;
    2741         margin: 1.2rem 8.03571428% 2.4rem 12.5%;
    2742     }
    2743     .page .content-area .entry-header,
    2744     .error404 .content-area .page-header {
    2745         margin: 0 8.03571428% 0 12.5%;
    2746     }
    2747     .contributor,
    2748     .content-area .full-width .entry-header,
    2749     .content-area .full-width .entry-content,
    2750     .content-area .full-width footer.entry-meta {
    2751         margin: 0 11.30926724%;
    2752     }
    2753     .archive-header,
    2754     .page-header {
    2755         margin: 0 8.03571428% 24px 12.5%;
    2756         margin: 0 8.03571428% 2.4rem 12.5%;
    2757     }
    27582715    .content-sidebar {
    27592716        padding-top: 72px;
    … …  
    27692726        clear: both;
    27702727    }
    2771     .comments-title,
    2772     .no-comments,
    2773     .comment-respond,
    2774     .post-navigation [rel="prev"],
    2775     .post-navigation [rel="next"] {
    2776         padding-right: 12.39493534%;
    2777         padding-left: 17.06896551%;
    2778     }
    2779     .comments-area article,
    2780     .comment-list .trackback,
    2781     .comment-list .pingback {
    2782         padding-right: 11.25%;
    2783         padding-left: 15.46875%;
    2784     }
    2785     .comment-respond {
    2786         padding-right: 13.8900862%;
    2787     }
    2788     .comment .comment-respond {
    2789         margin-left: 50px;
    2790         margin-left: 5.0rem;
    2791     }
    2792     .comment-list,
    2793     .full-width .comment-list {
    2794         margin-left: -60px;
    2795         margin-left: -6.0rem;
    2796     }
    2797     .comment-navigation {
    2798         padding-left: 17.06896551%;
    2799     }
    2800     .image-navigation .previous-image,
    2801     .image-navigation .next-image,
    2802     .full-width .comment-navigation,
    2803     .full-width .comments-title,
    2804     .full-width .comment-respond,
    2805     .full-width .comments-area article,
    2806     .full-width .comment-list .trackback,
    2807     .full-width .comment-list .pingback {
    2808         padding-right: 11.30926724%;
    2809         padding-left: 11.30926724%;
    2810     }
    2811     .site-content blockquote.alignleft {
    2812         margin-left: -20%;
    2813     }
    2814     .site-content blockquote.alignright {
    2815         margin-right: -20%;
    2816     }
    2817     .content-area .no-results .entry-header {
    2818         margin-right: 8.03571428%;
    2819         margin-left: 12.5%;
    2820     }
    2821     .content-area .no-results .entry-content {
    2822         margin-right: 8.03571428%;
    2823         margin-left: 12.5%;
    2824     }
    2825 }
    2826 
    2827 /* Secondary starts appear on the left */
     2728}
     2729
    28282730@media screen and (min-width: 1008px) {
     2731    .header-main {
     2732        padding-left: 27px;
     2733    }
     2734    .search-box-wrapper {
     2735        padding-left: 182px;
     2736    }
     2737    .site-content {
     2738        margin: 0 29.04761904% 0 182px;
     2739    }
     2740    .content-sidebar,
     2741    .ephemera {
     2742        margin-left: -29.04761904%;
     2743        width: 29.04761904%;
     2744    }
     2745    .content-area .entry-header {
     2746        margin-top: 0;
     2747    }
     2748    .content-area .entry-header
     2749    .content-area .entry-content,
     2750    .content-area .entry-summary,
     2751    .content-area footer.entry-meta,
     2752    .archive-header,
     2753    .page-header,
     2754    .page-content,
     2755    .post-navigation,
     2756    .image-navigation,
     2757    .comments-area {
     2758        padding-right: 0;
     2759        padding-left: 0;
     2760    }
     2761    .site-footer {
     2762        padding-left: 27px;
     2763    }
    28292764    .site:before {
    28302765        background-color: #000;
    … …  
    28362771            top: 0;
    28372772            left: 0;
    2838         width: 222px;
    2839         width: 22.2rem;
     2773        width: 182px;
    28402774        z-index: 2;
    2841     }
    2842     .header-main {
    2843         padding-left: 27px;
    2844         padding-left: 2.7rem;
    2845     }
    2846     .search-box-wrapper {
    2847         padding-left: 222px;
    2848         padding-left: 22.2rem;
    2849     }
    2850     .site-content {
    2851         margin: 0 27.31707317% 0 222px;
    2852         margin: 0 27.31707317% 0 22.2rem;
    28532775    }
    28542776    #secondary {
    … …  
    28562778        border-bottom: 0;
    28572779        clear: none;
    2858         font-size: 1.1rem;
     2780        font-size: 11px;
    28592781        float: left;
    28602782        line-height: 1.6363636363;
    … …  
    28622784        padding: 0 27px;
    28632785        padding: 0 2.7rem;
    2864         width: 168px;
    2865         width: 16.8rem;
     2786        width: 128px;
    28662787    }
    28672788    .site-description {
    … …  
    28702791        margin: -3px 0 21px;
    28712792        margin: -0.3rem 0 2.1rem;
    2872     }
    2873     .front-page-content-wrapper {
    2874         float: left;
    2875     }
    2876     .site-content {
    2877         margin: 0 27.31707317% 0 222px;
    2878         margin: 0 27.31707317% 0 22.2rem;
    2879     }
    2880     .content-sidebar,
    2881     .ephemera {
    2882         margin: 0 0 0 -27.31707317%;
    2883         width: 24.87804878%;
    2884     }
    2885     .content-area .entry-header {
    2886         margin: -48px 4.59183673% 0;
    2887         margin: -4.8rem 4.59183673% 0;
    2888         padding: 24px 4.46428571% 12px;
    2889         padding: 2.4rem 4.46428571% 1.2rem;
    2890     }
    2891     .content-area .entry-content,
    2892     .content-area .page-content,
    2893     .content-area .entry-summary {
    2894         margin: 0 4.59183673%;
    2895         padding: 12px 4.46428571% 0;
    2896         padding: 1.2rem 4.46428571% 0;
    2897     }
    2898     .content-area footer.entry-meta {
    2899         margin: 12px 4.59183673% 24px;
    2900         margin: 1.2rem 4.59183673% 2.4rem;
    2901         padding: 0 4.46428571%;
    2902     }
    2903     .archive-header,
    2904     .page-header {
    2905         margin: 0 4.59183673% 24px;
    2906         margin: 0 4.59183673% 2.4rem;
    2907     }
    2908     #featured-content {
    2909         padding-left: 222px;
    2910         padding-left: 22.2rem;
    2911     }
    2912     .site-footer {
    2913         padding-left: 27px;
    2914         padding-left: 2.7rem;
    29152793    }
    29162794    .secondary-navigation {
    … …  
    29382816            top: -1px;
    29392817            top: -0.1rem;
    2940             left: 168px;
    2941             left: 16.8rem;
    2942         width: 168px;
    2943         width: 16.8rem;
     2818            left: 128px;
     2819        width: 128px;
    29442820        z-index: 9999;
    29452821    }
    … …  
    29492825    .secondary-navigation ul li:hover > ul {
    29502826        display: block;
    2951     }
    2952     .page .content-area .entry-header,
    2953     .error404 .content-area .page-header {
    2954         margin: 0 4.59183673%;
    2955         padding: 0 4.46428571% 12px;
    2956         padding: 0 4.46428571% 1.2rem;
    2957     }
    2958     .full-width.site-content {
    2959         margin-left: 222px;
    2960         margin-left: 22.2rem;
    2961     }
    2962     .content-area .full-width .entry-header {
    2963         padding: 0 0 12px;
    2964         padding: 0 0 1.2rem;
    2965     }
    2966     .contributor,
    2967     .content-area .full-width .entry-header,
    2968     .content-area .full-width .entry-content,
    2969     .content-area .full-width .page-content,
    2970     .content-area .full-width footer.entry-meta {
    2971         margin: 0 5.882236%;
    2972     }
    2973     .comments-title,
    2974     .no-comments,
    2975     .comment-respond,
    2976     .comments-area article,
    2977     .comment-list .trackback,
    2978     .comment-list .pingback,
    2979     .post-navigation [rel="prev"],
    2980     .post-navigation [rel="next"] {
    2981         padding-right: 9.87001616%;
    2982         padding-left: 9.19765166%;
    2983     }
    2984     .comment-list,
    2985     .full-width .comment-list {
    2986         margin-left: 0;
    2987     }
    2988     .comment-navigation {
    2989         padding-left: 9.19765166%;
    2990     }
    2991     .comment .comment-respond {
    2992         margin-left: 60px;
    2993         margin-left: 6.0rem;
    2994     }
    2995     .image-navigation .previous-image,
    2996     .image-navigation .next-image,
    2997     .full-width .comment-navigation,
    2998     .full-width .comments-title,
    2999     .full-width .comment-respond,
    3000     .full-width .comments-area article,
    3001     .full-width .comment-list .trackback,
    3002     .full-width .comment-list .pingback {
    3003         padding-right: 5.882236%;
    3004         padding-left: 5.882236%;
    3005     }
    3006     .site-content blockquote.alignleft {
    3007         margin-left: 0;
    3008     }
    3009     .site-content blockquote.alignright {
    3010         margin-right: 0;
    30112827    }
    30122828    #secondary .widget,
    … …  
    30312847        padding-left: 0;
    30322848    }
    3033 
    3034 }
    3035 
    3036 @media screen and (min-width: 1150px) {
     2849    .front-page-content-wrapper {
     2850        float: left;
     2851    }
     2852    .featured-content {
     2853        padding-left: 182px;
     2854    }
     2855}
     2856
     2857@media screen and (min-width: 1040px) {
    30372858    .content-area .entry-header {
    3038         margin: -48px 8.03571428% 0 12.5%;
    3039         margin: -4.8rem 8.03571428% 0 12.5%;
    3040     }
     2859        margin-top: -48px;
     2860    }
     2861    .content-area .entry-header,
    30412862    .content-area .entry-content,
    3042     .content-area .page-content,
    3043     .content-area .entry-summary {
    3044         margin: 0 8.03571428% 0 12.5%;
    3045     }
    3046     .content-area footer.entry-meta {
    3047         margin: 12px 8.03571428% 24px 12.5%;
    3048         margin: 1.2rem 8.03571428% 2.4rem 12.5%;
    3049     }
    3050     .comments-title,
    3051     .no-comments,
    3052     .comment-respond,
    3053     .post-navigation [rel="prev"],
    3054     .post-navigation [rel="next"] {
    3055         padding-right: 12.44146986%;
    3056         padding-left: 16.77524429%;
    3057     }
    3058     .comments-area article,
    3059     .comment-list .trackback,
    3060     .comment-list .pingback {
    3061         padding-right: 11.27596439%;
    3062         padding-left: 15.2818991%;
    3063     }
    3064     .comment-respond {
    3065         padding-right: 13.73697916%;
    3066     }
    3067     .comment .comment-respond {
    3068         margin-left: 50px;
    3069         margin-left: 5.0rem;
    3070     }
    3071     .comment-list,
    3072     .full-width .comment-list {
    3073         margin-left: -60px;
    3074         margin-left: -6.0rem;
    3075     }
    3076     .comment-navigation {
    3077         padding-left: 16.77524429%;
    3078     }
     2863    .content-area .entry-summary,
     2864    .content-area footer.entry-meta,
    30792865    .archive-header,
    3080     .page-header {
    3081         margin: 0 8.03571428% 24px 12.5%;
    3082         margin: 0 8.03571428% 2.4rem 12.5%;
    3083     }
    3084     .page .content-area .entry-header,
    3085     .error404 .content-area .page-header {
    3086         margin: 0 8.03571428% 0 12.5%;
    3087     }
    3088     .contributor,
    3089     .content-area .full-width .entry-header,
    3090     .content-area .full-width .entry-content,
    3091     .content-area .full-width .page-content,
    3092     .content-area .full-width footer.entry-meta {
    3093         margin: 0 11.21868265%;
    3094     }
    3095     .image-navigation .previous-image,
    3096     .image-navigation .next-image,
    3097     .full-width .comment-navigation,
    3098     .full-width .comments-title,
    3099     .full-width .comment-respond,
    3100     .full-width .comments-area article,
    3101     .full-width .comment-list .trackback,
    3102     .full-width .comment-list .pingback {
    3103         padding-right: 11.21868265%;
    3104         padding-left: 11.21868265%;
    3105     }
    3106     .content-area .entry-content .wp-caption.alignleft .wp-caption-text {
    3107         padding-left: 10px;
    3108         padding-left: 1.0rem;
    3109     }
    3110     .site-content blockquote.alignleft {
    3111         margin-left: -20%;
    3112     }
    3113     .site-content blockquote.alignright {
    3114         margin-right: -20%;
    3115     }
    3116 }
    3117 
    3118 @media screen and (min-width: 1230px) {
    3119     .site,
    3120     .site-header,
    3121     .home .site-main {
    3122         max-width: 1260px;
    3123         max-width: 126.0rem;
    3124     }
    3125     .content-sidebar,
    3126     .ephemera {
    3127         padding-right: 0;
    3128     }
    3129     .contributor,
    3130     .content-area .full-width .entry-header,
    3131     .content-area .full-width .entry-content,
    3132     .content-area .full-width .page-content,
    3133     .content-area .full-width footer.entry-meta {
    3134         margin: 0 0 0 11.21868265%;
    3135     }
    3136     .image-navigation .previous-image,
    3137     .image-navigation .next-image,
    3138     .full-width .comment-navigation,
    3139     .full-width .comments-title,
    3140     .full-width .comment-respond,
    3141     .full-width .comments-area article,
    3142     .full-width .comment-list .trackback,
    3143     .full-width .comment-list .pingback {
    3144         padding-right: 0;
    3145     }
    3146 }
     2866    .page-header,
     2867    .page-content,
     2868    .post-navigation,
     2869    .image-navigation,
     2870    .comments-area {
     2871        padding-right: 15px;
     2872        padding-left: 15px;
     2873    }
     2874}
     2875
     2876@media screen and (min-width: 1080px) {
     2877    .site:before {
     2878        width: 222px;
     2879    }
     2880    .search-box-wrapper,
     2881    .featured-content {
     2882        padding-left: 222px;
     2883    }
     2884    .site-content {
     2885        margin-left: 222px;
     2886    }
     2887    #secondary,
     2888    .secondary-navigation ul ul {
     2889        width: 168px;
     2890    }
     2891    .secondary-navigation ul ul {
     2892        left: 168px;
     2893    }
     2894}
     2895
     2896@media screen and (min-width: 1110px) {
     2897    .content-area .entry-header,
     2898    .content-area .entry-content,
     2899    .content-area .entry-summary,
     2900    .content-area footer.entry-meta,
     2901    .archive-header,
     2902    .page-header,
     2903    .page-content,
     2904    .post-navigation,
     2905    .image-navigation,
     2906    .comments-area {
     2907        padding-right: 30px;
     2908        padding-left: 30px;
     2909    }
     2910}
     2911
     2912@media screen and (min-width: 1218px) {
     2913    .content-area .entry-header,
     2914    .content-area .entry-content,
     2915    .content-area .entry-summary,
     2916    .content-area footer.entry-meta,
     2917    .archive-header,
     2918    .page-header,
     2919    .page-content,
     2920    .post-navigation,
     2921    .image-navigation,
     2922    .comments-area {
     2923        margin-right: 54px;
     2924    }
     2925    .full-width .content-area .entry-header,
     2926    .full-width .content-area .entry-content,
     2927    .full-width .content-area .entry-summary,
     2928    .full-width .content-area footer.entry-meta,
     2929    .full-width .archive-header,
     2930    .full-width .page-header,
     2931    .full-width .page-content,
     2932    .full-width .post-navigation,
     2933    .full-width .image-navigation,
     2934    .full-width .comments-area {
     2935        margin-right: auto;
     2936    }
     2937}
     2938
     2939@media screen and (min-width: 1260px) {
     2940    .entry-content blockquote.alignleft,
     2941    .entry-content blockquote.alignright {
     2942        width: -webkit-calc(50% + 18px);
     2943        width:         calc(50% + 18px);
     2944    }
     2945    .entry-content blockquote.alignleft {
     2946        margin-left: -18%;
     2947    }
     2948    .entry-content blockquote.alignright {
     2949        margin-right: -18%;
     2950    }
     2951}
Note: See TracChangeset for help on using the changeset viewer.