WordPress.org
Get WordPress

Making WordPress.org

Ticket #5133: 5133.1.diff

File 5133.1.diff, 7.0 KB (added by dufresnesteven, 6 years ago)

Update the mobile layout to match wporg-main.

  • wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_home-welcome.scss 

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_home-welcome.scss wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_home-welcome.scss
index c18a277ba..ce74bab94 100644
     
    3232                }
    3333        }
    3434
     35        a {
     36                text-decoration: none;
     37        }
     38
    3539        p {
    3640                font-size: 18px;
    3741                margin: 1em 0;
    … …  
    279283}
    280284
    281285#home-below {
    282         font-size: ms( -2 );
     286        display: block;
     287        font-size: 13px;
    283288        margin: 0 auto ms( 0 );
    284289        max-width: 960px;
    285         padding: 0 ms( 1 );
     290        padding: ms( 10 ) 0;
    286291
    287292        @include breakpoint( sm ) {
    288                 display: block;
    289 
    290                 .col-2 {
    291                         display: inline-block;
    292                         vertical-align: top;
    293                         width: calc( 50% - #{$grid-gutter} );
    294                 }
     293                display: flex;
     294                flex-direction: column;
     295                padding-left: ms( 1 );
     296                padding-right: ms( 1 );
    295297        }
    296298
    297299        h4 {
     300                margin-top: 28px;
     301                margin-bottom: 16px;
    298302                border-bottom: 1px solid #dedede;
    299                 font-size: inherit;
     303                font-size: 14px;
    300304                padding-bottom: 4px;
    301305        }
    302306
    303307        h5 {
    304                 line-height: 1;
    305308                margin: 0;
    306309                text-transform: none;
    307310        }
    … …  
    316319                }
    317320        }
    318321
     322        a {
     323                font-size: 14px;
     324                text-decoration: none;
     325        }
     326
    319327        ol, ul {
    320328                margin: 0;
    321329        }
    322330
     331        .swag-link {
     332                display: block;
     333                text-align: center;
     334        }
     335
     336        > div {
     337                padding-bottom: 32px;
     338        }
     339
     340        > div:nth-child(2),
     341        > div:nth-child(3) {
     342                order: -1;
     343        }
     344
     345        &.has-showcase > div:nth-child(3),
     346        &.has-showcase > div:last-child {
     347                width: 100%;
     348        }
     349
     350        @include breakpoint( 544px ) {
     351                display: block;
     352
     353                .swag-link {
     354                        text-align: left;
     355
     356                        img {
     357                                max-height: 217px;
     358                        }
     359                }
     360
     361                > div {
     362                        padding: 16px;
     363                        padding-bottom: 0;
     364                        float: left;
     365                        min-height: 315px;
     366                }
     367
     368                &.has-showcase > div {
     369                        min-height: 0;
     370                }
     371
     372                > div:first-child,
     373                > div:last-child  {
     374                        width: 30%;
     375                }
     376
     377                > div:nth-child(2),
     378                > div:nth-child(3) {
     379                        width: 70%;
     380                }
     381
     382                &.has-showcase > div:nth-child(3) {
     383                        width: 100%;
     384                }
     385        }
     386
     387        @include breakpoint( 975px ) {
     388
     389                > div {
     390                        padding: 8px;
     391                }
     392
     393                > div:first-child,
     394                > div:last-child {
     395                        width: 16.66666666%;
     396                }
     397
     398                > div:nth-child(2),
     399                > div:nth-child(3),
     400                &.has-showcase > div:nth-child(3),
     401                &.has-showcase > div:first-child {
     402                        width: 33.3333333%;
     403                }
     404        }
     405
    323406        .steps {
    324407                list-style: none;
    325408                padding: 0;
    … …  
    373456                        margin-bottom: 8px;
    374457                        width: 130px;
    375458
     459                        @include breakpoint( 544px ) {
     460                                margin-left: 0;
     461                                margin-right: 0;
     462                        }
     463
    376464                        &:active {
    377465                                border: 1px solid #dedede;
    378466                                border-right-color: #f5f5f5;
    379467                                border-bottom-color: #f5f5f5;
    380468                        }
     469
     470                        display: block;
     471                        width: auto;
     472
     473                        img {
     474                                margin: 0 auto;
     475                                display: block;
    381476                        }
     477                }
     478
    382479
    383480                &.col-12 {
    384481                        margin-bottom: 0;
    … …  
    394491                }
    395492        }
    396493
     494        &.has-showcase .notable-users a {
     495                display: block;
     496                padding: 0 8px 0;
     497        }
     498
    397499        .showcase-link {
    398500                display: block;
    399501                font-size: ms( -4 );
    400502                margin: 1rem 0;
     503                text-align: center;
     504
     505                @include breakpoint( 544px ) {
     506                        text-align: left;
     507                }
    401508        }
    402509}

  • wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/generic/_generic.scss 

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/generic/_generic.scss wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/generic/_generic.scss
index 802e6e9ac..2560ecfac 100644
     
    11@import "../../../wporg/css/generic/kube";
    22@import "../../../wporg/css/generic/normalize";
     3@import "legacy";

  • new file wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/generic/_legacy.scss 

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/generic/_legacy.scss wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/generic/_legacy.scss
new file mode 100644
index 000000000..f135e6508
    - +  
     1body,
     2div,
     3dl,
     4dt,
     5dd,
     6ul,
     7ol,
     8li,
     9h1,
     10h2,
     11h3,
     12h4,
     13h5,
     14h6,
     15pre,
     16form,
     17fieldset,
     18input,
     19p,
     20blockquote,
     21table,
     22th,
     23td {
     24        margin: 0;
     25        padding: 0;
     26}

  • wordpress.org/public_html/wp-content/themes/pub/wporg-main/front-page.php 

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-main/front-page.php wordpress.org/public_html/wp-content/themes/pub/wporg-main/front-page.php
index c345e6564..5d3a0e382 100644
    if ( is_object( $rosetta ) && $rosetta->showcase instanceof \Rosetta_Showcase ) 
    3131        $showcase = $rosetta->showcase->front();
    3232}
    3333
    34 $swag_class = $showcase ? 'col-4' : 'col-2';
    35 $user_class = $showcase ? 'col-12' : 'col-2';
     34$showcase_class = $showcase ? 'has-showcase' : '';
    3635
    3736get_header( 'wporg' );
    3837?>
    … … get_header( 'wporg' ); 
    161160                        </section>
    162161                </div>
    163162
    164                 <div id="home-below" class="home-below row gutters">
    165                         <div class="col-4">
     163                <div id="home-below" class="home-below <?php echo esc_attr( $showcase_class ); ?>">
     164                        <div>
     165                                <h4><a href="/about/swag/"><?php _e( 'WordPress&nbsp;Swag', 'wporg' ); ?></a></h4>
     166                                <a class="swag-link" href="/about/swag/">
     167                                        <?php if ( $showcase ) : ?>
     168                                                <img src="https://s.w.org/images/home/swag_col-2.png" srcset="https://s.w.org/images/home/swag_col-2_x2.png 2x" alt="<?php esc_attr_e( 'WordPress Swag', 'wporg' ); ?>" />
     169                                        <?php else : ?>
     170                                                <img src="https://s.w.org/images/home/swag_col-1.jpg?1" alt="<?php esc_attr_e( 'WordPress Swag', 'wporg' ); ?>" />
     171                                        <?php endif; ?>
     172                                </a>
     173                        </div>
     174
     175                        <div>
    166176                                <h4><a href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>"><?php _e( 'News From Our Blog', 'wporg' ); ?></a></h4>
    167177
    168178                                <?php
    … … get_header( 'wporg' ); 
    183193                                ?>
    184194                        </div>
    185195
    186                         <div class="col-4">
     196                        <div>
    187197                                <h4><?php _e( 'It&rsquo;s Easy&nbsp;As&hellip;', 'wporg' ); ?></h4>
    188198
    189199                                <ol class="steps">
    … … get_header( 'wporg' ); 
    220230                                </ol>
    221231                        </div>
    222232
    223                         <div class="<?php echo esc_attr( $swag_class ); ?> first">
    224                                 <h4><a href="/about/swag/"><?php _e( 'WordPress&nbsp;Swag', 'wporg' ); ?></a></h4>
    225                                 <a href="/about/swag/">
    226                                         <?php if ( $showcase ) : ?>
    227                                                 <img width="288" height="288" src="https://s.w.org/images/home/swag_col-2.png" srcset="https://s.w.org/images/home/swag_col-2_x2.png 2x" alt="<?php esc_attr_e( 'WordPress Swag', 'wporg' ); ?>" />
    228                                         <?php else : ?>
    229                                                 <img width="132" height="177" src="https://s.w.org/images/home/swag_col-1.jpg?1" alt="<?php esc_attr_e( 'WordPress Swag', 'wporg' ); ?>" />
    230                                         <?php endif; ?>
    231                                 </a>
    232                         </div>
    233 
    234                         <div class="<?php echo esc_attr( $user_class ); ?>">
     233                        <div>
    235234                                <h4><a href="https://wordpress.org/showcase/"><?php _e( 'WordPress&nbsp;Users', 'wporg' ); ?></a></h4>
    236235
    237236                                <?php if ( $showcase ) : ?>
    238                                         <div id="notable-users" class="notable-users col-12 row gutters">
     237                                        <div id="notable-users" class="notable-users col-12 row">
    239238                                                <?php
    240239                                                foreach ( $showcase as $showcase_post ) :
    241240                                                        $post_url  = get_permalink( $showcase_post->ID );