From ea64c830f4a73bd91aa6aa70e3bf2fb089704cb6 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Tue, 22 Oct 2013 16:36:26 +0000 Subject: [PATCH] Twenty Fourteen: further revise primary navigation functionality, simplify mobile navigation, and clean up the main JS file. Props obenland, iamtakashi. See #25554. git-svn-id: https://develop.svn.wordpress.org/trunk@25864 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentyfourteen/functions.php | 7 +- .../themes/twentyfourteen/header.php | 16 +- .../themes/twentyfourteen/inc/customizer.php | 13 +- .../themes/twentyfourteen/js/functions.js | 101 +++++ .../themes/twentyfourteen/js/theme.js | 124 ------ src/wp-content/themes/twentyfourteen/rtl.css | 31 +- .../themes/twentyfourteen/style.css | 404 +++++++++--------- 7 files changed, 346 insertions(+), 350 deletions(-) create mode 100644 src/wp-content/themes/twentyfourteen/js/functions.js delete mode 100644 src/wp-content/themes/twentyfourteen/js/theme.js diff --git a/src/wp-content/themes/twentyfourteen/functions.php b/src/wp-content/themes/twentyfourteen/functions.php index 95e1a1f411..12591ef68f 100644 --- a/src/wp-content/themes/twentyfourteen/functions.php +++ b/src/wp-content/themes/twentyfourteen/functions.php @@ -239,7 +239,7 @@ function twentyfourteen_scripts() { if ( is_active_sidebar( 'sidebar-3' ) ) wp_enqueue_script( 'jquery-masonry' ); - wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true ); + wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131011', true ); // Add Lato font used in the main stylesheet. wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null ); @@ -374,6 +374,11 @@ function twentyfourteen_body_classes( $classes ) { if ( is_multi_author() ) $classes[] = 'group-blog'; + if ( get_header_image() ) + $classes[] = 'header-image'; + else + $classes[] = 'masthead-fixed'; + if ( is_archive() || is_search() || is_home() ) $classes[] = 'list-view'; diff --git a/src/wp-content/themes/twentyfourteen/header.php b/src/wp-content/themes/twentyfourteen/header.php index 99801504a6..e2253ba99e 100644 --- a/src/wp-content/themes/twentyfourteen/header.php +++ b/src/wp-content/themes/twentyfourteen/header.php @@ -39,21 +39,17 @@

