Merge pull request #138 from cosmos/landingpagefix

Mdx Landingg

Author: CryptoAssassin1

docs.json

@@ -1471,7 +1471,6 @@
                                                     "evm/next/documentation/concepts/transactions",
                                                     "evm/next/documentation/concepts/predeployed-contracts",
                                                     "evm/next/documentation/concepts/eip-1559-feemarket",
-                                                    "evm/next/documentation/concepts/performance",
                                                     "evm/next/documentation/concepts/precision-handling"
                                                 ]
                                             },

index.mdx

@@ -5,9 +5,143 @@ mode: "custom"
 
 import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
 
+<style>{`
+  #custom-nav-links-jsx {
+    position: fixed !important;
+    top: 24px !important;
+    right: 320px !important;
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 20px !important;
+    align-items: center !important;
+    z-index: 9999 !important;
+    pointer-events: auto !important;
+    height: auto !important;
+  }
+
+  /* Hide navigation when mobile class is added */
+  #custom-nav-links-jsx.nav-hidden-mobile {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    width: 0 !important;
+    height: 0 !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    left: -9999px !important;
+  }
+
+  @media (max-width: 900px) {
+    #custom-nav-links-jsx.custom-nav-responsive,
+    div#custom-nav-links-jsx.custom-nav-responsive,
+    .custom-nav-responsive#custom-nav-links-jsx {
+      display: none !important;
+      visibility: hidden !important;
+      opacity: 0 !important;
+      pointer-events: none !important;
+      width: 0 !important;
+      height: 0 !important;
+      overflow: hidden !important;
+    }
+  }
+
+  #custom-nav-links-jsx a {
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    text-decoration: none !important;
+    transition: opacity 0.2s !important;
+    white-space: nowrap !important;
+    display: inline-block !important;
+  }
+
+  #custom-nav-links-jsx a:hover {
+    opacity: 0.7 !important;
+  }
+
+  [data-theme="dark"] #custom-nav-links-jsx a,
+  html:not([data-theme]) #custom-nav-links-jsx a,
+  body:not([data-theme]) #custom-nav-links-jsx a {
+    color: #F1F1F1 !important;
+  }
+
+  [data-theme="light"] #custom-nav-links-jsx a,
+  body[data-theme="light"] #custom-nav-links-jsx a {
+    color: #1A1A1A !important;
+  }
+
+  @media (max-width: 1024px) {
+    #custom-nav-links-jsx {
+      right: 240px !important;
+      gap: 16px !important;
+    }
+    #custom-nav-links-jsx a {
+      font-size: 11px !important;
+    }
+  }
+`}</style>
+
+
+{/* Custom Navigation Links - Rendered directly as JSX */}
+<div id="custom-nav-links-jsx" className="custom-nav-responsive" style={{
+  position: 'fixed',
+  top: '24px',
+  right: '320px',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '20px',
+  alignItems: 'center',
+  zIndex: 9999
+}}>
+  <a href="/sdk/" style={{ fontSize: '12px' }}>Cosmos SDK</a>
+  <a href="/evm/" style={{ fontSize: '12px' }}>Cosmos EVM</a>
+  <a href="/ibc/" style={{ fontSize: '12px' }}>IBC</a>
+  <a href="https://docs.cometbft.com/v0.38/" target="_blank" rel="noopener noreferrer" style={{ fontSize: '12px' }}>CometBFT</a>
+  <a href="/hub/" style={{ fontSize: '12px' }}>Hub</a>
+</div>
+
 <script
   dangerouslySetInnerHTML={{
     __html: `
+      // Handle responsive navigation visibility
+      function handleResponsiveNav() {
+        const nav = document.getElementById('custom-nav-links-jsx');
+        if (nav) {
+          if (window.innerWidth <= 900) {
+            // Force hide by directly setting style properties
+            nav.style.display = 'none';
+            nav.style.visibility = 'hidden';
+            nav.style.opacity = '0';
+            nav.style.pointerEvents = 'none';
+            nav.style.position = 'absolute';
+            nav.style.left = '-9999px';
+          } else {
+            // Restore original styles
+            nav.style.display = 'flex';
+            nav.style.visibility = 'visible';
+            nav.style.opacity = '1';
+            nav.style.pointerEvents = 'auto';
+            nav.style.position = 'fixed';
+            nav.style.left = '';
+          }
+        }
+      }
+
+      if (typeof window !== 'undefined') {
+        // Run immediately
+        handleResponsiveNav();
+
+        // Run multiple times to ensure it catches any delays
+        setTimeout(handleResponsiveNav, 50);
+        setTimeout(handleResponsiveNav, 100);
+        setTimeout(handleResponsiveNav, 200);
+        setTimeout(handleResponsiveNav, 500);
+
+        window.addEventListener('resize', handleResponsiveNav);
+        window.addEventListener('load', handleResponsiveNav);
+        document.addEventListener('DOMContentLoaded', handleResponsiveNav);
+      }
+
       (function() {
         // Navigation management for index page
         const indexNavManager = {
@@ -39,7 +173,10 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
               display: flex !important;
               gap: 24px !important;
               align-items: center !important;
-              z-index: 1000 !important;
+              z-index: 9999 !important;
+              pointer-events: auto !important;
+              visibility: visible !important;
+              opacity: 1 !important;
             }
 
             #custom-nav-links a {
@@ -62,7 +199,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
               color: #1A1A1A !important;
             }
 
-            @media (max-width: 768px) {
+            @media (max-width: 900px) {
               #custom-nav-links {
                 display: none !important;
               }
@@ -94,8 +231,22 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
           },
 
           injectCustomNav() {
+            console.log('[Custom Nav] Attempting to inject custom navigation');
+
             // Check if already injected
-            if (document.getElementById(this.customNavId)) return;
+            if (document.getElementById(this.customNavId)) {
+              console.log('[Custom Nav] Already exists, skipping');
+              return;
+            }
+
+            // Ensure body exists
+            if (!document.body) {
+              console.log('[Custom Nav] Body not ready, retrying...');
+              setTimeout(() => this.injectCustomNav(), 50);
+              return;
+            }
+
+            console.log('[Custom Nav] Creating navigation container');
 
             // Create custom navigation container
             const navContainer = document.createElement('div');
@@ -124,6 +275,20 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
 
             // Append directly to body (using fixed positioning)
             document.body.appendChild(navContainer);
+            console.log('[Custom Nav] Navigation container appended to body');
+
+            // Force visibility
+            setTimeout(() => {
+              const nav = document.getElementById(this.customNavId);
+              if (nav) {
+                nav.style.display = 'flex';
+                nav.style.visibility = 'visible';
+                nav.style.opacity = '1';
+                console.log('[Custom Nav] Visibility forced, navigation should be visible');
+              } else {
+                console.error('[Custom Nav] Navigation element not found after injection!');
+              }
+            }, 100);
           },
 
           removeCustomNav() {
@@ -155,7 +320,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
                   } else {
                     this.cleanup();
                   }
-                }, 500);
+                }, 200);
               }
             } else {
               this.cleanup();
@@ -203,12 +368,26 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
           },
 
           init() {
-            // Initial setup
+            console.log('[Custom Nav] Initializing navigation manager');
+            console.log('[Custom Nav] Current pathname:', window.location.pathname);
+            console.log('[Custom Nav] Is index page:', this.isIndexPage());
+
+            // Initial setup - run multiple times with delays
             this.manageNavigation();
+            setTimeout(() => this.manageNavigation(), 100);
+            setTimeout(() => this.manageNavigation(), 300);
+            setTimeout(() => this.manageNavigation(), 500);
+            setTimeout(() => this.manageNavigation(), 1000);
 
             // Set up event listeners
-            document.addEventListener('DOMContentLoaded', () => this.manageNavigation());
-            window.addEventListener('load', () => this.manageNavigation());
+            document.addEventListener('DOMContentLoaded', () => {
+              this.manageNavigation();
+              setTimeout(() => this.manageNavigation(), 100);
+            });
+            window.addEventListener('load', () => {
+              this.manageNavigation();
+              setTimeout(() => this.manageNavigation(), 100);
+            });
             window.addEventListener('popstate', () => this.manageNavigation());
 
             // Intercept navigation
@@ -223,7 +402,9 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
               }
             });
 
-            urlObserver.observe(document, { subtree: true, childList: true });
+            if (document.documentElement) {
+              urlObserver.observe(document.documentElement, { subtree: true, childList: true });
+            }
           }
         };
 
@@ -253,10 +434,11 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
     visibility: hidden !important;
     opacity: 0 !important;
   }
+
 `}</style>
 
 <script>{`
-  // Aggressive navigation hiding
+  // Aggressive navigation hiding (excluding search bar - handled by CSS)
   function hideNavElements() {
     const selectors = [
       '.nav-tabs',
@@ -269,7 +451,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
       'button.group',
       'button[class*="bg-background-light"]',
       'button[class*="bg-background-dark"]',
-      'header button:not([aria-label*="theme"]):not([aria-label*="Theme"])',
+      'header button:not([aria-label*="theme"]):not([aria-label*="Theme"]):not([id="search-bar-entry"])',
       'header a.link',
       'header .link',
       '[class*="rounded-full"]:not([aria-label*="theme"]):not([aria-label*="Theme"])',
@@ -559,7 +741,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
     padding: '60px 40px',
   }}>
     {/* Introduction */}
-    <section className="section-border" style={{ marginBottom: '80px', paddingBottom: '80px' }}>
+    <section className="section-border" style={{ marginBottom: '25px', paddingBottom: '25px' }}>
       <h2 className="heading" style={{
         fontSize: '32px',
         fontWeight: '700',
@@ -568,7 +750,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         Introduction
       </h2>
       <div className="heading-underline" style={{
-        width: '66.67%',
+        width: '100%',
         height: '2px',
         background: 'currentColor',
         marginBottom: '20px',
@@ -598,7 +780,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         Get Started with the Cosmos Stack
       </h2>
       <div className="heading-underline" style={{
-        width: '66.67%',
+        width: '100%',
         height: '2px',
         background: 'currentColor',
         marginBottom: '20px',
@@ -715,7 +897,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         About the Stack
       </h2>
       <div className="heading-underline" style={{
-        width: '66.67%',
+        width: '100%',
         height: '2px',
         background: 'currentColor',
         marginBottom: '20px',
@@ -726,7 +908,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         className="content-card"
         style={{
           borderRadius: '12px',
-          padding: '40px',
+          padding: '20px 2px',
           marginBottom: '24px',
           transition: 'all 0.3s ease',
           transform: 'translateY(0)',
@@ -779,7 +961,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         className="content-card"
         style={{
           borderRadius: '12px',
-          padding: '40px',
+          padding: '20px 2px',
           marginBottom: '24px',
           transition: 'all 0.3s ease',
           transform: 'translateY(0)',
@@ -825,7 +1007,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         className="content-card"
         style={{
           borderRadius: '12px',
-          padding: '40px',
+          padding: '20px 2px',
           marginBottom: '24px',
           transition: 'all 0.3s ease',
           transform: 'translateY(0)',
@@ -871,7 +1053,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         className="content-card"
         style={{
           borderRadius: '12px',
-          padding: '40px',
+          padding: '20px 2px',
           transition: 'all 0.3s ease',
           transform: 'translateY(0)',
           cursor: 'default',
@@ -929,7 +1111,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         Maintainers and Contributors
       </h2>
       <div className="heading-underline" style={{
-        width: '66.67%',
+        width: '100%',
         height: '2px',
         background: 'currentColor',
         marginBottom: '24px',
@@ -964,7 +1146,7 @@ import { TopicCard, TopicCardGrid } from '/snippets/topic-card-component.jsx';
         className="cta-button"
         style={{
           display: 'inline-block',
-          padding: '14px 28px',
+          padding: '14px 1px',
           borderRadius: '8px',
           textDecoration: 'none',
           fontWeight: '600',