fix: landing page - sticky textbox section fix

.gitignore

@@ -16,4 +16,36 @@ templates/keras_hub/getting_started.md
 templates/keras_tuner/getting_started.md
 datasets/*
 .vscode/*
+
+### JetBrains ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# IntelliJ
+out/
+
+# Editor-based Rest Client
+.idea/httpRequests
+
 .history

theme/css/docs.css

@@ -124,6 +124,7 @@ blockquote {
 .k-outline {
   background: white;
   border-bottom: 1px solid var(--grey);
+  box-shadow: 6px 2px 10px 0px rgba(220, 220, 220, 0.50) inset;
   color: var(--text-red);
   height: 100%;
   max-height: 80vh;
@@ -132,6 +133,7 @@ blockquote {
   position: sticky;
   top: 86px;
   flex: 0 0 286px;
+
 }
 
 .k-content img {
@@ -468,7 +470,7 @@ p {
     width: 100%;
   }
 
-  .flex__container { 
+  .flex__container {
     margin-top: 86px;
     padding: 0 64px;
   }

theme/css/index.css

@@ -4,7 +4,6 @@
 body {
   font-family: "Montserrat", sans-serif;
   margin: 0;
-  overflow-x: hidden;
 }
 
 .page__container {

theme/css/landing.css

@@ -1,9 +1,12 @@
 @import url("index.css");
 @import url("nav.css");
 
+html {
+  overflow-x: hidden;
+}
+
 html,
 body {
-  overflow-x: hidden;
   width: 100%;
 }
 
@@ -100,7 +103,6 @@ body {
 .explore {
   background: var(--white);
   display: flex;
-  flex-direction: column-reverse;
   gap: 24px;
   padding: 50px 24px 50px;
 }
@@ -114,6 +116,7 @@ body {
 .explore__wrapper {
   display: flex;
   flex-direction: column-reverse;
+  max-width: 100%;
 }
 
 .explore__content {
@@ -130,8 +133,7 @@ body {
 }
 
 .explore__image--container img {
-  height: max-content;
-  width: 80%;
+  width: 100%;
 }
 
 .guide {
@@ -454,6 +456,7 @@ body {
   }
 
   .explore__wrapper {
+    align-items: start;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -472,10 +475,11 @@ body {
   }
 
   .explore__content {
-    height: 400px;
-    padding-top: 30px;
+    align-self: start;
+    padding-block: 48px;
     position: sticky;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .explore__content h2 {
@@ -491,6 +495,8 @@ body {
 
   .explore__image--container img {
     margin-bottom: 24px;
+    height: 100%;
+    width: auto;
   }
 
   .code__container {

theme/js/index.js

@@ -70,62 +70,30 @@ mobileNavMenu.addEventListener('click', () => {
   mobileNavSearchForm.style.display = 'none';
 });
 
-// Parallax functionality
-// const exploreModule = document.querySelector('.explore');
-// const exploreContent = document.querySelector('.explore__content');
-
-// const observer = new IntersectionObserver(
-//   (entries) => {
-//     entries.forEach((entry) => {
-//       if (entry.isIntersecting) {
-//         window.addEventListener('scroll', controlExploreContent);
-//         return;
-//       }
-
-//       window.removeEventListener('scroll', controlExploreContent);
-//     });
-//   },
-//   { threshold: 0 }
-// );
-
-// if (exploreModule) {
-//   observer.observe(exploreModule);
-// }
-
-// function controlExploreContent() {
-//   const container = exploreModule.getBoundingClientRect();
-//   const containerTop = container.top;
-//   const containerHeight = exploreModule.clientHeight;
-//   const containerCenter = containerTop + containerHeight / 2;
-
-//   const viewportHeight = window.innerHeight;
-//   const viewportCenter = viewportHeight / 2;
-
-//   if (
-//     containerCenter >= (viewportCenter - containerHeight) / 2 &&
-//     containerCenter <= (viewportCenter + containerHeight) / 2
-//   ) {
-//     const scrollProgress = window.scrollY - containerTop;
-
-//     const normalizedScroll = Math.min(
-//       Math.max(scrollProgress / containerHeight, 0),
-//       1
-//     );
-
-//     const easeInOut =
-//       normalizedScroll < 0.5
-//         ? 2 * Math.pow(normalizedScroll, 2)
-//         : -1 + (4 - 2 * normalizedScroll) * normalizedScroll;
-
-//     const maxMove = containerHeight - exploreContent.clientHeight;
-//     const moveAmount = Math.max(
-//       0,
-//       Math.min(maxMove, scrollProgress * easeInOut * 0.4)
-//     );
-
-//     exploreContent.style.top = `${moveAmount}px`;
-//     return;
-//   }
-
-//   exploreContent.style.top = `0px`;
-// }
+// position:sticky functionality (set margin-top so that the content is correctly centered vertically)
+const exploreModule = document.querySelector('.explore');
+const exploreContent = document.querySelector('.explore__content');
+
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        window.addEventListener('resize', verticallyCenterExploreContent);
+        return;
+      }
+
+      window.removeEventListener('resize', verticallyCenterExploreContent);
+    });
+  },
+  { threshold: 0 }
+);
+
+if (exploreModule) {
+  observer.observe(exploreModule);
+  /* let's call it once initially to align it in case a screen never gets resized */
+  verticallyCenterExploreContent();
+}
+
+function verticallyCenterExploreContent() {
+  exploreContent.style.marginTop = `${Math.round(exploreContent.getBoundingClientRect().height / 2)}px`;
+}

theme/landing.html

@@ -649,7 +649,7 @@ <h2 class="contacts__title text--white">Stay in touch</h2>
             <h2 class="contacts__title text--white">Contributions welcome!</h2>
 
             <p class="contacts__description">
-              We welcome your code, ideas, and feedback as we continue to grow. Visit our roadmap, contribution guide or GitHub for more information. 
+              We welcome your code, ideas, and feedback as we continue to grow. Visit our roadmap, contribution guide or GitHub for more information.
             </p>
 
             <div class="contacts__button-contanier">