mirror of
https://github.com/WordPress/WordPress.git
synced 2025-02-02 05:31:25 +01:00
Twenty Fourteen: further revise primary navigation functionality, simplify mobile navigation, and clean up the main JS file. Props obenland, iamtakashi. See #25554.
Built from https://develop.svn.wordpress.org/trunk@25864 git-svn-id: http://core.svn.wordpress.org/trunk@25864 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett
parent
3b7e540f00
commit
d8ba6cde31
@ -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';
|
||||
|
||||
|
||||
@ -39,21 +39,17 @@
|
||||
<div class="header-main">
|
||||
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
|
||||
|
||||
<div class="header-extra">
|
||||
<div class="search-toggle">
|
||||
<a href="#search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
|
||||
</div>
|
||||
<div class="search-toggle">
|
||||
<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
|
||||
</div>
|
||||
|
||||
<nav role="navigation" class="site-navigation primary-navigation">
|
||||
<h1 class="screen-reader-text"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
|
||||
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a></a>
|
||||
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
|
||||
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
|
||||
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
|
||||
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
|
||||
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div id="mobile-navigations" class="hide"></div>
|
||||
|
||||
<div id="search-container" class="search-box-wrapper hide">
|
||||
<div class="search-box clear">
|
||||
<?php get_search_form(); ?>
|
||||
|
||||
@ -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,
|
||||
|
||||
101
wp-content/themes/twentyfourteen/js/functions.js
Normal file
101
wp-content/themes/twentyfourteen/js/functions.js
Normal file
@ -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 );
|
||||
@ -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 )
|
||||
$( '<span id="nav-toggle" class="genericon" />' ).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 );
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user