WordPress.org
Get WordPress

Making WordPress.org

Changeset 7739


Ignore:
Timestamp:
10/18/2018 01:53:33 AM (6 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Revamp the design of the homepage to match the redesign of other wp.org sites (support, plugins, main, etc).

Also changes dashicon used for theme handbook.

Props mapk, coffee2code.
Fixes #2459.
See #3377.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/header.php

    r6512 r7739  
    1313?>
    1414
    15 <header id="masthead" class="site-header" role="banner">
     15<header id="masthead" class="site-header<?php if ( is_front_page() ) { echo ' home'; } ?>" role="banner">
    1616    <?php if ( get_query_var( 'is_handbook' ) ) : ?>
    1717    <a href="#" id="secondary-toggle" onclick="return false;"><strong><?php _e( 'Menu', 'wporg' ); ?></strong></a>
    1818    <?php endif; ?>
    1919    <div class="site-branding">
    20         <?php $tag = is_front_page() ? 'span' : 'h1'; ?>
    21         <<?php echo $tag; ?> class="site-title">
     20        <h1 class="site-title">
    2221            <a href="<?php echo esc_url( DevHub\get_site_section_url() ); ?>" rel="home"><?php echo DevHub\get_site_section_title(); ?></a>
    23         </<?php echo $tag; ?>>
     22        </h1>
     23
     24        <?php if ( is_front_page() ) : ?>
     25        <p class="site-description"><?php _e( 'The freedom to build.', 'wporg' ); ?></p>
     26        <?php endif; ?>
    2427
    2528        <nav id="site-navigation" class="main-navigation" role="navigation">

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-home-landing.php

    r5678 r7739  
    1414        <div class="home-landing">
    1515
    16             <div class="handbook-banner section blue clear color">
    17                 <div class="inner-wrap two-columns">
    18                     <div class="widget box box-left transparent">
    19                         <h3 class="widget-title"><div class="dashicons dashicons-welcome-widgets-menus"></div><?php _e( 'Themes', 'wporg' ); ?></h3>
    20                         <p class="widget-description"><?php _e( 'Want to learn how to start theming WordPress?', 'wporg' ); ?></p>
    21                         <a href="<?php echo esc_url( get_post_type_archive_link( 'theme-handbook' ) ); ?>" class="themes-go get-started go button"><?php _e( 'Develop Themes ', 'wporg' ); ?><span class="dashicons dashicons-arrow-right-alt2"></span></a>
    22                     </div>
    23                     <div class="widget box box-right transparent">
    24                         <h3 class="widget-title"><div class="dashicons dashicons-admin-plugins"></div><?php _e( 'Plugins', 'wporg' ); ?></h3>
    25                         <p class="widget-description"><?php _e( 'Ready to dive deep into the world of plugin authoring?', 'wporg' ); ?></p>
    26                         <a href="<?php echo esc_url( get_post_type_archive_link( 'plugin-handbook' ) ); ?>" class="plugins-go get-started go button"><?php _e( 'Develop Plugins ', 'wporg' ); ?><span class="dashicons dashicons-arrow-right-alt2"></span></a>
    27                     </div>
     16            <div class="inner-wrap section">
     17
     18                <div class="box box-code-ref">
     19                    <h3 class="widget-title"><div class="dashicons dashicons-editor-code"></div><?php _e( 'Code Reference', 'wporg' ); ?></h3>
     20                    <p class="widget-description"><?php _e( 'Looking for documentation for the codebase?', 'wporg' ); ?></p>
     21                    <a href="<?php echo esc_url( home_url( '/reference' ) ); ?>" class="go"><?php _e( 'Visit the reference', 'wporg' ); ?></a>
    2822                </div>
    29             </div><!-- /topic-guide -->
    3023
    31             <div class="code-reference-banner section gray clear color">
    32                 <div class="inner-wrap">
    33                     <div class="widget transparent">
    34                         <div class="code-ref-left">
    35                             <h3 class="widget-title"><div class="dashicons dashicons-editor-code"></div><?php _e( ' Code Reference', 'wporg' ); ?></h3>
    36                             <p class="widget-description"><?php _e( 'Search the codebase for documentation', 'wporg' ); ?></p>
    37                         </div>
    38                         <div class="code-ref-right">
    39                             <a href="<?php echo home_url( '/reference' ); ?>" class="codex-go go button"><?php _e( 'Visit the Reference ', 'wporg' ); ?><span class="dashicons dashicons-arrow-right-alt2"></span></a>
    40                         </div>
    41                     </div>
     24                <div class="box box-themes">
     25                    <h3 class="widget-title"><div class="dashicons dashicons-admin-appearance"></div><?php _e( 'Themes', 'wporg' ); ?></h3>
     26                    <p class="widget-description"><?php _e( 'Want to learn how to start theming WordPress?', 'wporg' ); ?></p>
     27                    <a href="<?php echo esc_url( get_post_type_archive_link( 'theme-handbook' ) ); ?>" class="go"><?php _e( 'Develop Themes ', 'wporg' ); ?></a>
    4228                </div>
    43             </div><!-- /new-in-guide -->
    4429
    45             <div class="handbook-banner section blue clear color">
    46                 <div class="inner-wrap two-columns">
    47                     <div class="widget box box-left transparent">
    48                         <h3 class="widget-title"><div class="dashicons dashicons-controls-repeat"></div><?php _e( 'REST API', 'wporg' ); ?></h3>
    49                         <p class="widget-description"><?php _e( 'Getting started on making WordPress applications?', 'wporg' ); ?></p>
    50                         <a href="<?php esc_attr_e( get_post_type_archive_link( 'rest-api-handbook' ) ); ?>" class="rest-api-go get-started go button"><?php _e( 'Make Applications ', 'wporg' ); ?><span class="dashicons dashicons-arrow-right-alt2"></span></a>
    51                     </div>
    52                     <div class="widget box box-right transparent">
    53                         <h3 class="widget-title"><div class="dashicons dashicons-arrow-right-alt2"></div><?php _e( 'WP-CLI', 'wporg' ); ?></h3>
    54                         <p class="widget-description"><?php _e( 'Want to accelerate your workflow managing WordPress?', 'wporg' ); ?></p>
    55                         <a href="<?php esc_attr_e( get_post_type_archive_link( 'command' ) ); ?>" class="wp-cli-go get-started go button"><?php _e( 'Run Commands ', 'wporg' ); ?><span class="dashicons dashicons-arrow-right-alt2"></span></a>
    56                     </div>
     30                <div class="box box-plugins">
     31                    <h3 class="widget-title"><div class="dashicons dashicons-admin-plugins"></div><?php _e( 'Plugins', 'wporg' ); ?></h3>
     32                    <p class="widget-description"><?php _e( 'Ready to dive deep into the world of plugin authoring?', 'wporg' ); ?></p>
     33                    <a href="<?php echo esc_url( get_post_type_archive_link( 'plugin-handbook' ) ); ?>" class="go"><?php _e( 'Develop Plugins ', 'wporg' ); ?></a>
    5734                </div>
    58             </div><!-- /topic-guide -->
    5935
    60             <?php /*
    61             <main id="main" class="site-main section" role="main">
     36                <div class="box box-rest-api">
     37                    <h3 class="widget-title"><div class="dashicons dashicons-controls-repeat"></div><?php _e( 'REST API', 'wporg' ); ?></h3>
     38                    <p class="widget-description"><?php _e( 'Getting started on making WordPress applications?', 'wporg' ); ?></p>
     39                    <a href="<?php echo esc_url( get_post_type_archive_link( 'rest-api-handbook' ) ); ?>" class="go"><?php _e( 'Make Applications ', 'wporg' ); ?></a>
     40                </div>
    6241
    63                     <?php while ( have_posts() ) : the_post(); ?>
     42                <div class="box box-wp-cli">
     43                    <h3 class="widget-title"><div class="dashicons dashicons-arrow-right-alt2"></div><?php _e( 'WP-CLI', 'wporg' ); ?></h3>
     44                    <p class="widget-description"><?php _e( 'Want to accelerate your workflow managing WordPress?', 'wporg' ); ?></p>
     45                    <a href="<?php echo esc_url( get_post_type_archive_link( 'command' ) ); ?>" class="go"><?php _e( 'Run Commands ', 'wporg' ); ?></a>
     46                </div>
    6447
    65                         <div id="post-<?php the_ID(); ?>" class="home-primary-content">
    66                             <header class="entry-header">
    67                                 <h1 class="entry-title"><?php the_title(); ?></h1>
    68                             </header><!-- .entry-header -->
     48            </div>
    6949
    70                             <div class="entry-content">
    71                                 <?php the_content(); ?>
    72                                 <?php
    73                                     wp_link_pages( array(
    74                                         'before' => '<div class="page-links">' . __( 'Pages:', 'wporg' ),
    75                                         'after'  => '</div>',
    76                                     ) );
    77                                 ?>
    78                             </div><!-- .entry-content -->
    79                             <?php edit_post_link( __( 'Edit', 'wporg' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
    80                         </div><!-- #post-## -->
     50            <div class="search-guide inner-wrap section">
    8151
    82                     <?php endwhile; // end of the loop. ?>
     52                <?php if ( is_active_sidebar( 'landing-footer-1') ) { ?>
     53                    <?php dynamic_sidebar( 'landing-footer-1' ); ?>
     54                <?php } else { ?>
     55                    <div class=" box"></div>
     56                <?php } ?>
    8357
    84             </main><!-- #main -->
    85 */ ?>
     58                <div class="box">
     59                    <h3 class="widget-title"><?php _e( 'Contribute', 'wporg' ); ?></h3>
     60                    <ul class="unordered-list no-bullets">
     61                        <li><a href="https://make.wordpress.org/" class="make-wp-link"><?php _e( 'Help Make WordPress', 'wporg' ); ?></a></li>
     62                    </ul>
     63                </div>
    8664
    87             <div class="search-guide section light-gray clear">
    88                 <div class="inner-wrap three-columns">
     65                <?php if ( is_active_sidebar( 'landing-footer-2') ) { ?>
     66                    <?php dynamic_sidebar( 'landing-footer-2' ); ?>
     67                <?php } else { ?>
     68                    <div class=" box"></div>
     69                <?php } ?>
    8970
    90                     <?php if ( is_active_sidebar( 'landing-footer-1') ) { ?>
    91                         <?php dynamic_sidebar( 'landing-footer-1' ); ?>
    92                     <?php } else { ?>
    93                         <div class="widget box"></div>
    94                     <?php } ?>
    95 
    96                     <?php if ( is_active_sidebar( 'landing-footer-2') ) { ?>
    97                         <?php dynamic_sidebar( 'landing-footer-2' ); ?>
    98                     <?php } else { ?>
    99                         <div class="widget box"></div>
    100                     <?php } ?>
    101 
    102                     <div class="widget box">
    103                         <h4 class="widget-title"><a href="https://make.wordpress.org/" class="make-wp-link"><?php _e( 'Help Make WordPress', 'wporg' ); ?></a></h4>
    104                     </div>
    105                 </div>
    10671            </div>
    10772
    … …  
    11075
    11176<?php get_footer(); ?>
     77

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r7491 r7739  
    33
    44.home .devhub-wrap {
     5    h1, h2, h3, h4, h5, h6 {
     6        font-family: "Open Sans", sans-serif;
     7    }
    58    padding-bottom: 0;
    69    #content {
    … …  
    507510    }
    508511    .home-landing .section {
    509         padding: 30px 0%;
    510         padding: 3rem 0%;
     512        padding: 50px 0 10px;
     513        padding: 5rem 0 1rem;
     514        margin-top: 60px;
     515        margin-top: 6rem;
     516
     517        .no-bullets {
     518            li {
     519                line-height: 20px;
     520                line-height: 2rem;
     521                margin-bottom: 12.5px;
     522                margin-bottom: 1.25rem;
     523
     524                a {
     525                    color: #4ca6cf;
     526                    font-size: 125%;
     527                }
     528            }
     529        }
     530
     531        @media ( max-width: 974px ) {
     532            width: 640px;
     533            margin: 0 auto;
     534        }
     535       
    511536    }
    512537    .color.section {
    513538        color: #fff;
    514539    }
    515     .section.blue {
     540    .section {
    516541        /*background: #0073aa;*/
    517542        padding: 30px 0;
    518543        padding: 3rem 0;
     544        overflow: auto;
    519545
    520546        .box {
    521547            text-align: center;
    522548
     549            padding: 0 30px 90px;
     550            padding: 0 3rem 9rem;
     551            width: 320px;
     552
    523553            .widget-description {
    524                 padding: 1em 0;
     554                padding: 1em 0 0;
     555                margin-bottom: 5px;
     556                margin-bottom: 1rem;
     557            }
     558        }
     559        &.search-guide {
     560            border-top: 2px solid #efefef;
     561            padding-top: 60px;
     562            padding-top: 6rem;
     563            margin-top: 0;
     564
     565            .box {
     566                text-align: left;
    525567            }
    526568        }
    … …  
    528570        .widget-title {
    529571
    530             font-size: 50px;
    531             font-size: 5rem;
    532             line-height: 78px;
    533             line-height: 7.8rem;
     572            font-size: 25px;
     573            font-size: 2.5rem;
     574            line-height: 60px;
     575            line-height: 6rem;
    534576            .dashicons {
    535                 font-size: 84px;
    536                 font-size: 8.4rem;
     577                color: #222;
     578                font-size: 108px;
     579                font-size: 10.8rem;
    537580                line-height: 84px;
    538581                line-height: 8.4rem;
    … …  
    931974
    932975    .widget-description {
    933         font-style: italic;
    934         font-weight: 300;
    935     }
     976        font-weight: 400;
     977    }
     978    .go {
     979        color: #4ca6cf;
     980    }
     981
    936982    .handbook {
    937983        h1 {
    … …  
    15771623    }
    15781624}
     1625.site-header.home {
     1626    padding: 28px 20px;
     1627    padding: 2.8rem 2.0rem;
     1628    text-align: center;
     1629
     1630    .site-branding {
     1631        height: initial;
     1632    }
     1633
     1634    .site-title {
     1635        max-width: none;
     1636        font-weight: 300;
     1637        margin: 36px 0 11.25px;
     1638        margin: 3.6rem 0 1.125rem;
     1639        text-align: center;
     1640        display: inherit;
     1641        clear: both;
     1642
     1643        a {
     1644            font-size: 68.6646px;
     1645            font-size: 6.86646rem;
     1646       
     1647            @media (max-width: 500px) {
     1648                font-size: 50px;
     1649                font-size: 5rem;
     1650            }
     1651        }
     1652    }
     1653
     1654    .site-description {
     1655        color: hsla(0,0%,100%,.8);
     1656        font-size: 2.25rem;
     1657        font-weight: 300;
     1658        text-align: center;
     1659    }
     1660}
     1661
    15791662.menu-container {
    15801663    background: #0073aa;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

    r7491 r7739  
    271271.home .devhub-wrap {
    272272  padding-bottom: 0;
     273}
     274
     275.home .devhub-wrap h1, .home .devhub-wrap h2, .home .devhub-wrap h3, .home .devhub-wrap h4, .home .devhub-wrap h5, .home .devhub-wrap h6 {
     276  font-family: "Open Sans", sans-serif;
    273277}
    274278
    … …  
    849853
    850854.devhub-wrap .home-landing .section {
    851   padding: 30px 0%;
    852   padding: 3rem 0%;
     855  padding: 50px 0 10px;
     856  padding: 5rem 0 1rem;
     857  margin-top: 60px;
     858  margin-top: 6rem;
     859}
     860
     861.devhub-wrap .home-landing .section .no-bullets li {
     862  line-height: 20px;
     863  line-height: 2rem;
     864  margin-bottom: 12.5px;
     865  margin-bottom: 1.25rem;
     866}
     867
     868.devhub-wrap .home-landing .section .no-bullets li a {
     869  color: #4ca6cf;
     870  font-size: 125%;
     871}
     872
     873@media (max-width: 974px) {
     874  .devhub-wrap .home-landing .section {
     875    width: 640px;
     876    margin: 0 auto;
     877  }
    853878}
    854879
    … …  
    857882}
    858883
    859 .devhub-wrap .section.blue {
     884.devhub-wrap .section {
    860885  /*background: #0073aa;*/
    861886  padding: 30px 0;
    862887  padding: 3rem 0;
    863 }
    864 
    865 .devhub-wrap .section.blue .box {
     888  overflow: auto;
     889}
     890
     891.devhub-wrap .section .box {
    866892  text-align: center;
    867 }
    868 
    869 .devhub-wrap .section.blue .box .widget-description {
    870   padding: 1em 0;
    871 }
    872 
    873 .devhub-wrap .section.blue .widget-title {
    874   font-size: 50px;
    875   font-size: 5rem;
    876   line-height: 78px;
    877   line-height: 7.8rem;
    878 }
    879 
    880 .devhub-wrap .section.blue .widget-title .dashicons {
    881   font-size: 84px;
    882   font-size: 8.4rem;
     893  padding: 0 30px 90px;
     894  padding: 0 3rem 9rem;
     895  width: 320px;
     896}
     897
     898.devhub-wrap .section .box .widget-description {
     899  padding: 1em 0 0;
     900  margin-bottom: 5px;
     901  margin-bottom: 1rem;
     902}
     903
     904.devhub-wrap .section.search-guide {
     905  border-top: 2px solid #efefef;
     906  padding-top: 60px;
     907  padding-top: 6rem;
     908  margin-top: 0;
     909}
     910
     911.devhub-wrap .section.search-guide .box {
     912  text-align: left;
     913}
     914
     915.devhub-wrap .section .widget-title {
     916  font-size: 25px;
     917  font-size: 2.5rem;
     918  line-height: 60px;
     919  line-height: 6rem;
     920}
     921
     922.devhub-wrap .section .widget-title .dashicons {
     923  color: #222;
     924  font-size: 108px;
     925  font-size: 10.8rem;
    883926  line-height: 84px;
    884927  line-height: 8.4rem;
    … …  
    893936
    894937@media (min-width: 43em) and (max-width: 915px) {
    895   .devhub-wrap .section.blue .three-columns .widget-title {
     938  .devhub-wrap .section .three-columns .widget-title {
    896939    font-size: 35px;
    897940    font-size: 3.5rem;
    … …  
    13051348
    13061349.devhub-wrap .widget-description {
    1307   font-style: italic;
    1308   font-weight: 300;
     1350  font-weight: 400;
     1351}
     1352
     1353.devhub-wrap .go {
     1354  color: #4ca6cf;
    13091355}
    13101356
    … …  
    19421988    margin-left: 10px;
    19431989  }
     1990}
     1991
     1992.site-header.home {
     1993  padding: 28px 20px;
     1994  padding: 2.8rem 2.0rem;
     1995  text-align: center;
     1996}
     1997
     1998.site-header.home .site-branding {
     1999  height: initial;
     2000}
     2001
     2002.site-header.home .site-title {
     2003  max-width: none;
     2004  font-weight: 300;
     2005  margin: 36px 0 11.25px;
     2006  margin: 3.6rem 0 1.125rem;
     2007  text-align: center;
     2008  display: inherit;
     2009  clear: both;
     2010}
     2011
     2012.site-header.home .site-title a {
     2013  font-size: 68.6646px;
     2014  font-size: 6.86646rem;
     2015}
     2016
     2017@media (max-width: 500px) {
     2018  .site-header.home .site-title a {
     2019    font-size: 50px;
     2020    font-size: 5rem;
     2021  }
     2022}
     2023
     2024.site-header.home .site-description {
     2025  color: rgba(255, 255, 255, 0.8);
     2026  font-size: 2.25rem;
     2027  font-weight: 300;
     2028  text-align: center;
    19442029}
    19452030
Note: See TracChangeset for help on using the changeset viewer.