WordPress.org
Get WordPress

Make WordPress Core

Changeset 25864


Ignore:
Timestamp:
10/22/2013 04:36:26 PM (13 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.