WordPress.org
Get WordPress

Make WordPress Core

Changeset 25864


Ignore:
Timestamp:
10/22/2013 04:36:26 PM (11 years ago)
Author:
lancewillett
Message:

Twenty Fourteen: further revise primary navigation functionality, simplify mobile navigation, and clean up the main JS file. Props obenland, iamtakashi. See #25554.

Location:
trunk/src/wp-content/themes/twentyfourteen
Files:
1 added
1 deleted
5 edited

Legend:

Unmodified
Added
Removed

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

    r25856 r25864  
    240240        wp_enqueue_script( 'jquery-masonry' );
    241241
    242     wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true );
     242    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131011', true );
    243243
    244244    // Add Lato font used in the main stylesheet.
    … …  
    375375        $classes[] = 'group-blog';
    376376
     377    if ( get_header_image() )
     378        $classes[] = 'header-image';
     379    else
     380        $classes[] = 'masthead-fixed';
     381
    377382    if ( is_archive() || is_search() || is_home() )
    378383        $classes[] = 'list-view';

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

    r25769 r25864  
    4040            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    4141
    42             <div class="header-extra">
    43                 <div class="search-toggle">
    44                     <a href="#search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
    45                 </div>
     42            <div class="search-toggle">
     43                <a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
    4644            </div>
    4745
    48             <nav role="navigation" class="site-navigation primary-navigation">
    49                 <h1 class="screen-reader-text"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
    50                 <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a></a>
    51                 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
     46            <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
     47                <h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
     48                <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
     49                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    5250            </nav>
    5351        </div>
    54 
    55         <div id="mobile-navigations" class="hide"></div>
    5652
    5753        <div id="search-container" class="search-box-wrapper hide">

  • trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php

    r25857 r25864  
    127127        input[type="reset"],
    128128        input[type="submit"],
    129         .header-extra,
    130129        .search-toggle,
    131         .primary-navigation ul ul,
    132         .primary-navigation li:hover > a,
    133130        .hentry .mejs-controls .mejs-time-rail .mejs-time-current,
    134131        .widget_calendar tbody a {
    135132            background-color: ' . $accent_color . ';
     133        }
     134
     135        @media screen and (min-width: 782px) {
     136            .primary-navigation ul ul,
     137            .primary-navigation li:hover > a {
     138                background-color: ' . $accent_color . ';
     139            }
    136140        }
    137141
    … …  
    161165        .search-toggle.active,
    162166        .search-box,
     167        .primary-navigation ul ul a:hover,
    163168        .widget_calendar tbody a:hover {
    164169            background-color: ' . $accent_lighter . ';
    … …  
    179184        a:active,
    180185        .site-navigation .current_page_item > a,
     186        .site-navigation .current_page_ancestor > a,
    181187        .site-navigation .current-menu-item > a,
     188        .site-navigation .current-menu-ancestor > a,
    182189        .secondary-navigation a:hover,
    183190        .entry-title a:hover,

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

    r25802 r25864  
    6060----------------------------------------------- */
    6161
    62 .header-main {
    63     margin-left: 48px;
    64     padding-right: 10px;
    65     padding-left: 0;
     62.search-toggle {
     63    float: left;
     64    margin-left: 38px;
    6665    margin-right: auto;
    67 }
    68 
    69 .header-extra {
    70     float: left;
    7166}
    7267
    … …  
    7570}
    7671
    77 #nav-toggle {
     72.menu-toggle {
    7873    left: 0;
    7974    right: auto;
    … …  
    9489
    9590/* Primary Navigation */
    96 .primary-navigation {
    97     float: left;
    98     margin: 0 -10px 0 10px;
    99 }
    100 
    10191.primary-navigation ul {
    10292    padding-right: 0;
    … …  
    10494}
    10595
     96.primary-navigation ul ul li {
     97    margin-left: auto;
     98    margin-right: 15px;
     99}
     100
    106101.primary-navigation ul ul {
    107     float: right;
    108102    right: -999em;
    109103    left: auto;
    … …  
    494488}
    495489
    496 @media screen and (min-width: 770px) {
     490@media screen and (min-width: 782px) {
    497491    .header-main {
     492        padding: 0 27px 0 0;
     493    }
     494
     495    .search-toggle {
    498496        margin-left: 0;
    499         margin-right: auto;
    500497    }
    501498}

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

    r25857 r25864  
    412412    -moz-box-sizing:    border-box;
    413413    box-sizing:         border-box;
     414    background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
    414415}
    415416
    … …  
    729730.comment-reply-login:before,
    730731.contributor-posts-link:before,
     732.menu-toggle:before,
    731733.search-toggle:before,
    732734.widget_twentyfourteen_ephemera .widget-title:before {
    … …  
    786788
    787789.header-main {
    788     margin-right: 48px;
    789790    min-height: 48px;
    790     padding-left: 10px;
    791 }
    792 
    793 .header-extra {
    794     background-color: #24890d;
    795     float: right;
     791    padding: 0 10px;
    796792}
    797793
    … …  
    813809.search-toggle {
    814810    background-color: #24890d;
    815     -webkit-box-sizing: border-box;
    816     -moz-box-sizing:    border-box;
    817     box-sizing:         border-box;
    818     color: #fff;
    819811    cursor: pointer;
    820     display: block;
    821     float: left;
    822     font-size: 10px;
    823     min-width: 70px;
    824     min-height: 48px;
    825     padding: 25px 10px 0;
    826     position: relative;
     812    float: right;
     813    height: 48px;
     814    margin-right: 38px;
    827815    text-align: center;
    828     text-transform: uppercase;
     816    width: 48px;
    829817}
    830818
    … …  
    837825    color: #fff;
    838826    content: "\f400";
    839     margin-left: -8px;
    840     position: absolute;
    841     top: 9px;
    842     left: 50%;
    843 }
    844 
    845 .search-toggle a,
    846 .search-toggle a:hover {
    847     color: #fff;
     827    font-size: 20px;
     828    margin-top: 14px;
    848829}
    849830
    … …  
    852833    -moz-box-sizing:    border-box;
    853834    box-sizing:         border-box;
    854     position: absolute;
     835    position: relative;
    855836    width: 100%;
    856837    z-index: 2;
    … …  
    866847    font-size: 13px;
    867848    margin: 12px 10px;
    868     padding: 3px 6px;
    869     width: 326px;
    870 }
    871 
    872 /* Fixed Header */
    873 
    874 .site-header.masthead-fixed {
    875     box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    876     position: fixed;
    877     top: 0;
    878 }
    879 
    880 .admin-bar .site-header.masthead-fixed {
    881     top: 28px;
    882 }
    883 
    884 .admin-bar.mp6 .site-header.masthead-fixed {
    885     top: 32px;
     849    padding: 3px 2px 3px 6px;
     850    width: 240px;
    886851}
    887852
    … …  
    898863
    899864.site-navigation .current_page_item > a,
    900 .site-navigation .current-menu-item > a {
     865.site-navigation .current_page_ancestor > a,
     866.site-navigation .current-menu-item > a,
     867.site-navigation .current-menu-ancestor > a {
    901868    color: #55d737;
    902869}
    … …  
    909876
    910877.primary-navigation {
    911     display: none;
    912     float: right;
    913     font-size: 11px;
    914     line-height: 1.6363636363;
    915     margin: 0 10px 0 -10px;
    916 }
    917 
    918 .primary-navigation ul {
    919     margin: 0;
    920     padding-left: 0;
    921 }
    922 
    923 .primary-navigation li {
    924     -webkit-box-sizing: border-box;
    925     -moz-box-sizing:    border-box;
    926     box-sizing:         border-box;
    927     display: inline-block;
    928     height: 48px;
    929     line-height: 48px;
    930     position: relative;
    931 }
    932 
    933 .primary-navigation a {
    934     display: inline-block;
    935     padding: 0 10px;
    936     text-decoration: none;
    937     white-space: nowrap;
    938 }
    939 
    940 .primary-navigation ul ul {
    941     background-color: #24890d;
    942     float: left;
    943     position: absolute;
    944     top: 48px;
    945     left: -999em;
    946     z-index: 99999;
    947 }
    948 
    949 .primary-navigation li li {
    950     display: block;
    951     height: auto;
    952     line-height: 1.6363636363;
    953 }
    954 
    955 .primary-navigation ul ul ul {
    956     left: -999em;
    957     top: 0;
    958 }
    959 
    960 .primary-navigation ul ul a {
    961     padding: 9px 12px;
    962     white-space: normal;
    963     width: 148px;
    964 }
    965 
    966 .primary-navigation li:hover > a {
    967     background-color: #24890d;
    968     color: #fff;
    969 }
    970 
    971 .primary-navigation ul ul a:hover {
    972     background-color: #000;
    973 }
    974 
    975 .primary-navigation ul li:hover > ul,
    976 .primary-navigation ul li.focus > ul {
    977     left: auto;
    978 }
    979 
    980 .primary-navigation ul ul li:hover > ul,
    981 .primary-navigation ul ul li.focus > ul {
    982     left: 100%;
    983 }
    984 
    985 /* Secondary Navigation */
    986 
    987 .secondary-navigation {
    988     border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    989     font-size: 14px;
    990     margin: 0 auto 48px;
    991     max-width: 474px;
    992 }
    993 
    994 .secondary-navigation a {
    995     display: block;
    996     padding: 7px 0;
    997 }
    998 
    999 .secondary-navigation a:hover {
    1000     color: #55d737;
    1001 }
    1002 
    1003 .secondary-navigation ul {
    1004     margin: 0;
    1005 }
    1006 
    1007 .secondary-navigation ul ul {
    1008     margin-left: 20px;
    1009 }
    1010 
    1011 .secondary-navigation li {
    1012     border-top: 1px solid rgba(255, 255, 255, 0.4);
    1013 }
    1014 
    1015 .secondary-navigation li li {
    1016     border-top: 1px solid rgba(255, 255, 255, 0.2);
    1017 }
    1018 
    1019 /* Mobile Navigations */
    1020 
    1021 #mobile-navigations {
    1022     margin: 1px auto 0;
    1023     max-width: 474px;
    1024 }
    1025 
    1026 .mobile-navigation {
    1027878    background-color: #000;
    1028879    -webkit-box-sizing: border-box;
    … …  
    1030881    box-sizing:         border-box;
    1031882    font-size: 14px;
    1032     padding: 24px 10px 0;
    1033 }
    1034 
    1035 .mobile-navigation ul {
     883    margin: 0 auto;
     884    padding-top: 24px;
     885}
     886
     887.primary-navigation.toggled-on {
     888    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
     889    margin-bottom: 36px;
     890    padding-top: 72px;
     891}
     892
     893.primary-navigation .nav-menu {
     894    display: none;
     895}
     896
     897.primary-navigation.toggled-on .nav-menu {
     898    display: block;
     899}
     900
     901.primary-navigation ul {
     902    list-style: none;
    1036903    margin: 0;
    1037 }
    1038 
    1039 .mobile-navigation li {
    1040     border-top: 1px solid rgba(255, 255, 255, 0.4);
    1041 }
    1042 
    1043 .mobile-navigation li li {
     904    padding-left: 0;
     905}
     906
     907.primary-navigation li {
    1044908    border-top: 1px solid rgba(255, 255, 255, 0.2);
    1045909}
    1046910
    1047 .mobile-navigation ul ul li {
     911.primary-navigation ul ul li {
    1048912    margin-left: 15px;
    1049913}
    1050914
    1051 .mobile-navigation a {
     915.primary-navigation a {
     916    color: #fff;
    1052917    display: block;
    1053918    padding: 7px 0;
    … …  
    1055920}
    1056921
    1057 .mobile-navigation a:hover {
     922.primary-navigation a:hover {
    1058923    color: rgba(255, 255, 255, 0.7);
    1059924}
    1060925
    1061 #nav-toggle {
     926/* Secondary Navigation */
     927
     928.secondary-navigation {
     929    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     930    font-size: 14px;
     931    margin: 48px 0 0;
     932}
     933
     934.secondary-navigation a {
     935    display: block;
     936    padding: 8px 0 9px;
     937}
     938
     939.secondary-navigation a:hover {
     940    color: #55d737;
     941}
     942
     943.secondary-navigation ul {
     944    margin: 0;
     945}
     946
     947.secondary-navigation ul ul {
     948    margin-left: 20px;
     949}
     950
     951.secondary-navigation li {
     952    border-top: 1px solid rgba(255, 255, 255, 0.2);
     953}
     954
     955.menu-toggle {
    1062956    background-color: #000;
    1063957    cursor: pointer;
    1064     line-height: 1;
     958    font-size: 0;
     959    height: 16px;
     960    margin: 0;
    1065961    padding: 16px;
    1066962    position: absolute;
    … …  
    1069965}
    1070966
    1071 #nav-toggle:before {
     967.menu-toggle:before {
    1072968    color: #fff;
    1073969    content: "\f419";
    … …  
    11121008    background-attachment: fixed;
    11131009    background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
    1114     background-image:         linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%);
    11151010    background-size: 4px 4px;
    11161011    display: none;
    11171012    float: none;
     1013    height: auto;
    11181014    margin: 0;
    11191015    min-height: 180px;
    11201016    position: relative;
    11211017    width: 100%;
    1122     height: auto;
    11231018    z-index: 0;
    11241019}
    … …  
    11281023    background-attachment: fixed;
    11291024    background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
    1130     background-image:         linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%);
    11311025    background-size: 4px 4px;
    11321026}
    … …  
    12801174    border-bottom: 10px solid transparent;
    12811175    content: "";
     1176    height: 0;
    12821177    position: absolute;
    12831178    top: 0;
    12841179    left: -8px;
    12851180    width: 0;
    1286     height: 0;
    12871181}
    12881182
    … …  
    12961190    border-radius: 50%;
    12971191    content: "";
     1192    height: 4px;
    12981193    position: absolute;
    12991194    top: 8px;
    13001195    left: -2px;
    13011196    width: 4px;
    1302     height: 4px;
    13031197}
    13041198
    … …  
    14271321    border: 1px solid #fff;
    14281322    display: inline-block;
     1323    height: 22px;
    14291324    margin: 0 1px 2px 0;
    14301325    text-align: center;
    14311326    width: 22px;
    1432     height: 22px;
    14331327}
    14341328
    … …  
    14471341
    14481342.page-links > span.page-links-title {
     1343    height: auto;
    14491344    margin: 0;
    14501345    padding-right: 9px;
    14511346    width: auto;
    1452     height: auto;
    14531347}
    14541348
    … …  
    19441838.comment-author .avatar {
    19451839    border: 1px solid rgba(0, 0, 0, 0.1);
     1840    height: 18px;
    19461841    padding: 2px;
    19471842    position: absolute;
    … …  
    19491844    left: 0;
    19501845    width: 18px;
    1951     height: 18px;
    19521846}
    19531847
    … …  
    20811975#secondary {
    20821976    background-color: #000;
    2083     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     1977    border-top: 1px solid #000;
    20841978    clear: both;
    20851979    color: rgba(255, 255, 255, 0.55);
    20861980    font-size: 14px;
    20871981    line-height: 1.2857142857;
     1982    margin-top: -1px;
    20881983    padding: 0 10px;
    20891984    position: relative;
    … …  
    21452040.widget {
    21462041    margin: 0 auto 48px;
    2147     max-width: 474px;
    2148     overflow: hidden;
     2042    width: 100%;
    21492043}
    21502044
    … …  
    22402134}
    22412135
     2136.footer-sidebar .widget_calendar tbody a,
     2137.footer-sidebar .widget_calendar tbody a:hover,
     2138.primary-sidebar .widget_calendar tbody a,
     2139.primary-sidebar .widget_calendar tbody a:hover {
     2140    color: #fff;
     2141}
     2142
    22422143.widget_calendar #prev {
    22432144    padding-left: 5px;
    … …  
    25302431 */
    25312432
     2433#supplementary {
     2434    padding: 0 10px;
     2435}
     2436
    25322437.site-footer {
    25332438    background-color: #000;
    … …  
    25382443}
    25392444
    2540 .site-footer .widget {
    2541     -webkit-box-sizing: border-box;
    2542     -moz-box-sizing:    border-box;
    2543     box-sizing:         border-box;
    2544     float: left;
    2545     padding: 0 30px;
    2546     width: 315px;
    2547 }
    2548 
    25492445.footer-sidebar {
    25502446    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    2551     padding: 48px 10px 0;
     2447    padding-top: 48px;
    25522448}
    25532449
    … …  
    28882784    }
    28892785
    2890     #secondary {
    2891         padding: 0 30px;
    2892     }
    2893 
    28942786    .content-sidebar {
    28952787        border: 0;
    … …  
    29182810}
    29192811
    2920 @media screen and (min-width: 770px) {
     2812@media screen and (min-width: 782px) {
    29212813    .header-main {
     2814        padding: 0 0 0 30px;
     2815    }
     2816
     2817    .search-toggle {
    29222818        margin-right: 0;
    29232819    }
    29242820
     2821    /* Fixed Header */
     2822
     2823    .masthead-fixed .site-header {
     2824        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
     2825        position: fixed;
     2826        top: 0;
     2827    }
     2828
     2829    .admin-bar.masthead-fixed .site-header {
     2830        top: 28px;
     2831    }
     2832
     2833    .admin-bar.mp6.masthead-fixed .site-header {
     2834        top: 32px;
     2835    }
     2836
     2837    .masthead-fixed .site-main {
     2838        margin-top: 48px;
     2839    }
     2840
     2841    /* Primary Navigation */
     2842
    29252843    .primary-navigation {
     2844        float: right;
     2845        font-size: 11px;
     2846        margin: 0 10px 0 -10px;
     2847        padding: 0;
     2848        text-transform: uppercase;
     2849    }
     2850
     2851    .primary-navigation .menu-toggle {
     2852        display: none;
     2853        padding: 0;
     2854    }
     2855
     2856    .primary-navigation .nav-menu {
    29262857        display: block;
     2858    }
     2859
     2860    .primary-navigation.toggled-on {
     2861        border-bottom: 0;
     2862        margin: 0;
     2863        padding: 0;
     2864    }
     2865
     2866    .primary-navigation li {
     2867        border: 0;
     2868        display: inline-block;
     2869        height: 48px;
     2870        line-height: 48px;
     2871        position: relative;
     2872    }
     2873
     2874    .primary-navigation a {
     2875        display: inline-block;
     2876        padding: 0 10px;
     2877        white-space: nowrap;
     2878    }
     2879
     2880    .primary-navigation ul ul {
     2881        background-color: #24890d;
     2882        float: left;
     2883        position: absolute;
     2884        top: 48px;
     2885        left: -999em;
     2886        z-index: 99999;
     2887    }
     2888
     2889    .primary-navigation li li {
     2890        border: 0;
     2891        display: block;
     2892        height: auto;
     2893        line-height: 1.0909090909;
     2894    }
     2895
     2896    .primary-navigation ul ul ul {
     2897        left: -999em;
     2898        top: 0;
     2899    }
     2900
     2901    .primary-navigation ul ul li {
     2902        margin: 0;
     2903    }
     2904
     2905    .primary-navigation ul ul a {
     2906        padding: 18px 12px;
     2907        white-space: normal;
     2908        width: 144px;
     2909    }
     2910
     2911    .primary-navigation li:hover > a {
     2912        background-color: #24890d;
     2913        color: #fff;
     2914    }
     2915
     2916    .primary-navigation ul ul a:hover {
     2917        background-color: #41a62a;
     2918    }
     2919
     2920    .primary-navigation ul li:hover > ul,
     2921    .primary-navigation ul li.focus > ul {
     2922        left: auto;
     2923    }
     2924
     2925    .primary-navigation ul ul li:hover > ul,
     2926    .primary-navigation ul ul li.focus > ul {
     2927        left: 100%;
     2928    }
     2929
     2930    .primary-navigation li .current_page_item > a,
     2931    .primary-navigation li .current_page_ancestor > a,
     2932    .primary-navigation li .current-menu-item > a,
     2933    .primary-navigation li .current-menu-ancestor > a {
     2934        background-color: #000;
    29272935    }
    29282936
    … …  
    30023010
    30033011    .comment-author .avatar {
     3012        height: 34px;
    30043013        top: 2px;
    30053014        width: 34px;
    3006         height: 34px;
    30073015    }
    30083016
    … …  
    30323040
    30333041@media screen and (min-width: 1008px) {
    3034     .header-main {
    3035         padding-left: 30px;
    3036     }
    3037 
    30383042    .search-box-wrapper {
    30393043        padding-left: 182px;
    … …  
    30733077    #secondary {
    30743078        background-color: transparent;
    3075         border-bottom: 0;
     3079        border-top: 0;
    30763080        clear: none;
    30773081        float: left;
    … …  
    30803084        margin: 0 0 0 -100%;
    30813085        min-height: 100vh;
     3086        padding: 0 30px;
    30823087        width: 122px;
    30833088    }
    … …  
    31163121        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    31173122        font-size: 11px;
     3123        margin: 0 0 48px;
    31183124    }
    31193125
    … …  
    31273133        border-top: 1px solid rgba(255, 255, 255, 0.2);
    31283134        position: relative;
    3129     }
    3130 
    3131     .secondary-navigation a {
    3132         padding: 8px 0 9px;
    31333135    }
    31343136
    … …  
    31593161    }
    31603162
     3163    #supplementary {
     3164        padding: 0;
     3165    }
     3166
    31613167    .footer-sidebar {
    31623168        font-size: 11px;
    31633169        line-height: 1.6363636363;
    3164         padding: 48px 0 0;
     3170    }
     3171
     3172    .site-footer .widget {
     3173        -webkit-box-sizing: border-box;
     3174        -moz-box-sizing:    border-box;
     3175        box-sizing:         border-box;
     3176        float: left;
     3177        padding: 0 30px;
     3178        width: 25%;
    31653179    }
    31663180
Note: See TracChangeset for help on using the changeset viewer.