diff --git a/functions.php b/functions.php index 42c562e..55817ef 100644 --- a/functions.php +++ b/functions.php @@ -156,3 +156,18 @@ function load_dashicons() wp_enqueue_style('dashicons'); } add_action('wp_enqueue_scripts', 'load_dashicons'); + +/** + * Custom js connections + */ +function enqueue_child_theme_scripts() +{ + wp_enqueue_script( + 'custom-script', + get_stylesheet_directory_uri() . '/js/custom.js', + [], // Dependencies (e.g. jQuery) + null, // Version (null for automatic) + true // Include in footer (true) or head (false) + ); +} +add_action('wp_enqueue_scripts', 'enqueue_child_theme_scripts'); diff --git a/js/custom.js b/js/custom.js new file mode 100644 index 0000000..86a7f7a --- /dev/null +++ b/js/custom.js @@ -0,0 +1,25 @@ +function toggleMenu() { + const menu = document.getElementById('primary-menu') + const container = document.getElementById('main-nav') + const viewport = window.innerWidth + const navbar = document.querySelector('#main-nav') + + let menuWidth = 0 + const menuItems = menu.querySelectorAll(':scope > li') + menuItems.forEach((item) => { + menuWidth += item.offsetWidth + }) + + const containerWidth = container.offsetWidth + + if (viewport > 1300 && menuWidth > containerWidth - 250) { + navbar.classList.add('menu-hidden') + } else if (viewport > 1000 && menuWidth > containerWidth - 200) { + navbar.classList.add('menu-hidden') + } else { + navbar.classList.remove('menu-hidden') + } +} + +window.addEventListener('load', toggleMenu) +window.addEventListener('resize', toggleMenu) diff --git a/scss/_fixes.scss b/scss/_fixes.scss index 2fd338a..75fb846 100644 --- a/scss/_fixes.scss +++ b/scss/_fixes.scss @@ -7,6 +7,64 @@ hr.wp-block-separator { background-color: $gray; // Fixes the separator block being hidden } +.wp-block-button__link { + color: $khpi-black-50 !important; +} + +.wp-block-button__link:hover { + color: $khpi-black-900 !important; + text-decoration: none !important; +} + +/*-------------------------------------------------------------- +# Typography +--------------------------------------------------------------*/ +h1, +h2, +h3, +h4, +h5, +h6 { + color: $khpi-black-900; + font-weight: 600; +} + +p { + color: $khpi-black-900; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0 0 7px 0; +} + +/*-------------------------------------------------------------- +# Forms +--------------------------------------------------------------*/ +button:hover, +a.button:hover, +input[type='button']:hover, +input[type='reset']:hover, +input[type='submit']:hover { + color: $khpi-black-900; +} + +button:focus, +input[type='button']:focus, +input[type='reset']:focus, +input[type='submit']:focus, +button:active, +input[type='button']:active, +input[type='reset']:active, +input[type='submit']:active { + color: $khpi-black-900; +} + /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ @@ -27,12 +85,23 @@ hr.wp-block-separator { top: 16px; } +/** pagination **/ +.post-navigation .nav-links a, +.post-navigation .nav-links a:hover { + color: $khpi-red-900; +} + /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ +.entry-footer, +.entry-footer a { + color: $khpi-blue-900 !important; +} + #primary article.hentry { box-shadow: none; // Removes border on main page content padding: 0; @@ -135,6 +204,12 @@ a.custom-logo-link { background-color: $blue; } +.search-form .search-submit:hover, +.search-form .search-submit:focus { + color: $khpi-red-900; + background: none; +} + /*-------------------------------------------------------------- ## Social Links Style By WEN Themes --------------------------------------------------------------*/ @@ -163,7 +238,14 @@ a.custom-logo-link { background: rgba(160, 0, 27, 1) none repeat scroll 0 0; // Same as $khpi-red-900 but rgba } -.slider-buttons a { +.slider-buttons .button-primary { + background: $khpi-red-900; + border-color: $khpi-red-900; +} + +.slider-buttons a:hover { + opacity: 1; + background: $khpi-yellow-500; color: $black; // Replacing colors to improve contrast } @@ -182,6 +264,16 @@ a.custom-logo-link { padding: 0; } +.sidebar .widget a, +.sidebar .widget a:visited { + color: $khpi-red-900; +} + +.sidebar .widget a:hover, +.sidebar .widget a:active { + color: $khpi-red-400; +} + /*-------------------------------------------------------------- ## Footer Style By WEN Themes --------------------------------------------------------------*/ @@ -204,6 +296,7 @@ a.custom-logo-link { /*Basic Breadcrumb */ #breadcrumb { color: $khpi-yellow-200; + padding: 10px 0; } #breadcrumb a:hover, @@ -337,14 +430,6 @@ a.custom-logo-link { } } -/* All Mobile Sizes (devices and browser) */ -@media only screen and (max-width: 767px) { - /*footer widget area*/ - .slider-buttons a { - color: $black; // Replacing colors to improve contrast - } -} - /*-------------------------------------------------------------- ## New design --------------------------------------------------------------*/ @@ -388,7 +473,7 @@ a.custom-logo-link { a:hover, a:focus, a:active { - color: $khpi-red-400; + text-decoration: underline; } } @@ -405,3 +490,10 @@ a.custom-logo-link { background-color: $khpi-black-200; } } + +// hide search field on menu items overflowing +#main-nav.menu-hidden { + .header-search-box { + display: none; + } +}