WordPress.org
Get WordPress

Making WordPress.org

Changeset 7739


Ignore:
Timestamp:
10/18/2018 01:53:33 AM (8 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.