Improve button designs from Blog section

Author: JesusValeraDev

css/components/blog.css

@@ -158,12 +158,6 @@
   margin-right: var(--space-xs);
 }
 
-.blog-tag:hover {
-  background: var(--color-light-surface-hover);
-  border-color: var(--color-light-link);
-  transform: translateY(-2px);
-}
-
 .blog-tag::after {
   display: none;
 }
@@ -197,12 +191,6 @@
   display: none;
 }
 
-.pagination a:hover {
-  background: var(--color-light-surface-hover);
-  border-color: var(--color-light-link);
-  transform: translateY(-2px);
-}
-
 .pagination a.active {
   background: var(--color-light-link);
   color: white;
@@ -213,11 +201,6 @@
   margin-right: auto;
 }
 
-.pagination a.previous::before {
-  content: '← ';
-  margin-right: var(--space-xs);
-}
-
 .pagination a.next {
   margin-left: auto;
 }

css/components/dark-mode.css

@@ -426,6 +426,38 @@
   color: var(--color-dark-text-secondary);
 }
 
+/* Dark mode blog pagination */
+.dark .pagination a {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-primary);
+}
+
+.dark .pagination a:hover {
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-light-text-accent);
+  color: var(--color-light-text-accent);
+}
+
+.dark .pagination a.active {
+  background: var(--color-light-text-accent);
+  color: var(--color-dark-bg);
+  border-color: var(--color-light-text-accent);
+}
+
+/* Dark mode blog tags */
+.dark .blog-tag {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text-secondary);
+}
+
+.dark .blog-tag:hover {
+  background: var(--color-dark-surface-hover);
+  border-color: var(--color-light-text-accent);
+  color: var(--color-light-text-accent);
+}
+
 /* Dark API Index Pills */
 .dark .api-namespace-toggle {
   border-bottom-color: var(--color-dark-border);
@@ -517,14 +549,9 @@
 
 /* Dark cards and navigation */
 .dark .related-container {
-  background: var(--color-dark-bg-secondary);
-  border-color: var(--color-dark-border);
-  box-shadow: var(--shadow-dark-sm);
-}
-
-.dark .related-container:hover {
-  box-shadow: var(--shadow-dark-md);
-  border-color: var(--color-light-text-accent);
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
 .dark .related-container .link {
@@ -533,9 +560,8 @@
 }
 
 .dark .related-container .link:hover {
-  box-shadow: var(--shadow-dark-md);
   border-color: var(--color-light-text-accent);
-  background: rgba(56, 189, 248, 0.15);
+  background: var(--color-dark-surface-hover);
 }
 
 .dark .related-container .link a {

css/components/layout.css

@@ -190,42 +190,36 @@
 @utility related-container {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--space-md);
-  margin: var(--space-3xl) 0;
-  padding: var(--space-xl);
-  background: var(--color-light-bg-secondary);
-  border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-sm);
-  transition: all var(--duration-normal) var(--ease-out);
+  gap: var(--space-lg);
+  margin: var(--space-2xl) 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  transition: none;
 }
 
 @media (min-width: 768px) {
   .related-container {
     grid-template-columns: 1fr 1fr;
+    gap: var(--space-xl);
   }
 }
 
-.related-container:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-light-link);
-}
-
 .related-container .link {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
-  padding: var(--space-lg);
+  padding: var(--space-md) var(--space-lg);
   background: var(--color-light-surface);
   border: 1px solid var(--color-light-border);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   transition: all var(--duration-fast) var(--ease-out);
   text-decoration: none;
 }
 
 .related-container .link:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
   border-color: var(--color-light-link);
   background: var(--color-light-surface-hover);
 }
@@ -234,20 +228,20 @@
   color: var(--color-light-link);
   font-weight: 600;
   text-decoration: none;
+  flex: 1;
+  pointer-events: none;
 }
 
 .related-container .link a::after {
   display: none;
 }
 
