Making WordPress.org

Ticket #5133: 5133.diff

File 5133.diff, 7.0 KB (added by dufresnesteven, 5 years ago)

This diff updates wporg-main to include some wp4.css styles so we can exclude it.

  • 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..04d798fa5 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        font-size: 13px;
    283287        margin: 0 auto ms( 0 );
    284288        max-width: 960px;
    285         padding: 0 ms( 1 );
     289        padding: ms( 10 ) 0;
    286290
    287291        @include breakpoint( sm ) {
    288292                display: block;
    289 
    290                 .col-2 {
    291                         display: inline-block;
    292                         vertical-align: top;
    293                         width: calc( 50% - #{$grid-gutter} );
    294                 }
     293                padding-left: ms( 1 );
     294                padding-right: ms( 1 );
    295295        }
    296296
    297297        h4 {
     298                margin-top: 28px;
     299                margin-bottom: 16px;
    298300                border-bottom: 1px solid #dedede;
    299                 font-size: inherit;
     301                font-size: 14px;
    300302                padding-bottom: 4px;
    301303        }
    302304
    303305        h5 {
    304                 line-height: 1;
    305306                margin: 0;
    306307                text-transform: none;
    307308        }
     
    316317                }
    317318        }
    318319
     320        a {
     321                font-size: 14px;
     322                text-decoration: none;
     323        }
     324
    319325        ol, ul {
    320326                margin: 0;
    321327        }
    322328
     329        .swag-link {
     330                display: block;
     331                text-align: center;
     332        }
     333
     334        > div {
     335                padding-bottom: 32px;
     336        }
     337
     338        &.has-showcase > div:nth-child(3),
     339        &.has-showcase > div:last-child {
     340                width: 100%;
     341        }
     342
     343        @include breakpoint( 544px ) {
     344
     345                .swag-link {
     346                        text-align: left;
     347
     348                        img {
     349                                max-height: 217px;
     350                        }
     351                }
     352
     353                > div {
     354                        padding: 16px;
     355                        padding-bottom: 0;
     356                        float: left;
     357                        min-height: 315px;
     358                }
     359
     360                &.has-showcase > div {
     361                        min-height: 0;
     362                }
     363
     364                > div:first-child,
     365                > div:last-child  {
     366                        width: 30%;
     367                }
     368
     369                > div:nth-child(2),
     370                > div:nth-child(3) {
     371                        width: 70%;
     372                }
     373
     374                &.has-showcase > div:nth-child(3) {
     375                        width: 100%;
     376                }
     377        }
     378
     379        @include breakpoint( 975px ) {
     380
     381                > div {
     382                        padding: 8px;
     383                }
     384
     385                > div:first-child,
     386                > div:last-child {
     387                        width: 16.66666666%;
     388                }
     389
     390                > div:nth-child(2),
     391                > div:nth-child(3),
     392                &.has-showcase > div:nth-child(3),
     393                &.has-showcase > div:first-child {
     394                        width: 33.3333333%;
     395                }
     396        }
     397
    323398        .steps {
    324399                list-style: none;
    325400                padding: 0;
     
    373448                        margin-bottom: 8px;
    374449                        width: 130px;
    375450
     451                        @include breakpoint( 544px ) {
     452                                margin-left: 0;
     453                                margin-right: 0;
     454                        }
     455
    376456                        &:active {
    377457                                border: 1px solid #dedede;
    378458                                border-right-color: #f5f5f5;
    379459                                border-bottom-color: #f5f5f5;
    380460                        }
     461
     462                        display: block;
     463                        width: auto;
     464
     465                        img {
     466                                margin: 0 auto;
     467                                display: block;
     468                        }
    381469                }
    382470
     471
    383472                &.col-12 {
    384473                        margin-bottom: 0;
    385474                }
     
    394483                }
    395484        }
    396485
     486        &.has-showcase .notable-users a {
     487                display: block;
     488                padding: 0 8px 0;
     489        }
     490
    397491        .showcase-link {
    398492                display: block;
    399493                font-size: ms( -4 );
    400494                margin: 1rem 0;
     495                text-align: center;
     496
     497                @include breakpoint( 544px ) {
     498                        text-align: left;
     499                }
    401500        }
    402501}
  • 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";
  • 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 );
  • wordpress.org/public_html/wp-content/themes/pub/wporg-main/functions.php

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-main/functions.php wordpress.org/public_html/wp-content/themes/pub/wporg-main/functions.php
    index 437987d02..adf962b4e 100644
    function scripts() { 
    107107        if ( is_page() && get_queried_object()->post_parent ) {
    108108                wp_enqueue_script( 'wporg-navigation', get_theme_file_uri( "/js/navigation$suffix.js" ), [], '20151215', true );
    109109        }
     110
     111        add_theme_support( 'wp4-styles' );
    110112}
    111113add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts' );
    112114