-
-
- -
+
+
-
-
-
diff --git a/src/wp-content/themes/twentyfourteen/inc/customizer.php b/src/wp-content/themes/twentyfourteen/inc/customizer.php index 80e922b243..fd5b4461ff 100644 --- a/src/wp-content/themes/twentyfourteen/inc/customizer.php +++ b/src/wp-content/themes/twentyfourteen/inc/customizer.php @@ -126,15 +126,19 @@ function twentyfourteen_customizer_styles() { input[type="button"], input[type="reset"], input[type="submit"], - .header-extra, .search-toggle, - .primary-navigation ul ul, - .primary-navigation li:hover > a, .hentry .mejs-controls .mejs-time-rail .mejs-time-current, .widget_calendar tbody a { background-color: ' . $accent_color . '; } + @media screen and (min-width: 782px) { + .primary-navigation ul ul, + .primary-navigation li:hover > a { + background-color: ' . $accent_color . '; + } + } + ::-moz-selection { background: ' . $accent_color . '; } @@ -160,6 +164,7 @@ function twentyfourteen_customizer_styles() { .search-toggle:hover, .search-toggle.active, .search-box, + .primary-navigation ul ul a:hover, .widget_calendar tbody a:hover { background-color: ' . $accent_lighter . '; } @@ -178,7 +183,9 @@ function twentyfourteen_customizer_styles() { a:focus, a:active, .site-navigation .current_page_item > a, + .site-navigation .current_page_ancestor > a, .site-navigation .current-menu-item > a, + .site-navigation .current-menu-ancestor > a, .secondary-navigation a:hover, .entry-title a:hover, .cat-links a:hover, diff --git a/src/wp-content/themes/twentyfourteen/js/functions.js b/src/wp-content/themes/twentyfourteen/js/functions.js new file mode 100644 index 0000000000..b840cd1d36 --- /dev/null +++ b/src/wp-content/themes/twentyfourteen/js/functions.js @@ -0,0 +1,101 @@ +( function( $ ) { + var body = $( 'body' ), + _window = $( window ); + + /** + * Enables menu toggle for small screens. + */ + ( function() { + var nav = $( '#primary-navigation' ), button, menu; + if ( ! nav ) + return; + + button = nav.find( '.menu-toggle' ); + if ( ! button ) + return; + + // Hide button if menu is missing or empty. + menu = nav.find( '.nav-menu' ); + if ( ! menu || ! menu.children().length ) { + button.hide(); + return; + } + + $( '.menu-toggle' ).on( 'click.twentyfourteen', function() { + nav.toggleClass( 'toggled-on' ); + } ); + } )(); + + /** + * Makes "skip to content" link work correctly in IE9 and Chrome for better + * accessibility. + * + * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/ + */ + _window.on( 'hashchange.twentyfourteen', function() { + var element = document.getElementById( location.hash.substring( 1 ) ); + + if ( element ) { + if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) + element.tabIndex = -1; + + element.focus(); + }; + } ); + + $( function() { + /** + * Search toggle. + */ + $( '.search-toggle' ).on( 'click.twentyfourteen', function() { + var that = $( this ), + wrapper = $( '.search-box-wrapper' ); + + that.toggleClass( 'active' ); + wrapper.toggleClass( 'hide' ); + + if ( that.is( '.active' ) ) + wrapper.find( '.search-field' ).focus(); + } ); + + /** + * Fixed navbar. + * + * The callback on the scroll event is only added if there is a header + * image and we are not on mobile. + */ + if ( body.is( '.header-image' ) && _window.width() > 781 ) { + var toolbarOffset = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0, + mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset; + + _window.on( 'scroll.twentyfourteen', function() { + if ( window.scrollY > mastheadOffset ) + body.addClass( 'masthead-fixed' ); + else + body.removeClass( 'masthead-fixed' ); + } ); + } + + /** + * Focus styles for primary menu. + */ + $( '.primary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() { + $( this ).parents().toggleClass( 'focus' ); + } ); + } ); + + /** + * Arranges footer widgets vertically. + */ + if ( $.isFunction( $.fn.masonry ) ) { + $( '#footer-sidebar' ).masonry( { + itemSelector: '.widget', + columnWidth: function( containerWidth ) { + return containerWidth / 4; + }, + gutterWidth: 0, + isResizable: true, + isRTL: $( 'body' ).is( '.rtl' ) + } ); + } +} )( jQuery ); \ No newline at end of file diff --git a/src/wp-content/themes/twentyfourteen/js/theme.js b/src/wp-content/themes/twentyfourteen/js/theme.js deleted file mode 100644 index f8aaa47d86..0000000000 --- a/src/wp-content/themes/twentyfourteen/js/theme.js +++ /dev/null @@ -1,124 +0,0 @@ -( function( $ ) { - - $( document ).ready( function() { - - var $primaryNaviClone, - $secondaryNaviClone, - $masthead = $( '#masthead' ), - $secondaryTop = $( '#secondary-top' ), - $mobileNavigations = $( '#mobile-navigations'), - $searchBoxWrapper = $( 'div.search-box-wrapper' ), - $searchToggle = $( 'div.search-toggle' ), - timeout = false; - - // Toggle function. - function menuToggle() { - $( 'span#nav-toggle' ).toggleClass( 'active' ); - $masthead.find( '#mobile-navigations' ).toggleClass( 'hide' ); - } - - // Click event for toggle the search - $searchToggle.click( function() { - $( this ).toggleClass( 'active' ); - $searchBoxWrapper.toggleClass( 'hide' ); - - if ( $( this ).hasClass( 'active' ) ) - $searchBoxWrapper.find( '.search-field' ).focus(); - } ); - - // DOM manipulations for mobile header - function mobileHeader() { - // Check if the toggler exists. If not add it. - if ( ! $( '#nav-toggle' ).length ) - $( '' ).appendTo( $masthead ); - - // Clone and detach the primary navigation for use later - $primaryNaviClone = $masthead.find( 'nav.primary-navigation' ).detach(); - - // Clone and detach the secondary navigation for use later - $secondaryNaviClone = $secondaryTop.find( 'nav.secondary-navigation' ).detach(); - - // Prepend the primary navigation clone to #mobile-navigations and remove the class and add an id - $primaryNaviClone.prependTo( $mobileNavigations ).removeClass( 'primary-navigation' ).addClass( 'mobile-navigation' ).attr( 'id', 'primary-mobile-navigation' ); - - // Append the secondary navigation clone to #mobile-navigations and remove the class and add an id - $secondaryNaviClone.appendTo( $mobileNavigations ).removeClass( 'secondary-navigation' ).addClass( 'mobile-navigation' ).attr( 'id', 'secondary-mobile-navigation' ); - - // Remove the click event first and bind it after to make sure it's invoked once. - $( 'span#nav-toggle' ).off( 'click', menuToggle ).click( menuToggle ); - }; - - // DOM manupilations for desktop header - function normalHeader() { - // Check if the toggler exists. If it does remove it. - if ( $( 'span#nav-toggle').length ) - $( 'span#nav-toggle' ).remove(); - - // Clone and detach the primary mobile navigation for use later - $primaryNaviClone = $mobileNavigations.find( '#primary-mobile-navigation' ).detach(); - - // Clone and detach the secondary mobile navigation for use later - $secondaryNaviClone = $mobileNavigations.find( '#secondary-mobile-navigation' ).detach(); - - // Append the secondary navigation clone to #mobile-navigations and remove the class and add an id - $primaryNaviClone.appendTo( '.header-main' ).removeClass( 'mobile-navigation' ).removeAttr( 'id' ).addClass( 'primary-navigation' ); - - // Append the secondary navigation clone to #mobile-navigations and remove the class and add an id - $secondaryNaviClone.appendTo( $secondaryTop ).removeClass( 'mobile-navigation' ).removeAttr( 'id' ).addClass( 'secondary-navigation' ); - }; - - // Check viewport width when user resizes the browser window. - $( window ).resize( function() { - if ( false !== timeout ) - clearTimeout( timeout ); - - timeout = setTimeout( function() { - if ( $( window ).width() < 770 ) { - mobileHeader(); - } else { - normalHeader(); - } - }, 100 ); - - } ).resize(); - - // Sticky header. - var $mastheadOffset = -1, - $toolbarOffset = $( 'body' ).is( '.admin-bar' ) ? 32 : 0, - $maindiv = $( '#main' ); - - $( window ).on( 'scroll', false, function() { - if ( $mastheadOffset < 0 ) - $mastheadOffset = $masthead.offset().top - $toolbarOffset; - - if ( ( window.scrollY > $mastheadOffset ) && ( $( window ).width() > 769 ) ) { - $masthead.addClass( 'masthead-fixed' ); - $maindiv.css( { - marginTop: $masthead.height() - } ); - } else { - $masthead.removeClass( 'masthead-fixed' ); - $maindiv.css( { - marginTop: 0 - } ); - } - } ); - - // Arranges footer widgets vertically. - if ( $.isFunction( $.fn.masonry ) ) { - - $( '#footer-sidebar' ).masonry( { - itemSelector: '.widget', - columnWidth: 315, - gutterWidth: 0, - isRTL: $( 'body' ).is( '.rtl' ) - } ); - } - - } ); - - /* Focus styles for primary menu. */ - $( '.primary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() { - $( this ).parents().toggleClass( 'focus' ); - }); -} )( jQuery ); \ No newline at end of file diff --git a/src/wp-content/themes/twentyfourteen/rtl.css b/src/wp-content/themes/twentyfourteen/rtl.css index 4821067a3f..1b43899f8d 100644 --- a/src/wp-content/themes/twentyfourteen/rtl.css +++ b/src/wp-content/themes/twentyfourteen/rtl.css @@ -59,22 +59,17 @@ li > ol { /* =Header ----------------------------------------------- */ -.header-main { - margin-left: 48px; - padding-right: 10px; - padding-left: 0; - margin-right: auto; -} - -.header-extra { +.search-toggle { float: left; + margin-left: 38px; + margin-right: auto; } .site-title { float: right; } -#nav-toggle { +.menu-toggle { left: 0; right: auto; } @@ -93,18 +88,17 @@ li > ol { ----------------------------------------------- */ /* Primary Navigation */ -.primary-navigation { - float: left; - margin: 0 -10px 0 10px; -} - .primary-navigation ul { padding-right: 0; padding-left: 0; } +.primary-navigation ul ul li { + margin-left: auto; + margin-right: 15px; +} + .primary-navigation ul ul { - float: right; right: -999em; left: auto; } @@ -493,10 +487,13 @@ blockquote.alignleft { } } -@media screen and (min-width: 770px) { +@media screen and (min-width: 782px) { .header-main { + padding: 0 27px 0 0; + } + + .search-toggle { margin-left: 0; - margin-right: auto; } } diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css index 7b2b63e5e4..337a59bd91 100644 --- a/src/wp-content/themes/twentyfourteen/style.css +++ b/src/wp-content/themes/twentyfourteen/style.css @@ -411,6 +411,7 @@ textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */ } button, @@ -728,6 +729,7 @@ img.wp-smiley { .comment-reply-link:before, .comment-reply-login:before, .contributor-posts-link:before, +.menu-toggle:before, .search-toggle:before, .widget_twentyfourteen_ephemera .widget-title:before { -webkit-font-smoothing: antialiased; @@ -785,14 +787,8 @@ span + .edit-link:before, } .header-main { - margin-right: 48px; min-height: 48px; - padding-left: 10px; -} - -.header-extra { - background-color: #24890d; - float: right; + padding: 0 10px; } .site-title { @@ -812,20 +808,12 @@ span + .edit-link:before, .search-toggle { background-color: #24890d; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #fff; cursor: pointer; - display: block; - float: left; - font-size: 10px; - min-width: 70px; - min-height: 48px; - padding: 25px 10px 0; - position: relative; + float: right; + height: 48px; + margin-right: 38px; text-align: center; - text-transform: uppercase; + width: 48px; } .search-toggle:hover, @@ -836,22 +824,15 @@ span + .edit-link:before, .search-toggle:before { color: #fff; content: "\f400"; - margin-left: -8px; - position: absolute; - top: 9px; - left: 50%; -} - -.search-toggle a, -.search-toggle a:hover { - color: #fff; + font-size: 20px; + margin-top: 14px; } .search-box-wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - position: absolute; + position: relative; width: 100%; z-index: 2; } @@ -865,24 +846,8 @@ span + .edit-link:before, float: right; font-size: 13px; margin: 12px 10px; - padding: 3px 6px; - width: 326px; -} - -/* Fixed Header */ - -.site-header.masthead-fixed { - box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); - position: fixed; - top: 0; -} - -.admin-bar .site-header.masthead-fixed { - top: 28px; -} - -.admin-bar.mp6 .site-header.masthead-fixed { - top: 32px; + padding: 3px 2px 3px 6px; + width: 240px; } @@ -897,7 +862,9 @@ span + .edit-link:before, } .site-navigation .current_page_item > a, -.site-navigation .current-menu-item > a { +.site-navigation .current_page_ancestor > a, +.site-navigation .current-menu-item > a, +.site-navigation .current-menu-ancestor > a { color: #55d737; } @@ -908,92 +875,65 @@ span + .edit-link:before, /* Primary Navigation */ .primary-navigation { + background-color: #000; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 14px; + margin: 0 auto; + padding-top: 24px; +} + +.primary-navigation.toggled-on { + border-bottom: 1px solid rgba(255, 255, 255, 0.4); + margin-bottom: 36px; + padding-top: 72px; +} + +.primary-navigation .nav-menu { display: none; - float: right; - font-size: 11px; - line-height: 1.6363636363; - margin: 0 10px 0 -10px; +} + +.primary-navigation.toggled-on .nav-menu { + display: block; } .primary-navigation ul { + list-style: none; margin: 0; padding-left: 0; } .primary-navigation li { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - height: 48px; - line-height: 48px; - position: relative; + border-top: 1px solid rgba(255, 255, 255, 0.2); +} + +.primary-navigation ul ul li { + margin-left: 15px; } .primary-navigation a { - display: inline-block; - padding: 0 10px; - text-decoration: none; - white-space: nowrap; -} - -.primary-navigation ul ul { - background-color: #24890d; - float: left; - position: absolute; - top: 48px; - left: -999em; - z-index: 99999; -} - -.primary-navigation li li { - display: block; - height: auto; - line-height: 1.6363636363; -} - -.primary-navigation ul ul ul { - left: -999em; - top: 0; -} - -.primary-navigation ul ul a { - padding: 9px 12px; - white-space: normal; - width: 148px; -} - -.primary-navigation li:hover > a { - background-color: #24890d; color: #fff; + display: block; + padding: 7px 0; + text-decoration: none; } -.primary-navigation ul ul a:hover { - background-color: #000; -} - -.primary-navigation ul li:hover > ul, -.primary-navigation ul li.focus > ul { - left: auto; -} - -.primary-navigation ul ul li:hover > ul, -.primary-navigation ul ul li.focus > ul { - left: 100%; +.primary-navigation a:hover { + color: rgba(255, 255, 255, 0.7); } /* Secondary Navigation */ .secondary-navigation { - border-bottom: 1px solid rgba(255, 255, 255, 0.4); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; - margin: 0 auto 48px; - max-width: 474px; + margin: 48px 0 0; } .secondary-navigation a { display: block; - padding: 7px 0; + padding: 8px 0 9px; } .secondary-navigation a:hover { @@ -1009,66 +949,22 @@ span + .edit-link:before, } .secondary-navigation li { - border-top: 1px solid rgba(255, 255, 255, 0.4); -} - -.secondary-navigation li li { border-top: 1px solid rgba(255, 255, 255, 0.2); } -/* Mobile Navigations */ - -#mobile-navigations { - margin: 1px auto 0; - max-width: 474px; -} - -.mobile-navigation { - background-color: #000; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-size: 14px; - padding: 24px 10px 0; -} - -.mobile-navigation ul { - margin: 0; -} - -.mobile-navigation li { - border-top: 1px solid rgba(255, 255, 255, 0.4); -} - -.mobile-navigation li li { - border-top: 1px solid rgba(255, 255, 255, 0.2); -} - -.mobile-navigation ul ul li { - margin-left: 15px; -} - -.mobile-navigation a { - display: block; - padding: 7px 0; - text-decoration: none; -} - -.mobile-navigation a:hover { - color: rgba(255, 255, 255, 0.7); -} - -#nav-toggle { +.menu-toggle { background-color: #000; cursor: pointer; - line-height: 1; + font-size: 0; + height: 16px; + margin: 0; padding: 16px; position: absolute; top: 0; right: 0; } -#nav-toggle:before { +.menu-toggle:before { color: #fff; content: "\f419"; } @@ -1111,15 +1007,14 @@ span + .edit-link:before, background: #767676; background-attachment: fixed; background-image: -webkit-linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%); - background-image: linear-gradient(135deg, #767676 12.5%, #fff 12.5%, #fff 50%, #767676 50%, #767676 62.5%, #fff 62.5%); background-size: 4px 4px; display: none; float: none; + height: auto; margin: 0; min-height: 180px; position: relative; width: 100%; - height: auto; z-index: 0; } @@ -1127,7 +1022,6 @@ span + .edit-link:before, background: #919191; background-attachment: fixed; background-image: -webkit-linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%); - background-image: linear-gradient(135deg, #919191 12.5%, #fff 12.5%, #fff 50%, #919191 50%, #919191 62.5%, #fff 62.5%); background-size: 4px 4px; } @@ -1279,11 +1173,11 @@ span + .edit-link:before, border-right: 8px solid #767676; border-bottom: 10px solid transparent; content: ""; + height: 0; position: absolute; top: 0; left: -8px; width: 0; - height: 0; } .tag-links a:hover:before, @@ -1295,11 +1189,11 @@ span + .edit-link:before, background-color: #fff; border-radius: 50%; content: ""; + height: 4px; position: absolute; top: 8px; left: -2px; width: 4px; - height: 4px; } @-moz-document url-prefix() { /* For Firefox to avoid jagged edge */ @@ -1426,10 +1320,10 @@ span + .edit-link:before, background: #fff; border: 1px solid #fff; display: inline-block; + height: 22px; margin: 0 1px 2px 0; text-align: center; width: 22px; - height: 22px; } .page-links a { @@ -1446,10 +1340,10 @@ span + .edit-link:before, } .page-links > span.page-links-title { + height: auto; margin: 0; padding-right: 9px; width: auto; - height: auto; } /* More link */ @@ -1943,12 +1837,12 @@ span + .edit-link:before, .comment-author .avatar { border: 1px solid rgba(0, 0, 0, 0.1); + height: 18px; padding: 2px; position: absolute; top: 0; left: 0; width: 18px; - height: 18px; } .bypostauthor .avatar { @@ -2080,11 +1974,12 @@ span + .edit-link:before, #secondary { background-color: #000; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); + border-top: 1px solid #000; clear: both; color: rgba(255, 255, 255, 0.55); font-size: 14px; line-height: 1.2857142857; + margin-top: -1px; padding: 0 10px; position: relative; z-index: 2; @@ -2144,8 +2039,7 @@ span + .edit-link:before, .widget { margin: 0 auto 48px; - max-width: 474px; - overflow: hidden; + width: 100%; } .widget p { @@ -2239,6 +2133,13 @@ span + .edit-link:before, background-color: #41a62a; } +.footer-sidebar .widget_calendar tbody a, +.footer-sidebar .widget_calendar tbody a:hover, +.primary-sidebar .widget_calendar tbody a, +.primary-sidebar .widget_calendar tbody a:hover { + color: #fff; +} + .widget_calendar #prev { padding-left: 5px; } @@ -2529,6 +2430,10 @@ span + .edit-link:before, * ----------------------------------------------------------------------------- */ +#supplementary { + padding: 0 10px; +} + .site-footer { background-color: #000; color: #949a92; @@ -2537,18 +2442,9 @@ span + .edit-link:before, z-index: 3; } -.site-footer .widget { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - float: left; - padding: 0 30px; - width: 315px; -} - .footer-sidebar { border-bottom: 1px solid rgba(255, 255, 255, 0.2); - padding: 48px 10px 0; + padding-top: 48px; } .site-info { @@ -2887,10 +2783,6 @@ span + .edit-link:before, padding-left: 30px; } - #secondary { - padding: 0 30px; - } - .content-sidebar { border: 0; float: right; @@ -2917,15 +2809,131 @@ span + .edit-link:before, } } -@media screen and (min-width: 770px) { +@media screen and (min-width: 782px) { .header-main { + padding: 0 0 0 30px; + } + + .search-toggle { margin-right: 0; } + /* Fixed Header */ + + .masthead-fixed .site-header { + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); + position: fixed; + top: 0; + } + + .admin-bar.masthead-fixed .site-header { + top: 28px; + } + + .admin-bar.mp6.masthead-fixed .site-header { + top: 32px; + } + + .masthead-fixed .site-main { + margin-top: 48px; + } + + /* Primary Navigation */ + .primary-navigation { + float: right; + font-size: 11px; + margin: 0 10px 0 -10px; + padding: 0; + text-transform: uppercase; + } + + .primary-navigation .menu-toggle { + display: none; + padding: 0; + } + + .primary-navigation .nav-menu { display: block; } + .primary-navigation.toggled-on { + border-bottom: 0; + margin: 0; + padding: 0; + } + + .primary-navigation li { + border: 0; + display: inline-block; + height: 48px; + line-height: 48px; + position: relative; + } + + .primary-navigation a { + display: inline-block; + padding: 0 10px; + white-space: nowrap; + } + + .primary-navigation ul ul { + background-color: #24890d; + float: left; + position: absolute; + top: 48px; + left: -999em; + z-index: 99999; + } + + .primary-navigation li li { + border: 0; + display: block; + height: auto; + line-height: 1.0909090909; + } + + .primary-navigation ul ul ul { + left: -999em; + top: 0; + } + + .primary-navigation ul ul li { + margin: 0; + } + + .primary-navigation ul ul a { + padding: 18px 12px; + white-space: normal; + width: 144px; + } + + .primary-navigation li:hover > a { + background-color: #24890d; + color: #fff; + } + + .primary-navigation ul ul a:hover { + background-color: #41a62a; + } + + .primary-navigation ul li:hover > ul, + .primary-navigation ul li.focus > ul { + left: auto; + } + + .primary-navigation ul ul li:hover > ul, + .primary-navigation ul ul li.focus > ul { + left: 100%; + } + + .primary-navigation li .current_page_item > a, + .primary-navigation li .current_page_ancestor > a, + .primary-navigation li .current-menu-item > a, + .primary-navigation li .current-menu-ancestor > a { + background-color: #000; + } + .attachment-featured-featured { height: 213px; } @@ -3001,9 +3009,9 @@ span + .edit-link:before, } .comment-author .avatar { + height: 34px; top: 2px; width: 34px; - height: 34px; } .comment-author, @@ -3031,10 +3039,6 @@ span + .edit-link:before, } @media screen and (min-width: 1008px) { - .header-main { - padding-left: 30px; - } - .search-box-wrapper { padding-left: 182px; } @@ -3072,13 +3076,14 @@ span + .edit-link:before, #secondary { background-color: transparent; - border-bottom: 0; + border-top: 0; clear: none; float: left; font-size: 11px; line-height: 1.6363636363; margin: 0 0 0 -100%; min-height: 100vh; + padding: 0 30px; width: 122px; } @@ -3115,6 +3120,7 @@ span + .edit-link:before, .secondary-navigation { border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 11px; + margin: 0 0 48px; } .secondary-navigation ul, @@ -3128,10 +3134,6 @@ span + .edit-link:before, position: relative; } - .secondary-navigation a { - padding: 8px 0 9px; - } - .secondary-navigation ul ul { background: rgba(0, 0, 0, 0.9); display: none; @@ -3158,10 +3160,22 @@ span + .edit-link:before, margin-bottom: 18px; } + #supplementary { + padding: 0; + } + .footer-sidebar { font-size: 11px; line-height: 1.6363636363; - padding: 48px 0 0; + } + + .site-footer .widget { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + float: left; + padding: 0 30px; + width: 25%; } .site-info {