Fix/make css related changes in landing page (#173)

* fix: solve overlap issue in community support card

* fix: resolve card view issue of popular integration section

* fix: change css for hero section banner

* fix: hero banner button css

* fix: resolve button size issue

* fix: remove unused padding

* fix: change css for search bar

* fix: add proper padding

* fix: solve sidebar highlight issue

* fix: resolve overlap issue in bottom of toc

* fix: change css for sidebar and toc

* fix: resolve auto scroll issue

* fix: add top padding

* fix: resolve highlight issue

* fix: resolve toc issue

* fix: remove unused z-index

* fix: solve sidebar and toc sidebar issue

* fix: remove unused css

* fix: logo position issue

* fix: resolve path issue of mobile screen logo

* fix: resolve sidebar scroll issue

* fix: remove background from title of secondary sidebar

* fix: make css related changes

* fix: change theme moon icon color

* fix: add required css

* fix: make md-content left side with actual font size

* fix: full-width md-content with actual font size

* fix: left side md-content with character limit with actual font size

* fix: resolve main page width issue

* fix: make md-content center in screen with actual font-size

* feat: make search bar for for searching

* fix: md content left-container

* fix: make css related changes

* fix: md-content in center with container view

* fix: md-content left with container view

* fix: make container view width

Author: Monil-KTX

docs/assets/close-icon.svg

@@ -1,9 +1,65 @@
+// Show/hide close icon based on .md-search-result__meta visibility
+function isElementInViewport(el) {
+  if (!el) return false;
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.top < window.innerHeight &&
+    rect.bottom > 0 &&
+    rect.left < window.innerWidth &&
+    rect.right > 0
+  );
+}
+
+function toggleCloseIconVisibility() {
+  const meta = document.querySelector(".md-search-result__meta");
+  const closeIcon = document.querySelector(".md-search__close");
+  if (closeIcon) {
+    if (isElementInViewport(meta)) {
+      closeIcon.style.display = "flex";
+    } else {
+      closeIcon.style.display = "none";
+    }
+  }
+}
+
+window.addEventListener("scroll", toggleCloseIconVisibility);
+window.addEventListener("resize", toggleCloseIconVisibility);
+document.addEventListener("DOMContentLoaded", toggleCloseIconVisibility);
+// Also run after search results update
+document.addEventListener("input", function (e) {
+  if (e.target.classList.contains("md-search__input")) {
+    setTimeout(toggleCloseIconVisibility, 50);
+  }
+});
 /**
  * Minimal Search Close Functionality
  * Adds click handler to the close icon in the search input
  */
 
 document.addEventListener("DOMContentLoaded", function () {
+  // Inject clear button if not present
+  const searchInput = document.querySelector(".md-search__input");
+  if (searchInput && !document.querySelector(".md-search__clear")) {
+    const clearBtn = document.createElement("button");
+    clearBtn.className = "md-search__clear";
+    clearBtn.type = "button";
+    clearBtn.textContent = "Clear";
+    searchInput.parentNode.insertBefore(clearBtn, searchInput.nextSibling);
+
+    clearBtn.addEventListener("click", function () {
+      searchInput.value = "";
+      searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+      searchInput.focus();
+      clearBtn.style.display = "none";
+    });
+
+    searchInput.addEventListener("input", function () {
+      clearBtn.style.display = searchInput.value ? "inline" : "none";
+    });
+
+    // Initial state
+    clearBtn.style.display = searchInput.value ? "inline" : "none";
+  }
   // Add click handler to search input when close icon area is clicked
   document.addEventListener("click", function (e) {
     const searchInput = document.querySelector(".md-search__input");

docs/assets/moon.svg

@@ -0,0 +1,92 @@
+/**
+ * Simple TOC scroll-based highlighting
+ * Highlights current section in purple text
+ */
+
+(function () {
+  "use strict";
+
+  let tocLinks = [];
+  let headings = [];
+
+  function init() {
+    // Find TOC links
+    tocLinks = Array.from(
+      document.querySelectorAll(".md-nav--secondary .md-nav__link")
+    );
+    if (tocLinks.length === 0) return;
+
+    // Find corresponding headings
+    headings = tocLinks
+      .map((link) => {
+        const href = link.getAttribute("href");
+        return href && href.startsWith("#")
+          ? document.getElementById(href.substring(1))
+          : null;
+      })
+      .filter((h) => h !== null);
+
+    if (headings.length === 0) return;
+
+    // Listen to scroll
+    window.addEventListener("scroll", updateHighlight, { passive: true });
+    updateHighlight();
+  }
+
+  function updateHighlight() {
+    const scrollTop = window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    // If near bottom, highlight last item
+    if (scrollTop + windowHeight >= documentHeight - 50) {
+      setActive(tocLinks.length - 1);
+      return;
+    }
+
+    // Find current section
+    let activeIndex = -1;
+    for (let i = headings.length - 1; i >= 0; i--) {
+      if (headings[i] && headings[i].getBoundingClientRect().top <= 80) {
+        activeIndex = i;
+        break;
+      }
+    }
+
+    setActive(activeIndex);
+  }
+
+  function setActive(index) {
+    // Remove all active classes
+    tocLinks.forEach((link) => {
+      link.classList.remove("md-nav__link--active", "is-active");
+    });
+
+    // Add active class to current item and scroll into view if needed
+    if (index >= 0 && index < tocLinks.length) {
+      const activeLink = tocLinks[index];
+      activeLink.classList.add("md-nav__link--active", "is-active");
+      // Scroll the active link into view within the sidebar
+      // Only if not already fully visible
+      if (typeof activeLink.scrollIntoView === "function") {
+        activeLink.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      }
+    }
+  }
+
+  // Initialize when ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  // Re-initialize on page changes
+  let currentUrl = location.href;
+  new MutationObserver(() => {
+    if (location.href !== currentUrl) {
+      currentUrl = location.href;
+      setTimeout(init, 100);
+    }
+  }).observe(document, { childList: true, subtree: true });
+})();