-.related-container .link a:hover {
-  color: var(--color-light-link);
-}
-
 .related-container .link span {
   font-size: var(--text-2xl);
   color: var(--color-light-link);
   transition: transform var(--duration-fast) var(--ease-out);
+  flex-shrink: 0;
+  pointer-events: none;
 }
 
 .related-container .link-previous {

static/mobile-menu.js

@@ -1,17 +1,11 @@
 // Mobile Menu Toggle - Simple and Robust
-console.log('Mobile menu script loaded');
 
 // Wait for DOM to be fully loaded
 document.addEventListener('DOMContentLoaded', function() {
-  console.log('DOM loaded, initializing mobile menu...');
-  
   const menuToggle = document.getElementById('mobile-menu-toggle');
   const menuOverlay = document.getElementById('mobile-menu-overlay');
   const body = document.body;
 
-  console.log('Menu toggle button:', menuToggle);
-  console.log('Menu overlay:', menuOverlay);
-
   if (!menuToggle) {
     console.error('ERROR: mobile-menu-toggle button not found!');
     return;
@@ -22,11 +16,8 @@ document.addEventListener('DOMContentLoaded', function() {
     return;
   }
 
-  console.log('✓ All menu elements found, attaching click handler...');
-
   // Toggle menu on button click
   menuToggle.addEventListener('click', function(e) {
-    console.log('Hamburger clicked!');
     e.preventDefault();
 
     const isActive = menuToggle.classList.contains('active');
@@ -36,20 +27,17 @@ document.addEventListener('DOMContentLoaded', function() {
       menuToggle.classList.remove('active');
       menuOverlay.classList.remove('active');
       body.classList.remove('menu-open');
-      console.log('Menu CLOSED');
     } else {
       // Open menu
       menuToggle.classList.add('active');
       menuOverlay.classList.add('active');
       body.classList.add('menu-open');
-      console.log('Menu OPENED');
     }
   });
 
   // Close menu when clicking on the overlay background
   menuOverlay.addEventListener('click', function(e) {
     if (e.target === menuOverlay) {
-      console.log('Clicked outside menu, closing...');
       menuToggle.classList.remove('active');
       menuOverlay.classList.remove('active');
       body.classList.remove('menu-open');
@@ -58,23 +46,18 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Close menu when clicking any navigation link
   const menuLinks = menuOverlay.querySelectorAll('a');
-  console.log('Found', menuLinks.length, 'menu links');
 
   menuLinks.forEach(function(link) {
     link.addEventListener('click', function() {
-      console.log('Link clicked, closing menu');
       menuToggle.classList.remove('active');
       menuOverlay.classList.remove('active');
       body.classList.remove('menu-open');
     });
   });
-
-  console.log('✓ Mobile menu fully initialized!');
 });
 
 // Also try to initialize if DOM is already loaded
 if (document.readyState !== 'loading') {
-  console.log('DOM already loaded, initializing immediately...');
   const event = new Event('DOMContentLoaded');
   document.dispatchEvent(event);
 }
@@ -85,13 +68,9 @@ document.addEventListener('DOMContentLoaded', function() {
   const mainDarkToggle = document.getElementById('dark-mode-toggle');
 
   if (mobileDarkToggle && mainDarkToggle) {
-    console.log('✓ Mobile dark mode toggle found');
     mobileDarkToggle.addEventListener('click', function() {
-      console.log('Mobile dark mode clicked');
       mainDarkToggle.click();
     });
-  } else {
-    console.log('Dark mode toggles not found yet (may initialize later)');
   }
 });
 
@@ -106,16 +85,12 @@ document.addEventListener('DOMContentLoaded', function() {
   const headerContainer = document.querySelector('.site-header__container');
 
   if (!searchInput || !headerContainer) {
-    console.log('Search elements not found');
     return;
   }
 
-  console.log('✓ Mobile search expansion initialized');
-
   // Expand search on focus (mobile only)
   searchInput.addEventListener('focus', function() {
     if (isMobile()) {
-      console.log('Search focused - expanding');
       headerContainer.classList.add('search-expanded');
     }
   });
@@ -125,7 +100,6 @@ document.addEventListener('DOMContentLoaded', function() {
     if (isMobile()) {
       // Small delay to allow clicking search results
       setTimeout(function() {
-        console.log('Search blurred - collapsing');
         headerContainer.classList.remove('search-expanded');
       }, 200);
     }