fix: add some design of changes by Valentin

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');

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)

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;
+    }
+}