From 650a9efab9c03b4d51170b3312eec500b5ae1db3 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Mon, 9 Dec 2024 17:55:37 +0900
Subject: [PATCH 1/6] adjust line height of side nav items

---
 assets/tailwind-output.css             | 12 ++++++++++++
 src/modules/footer/FooterModule.tsx    |  2 +-
 src/modules/side-nav/SideNavModule.tsx |  4 ++--
 style.css                              | 20 ++++++++++----------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index b26e4ffec..b44ef6675 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1999,6 +1999,18 @@ video {
     var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.\!leading-\[1rem\] {
+  line-height: 1rem !important;
+}
+
+.\!leading-\[\.5rem\] {
+  line-height: 0.5rem !important;
+}
+
+.\!leading-\[1\.4\] {
+  line-height: 1.4 !important;
+}
+
 .\!text-light-accent-1 {
   --tw-text-opacity: 1 !important;
   color: rgb(245 13 180 / var(--tw-text-opacity)) !important;
diff --git a/src/modules/footer/FooterModule.tsx b/src/modules/footer/FooterModule.tsx
index f6255a3b5..ac71474a2 100644
--- a/src/modules/footer/FooterModule.tsx
+++ b/src/modules/footer/FooterModule.tsx
@@ -43,7 +43,7 @@ const Footer: FC<Props> = ({ footerPageData }) => {
             {footerPageData?.footerLinksEcosystem &&
             footerPageData.footerLinksEcosystem.length > 0 ? (
               <div className="col-span-1 space-y-[0.3125rem]">
-                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Ecosystem</h3>
+                <h3 className="body-1 text-light-neutral-1 dark:text-dark-neutral-1">Protocol</h3>
                 <ul>
                   {footerPageData.footerLinksEcosystem.map((link) => (
                     <li key={link.name}>
diff --git a/src/modules/side-nav/SideNavModule.tsx b/src/modules/side-nav/SideNavModule.tsx
index ea7b9cc90..e21d18a6b 100644
--- a/src/modules/side-nav/SideNavModule.tsx
+++ b/src/modules/side-nav/SideNavModule.tsx
@@ -52,10 +52,10 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
               <ul>
                 {category.sections.map((section) => {
                   return (
-                    <li key={section.id} className="mt-1">
+                    <li key={section.id} className="mt-2">
                       <a
                         href={section.url}
-                        className="transition text-light-neutral-2 dark:text-dark-neutral-2 body-3 hover:text-light-accent-1 dark:hover:text-dark-accent-1"
+                        className="transition text-light-neutral-2 dark:text-dark-neutral-2 body-3 hover:text-light-accent-1 dark:hover:text-dark-accent-1  block !leading-[1.4]"
                       >
                         {section.name}
                       </a>
diff --git a/style.css b/style.css
index eb001dc55..ec64240f8 100644
--- a/style.css
+++ b/style.css
@@ -198,21 +198,21 @@ template {
 
 .avatar-wrapper g:nth-of-type(1) {
   animation-duration: 4s;
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(2) {
-  animation-duration: 4s;
+  animation-duration: 5s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(3) {
-  animation-duration: 5s;
-  animation-delay: 2s;
+  animation-duration: 6s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(4) {
-  animation-duration: 5s;
+  animation-duration: 6s;
   animation-delay: 1s;
 }
 
@@ -222,23 +222,23 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 6s;
+  animation-duration: 5s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
-  animation-duration: 4s;
+  animation-duration: 5s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
-  animation-duration: 4s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
-  animation-duration: 6s;
-  animation-delay: 1s;
+  animation-duration: 5s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(10) {

From 1f3b3119262fb854a24e899bd1660b6bad9871ea Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Mon, 9 Dec 2024 19:17:35 +0900
Subject: [PATCH 2/6] fix line break issue with link

---
 assets/tailwind-output.css | 27 +++++++++------------------
 style.css                  | 22 +++++++++++-----------
 styles/main.css            |  6 +++++-
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index b44ef6675..6ed463278 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -876,10 +876,6 @@ video {
   margin-right: 1rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-11 {
   margin-top: 2.75rem;
 }
@@ -1999,14 +1995,6 @@ video {
     var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
-.\!leading-\[1rem\] {
-  line-height: 1rem !important;
-}
-
-.\!leading-\[\.5rem\] {
-  line-height: 0.5rem !important;
-}
-
 .\!leading-\[1\.4\] {
   line-height: 1.4 !important;
 }
@@ -2552,16 +2540,16 @@ video {
       -moz-osx-font-smoothing: grayscale;
     }
     a {
-      word-break: break-all;
+      overflow-wrap: break-word;
     }
     a {
-      text-decoration-line: underline;
+      text-decoration-line: underline !important;
     }
     a {
-      text-decoration-thickness: 2px;
+      text-decoration-thickness: 2px !important;
     }
     a {
-      text-underline-offset: 4px;
+      text-underline-offset: 4px !important;
     }
     a {
       transition-property: all !important;
@@ -2569,14 +2557,17 @@ video {
       transition-duration: 150ms !important;
     }
     a:hover {
-      text-decoration-color: #7d7d7d;
+      text-decoration-color: #7d7d7d !important;
     }
     a:hover:where(.dark, .dark *) {
-      text-decoration-color: #9b9b9b;
+      text-decoration-color: #9b9b9b !important;
     }
     a {
       font: inherit;
     }
+    a > span {
+      border-style: none !important;
+    }
     img {
       margin-top: 1.25rem;
       margin-bottom: 1.25rem;
diff --git a/style.css b/style.css
index ec64240f8..e51ef2788 100644
--- a/style.css
+++ b/style.css
@@ -202,38 +202,38 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(2) {
-  animation-duration: 5s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(3) {
-  animation-duration: 6s;
-  animation-delay: 1s;
+  animation-duration: 5s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(4) {
-  animation-duration: 6s;
-  animation-delay: 1s;
+  animation-duration: 4s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(5) {
-  animation-duration: 5s;
+  animation-duration: 6s;
   animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 5s;
+  animation-duration: 4s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
-  animation-duration: 5s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
   animation-duration: 6s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
@@ -242,6 +242,6 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(10) {
-  animation-duration: 5s;
-  animation-delay: 1s;
+  animation-duration: 4s;
+  animation-delay: 2s;
 }
diff --git a/styles/main.css b/styles/main.css
index e3f7cd1db..436f5db25 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -49,10 +49,14 @@
     }
 
     a {
-      @apply break-all underline decoration-2 underline-offset-4 !transition-all hover:decoration-light-neutral-2 dark:hover:decoration-dark-neutral-2;
+      @apply break-words !underline !decoration-2 !underline-offset-4 !transition-all hover:!decoration-light-neutral-2 dark:hover:!decoration-dark-neutral-2;
       font: inherit;
     }
 
+    a > span {
+      @apply !border-none;
+    }
+
     img {
       @apply rounded-small my-5 first:mt-0;
     }

From b094cc2a7bab6e325561b8c31b5bea93b4976273 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Mon, 9 Dec 2024 20:54:51 +0900
Subject: [PATCH 3/6] collapsing active sections and adjust p text size and
 remove connect block

---
 assets/navigation-bundle.js             |   3 +-
 assets/shared-bundle.js                 |  37 ++++-----
 assets/tailwind-output.css              | 105 ++++++++++++++++++++++--
 src/modules/homepage/HomepageModule.tsx |  16 ++--
 src/modules/navigation/Navigation.tsx   |   2 +-
 src/modules/side-nav/SideNavModule.tsx  |  30 +++++--
 style.css                               |  26 +++---
 styles/main.css                         |  17 +++-
 tailwind.config.ts                      |   6 ++
 templates/header.hbs                    |   6 +-
 templates/home_page.hbs                 |  32 ++++----
 11 files changed, 201 insertions(+), 79 deletions(-)

diff --git a/assets/navigation-bundle.js b/assets/navigation-bundle.js
index f6c0fa9d5..63d756906 100644
--- a/assets/navigation-bundle.js
+++ b/assets/navigation-bundle.js
@@ -259,7 +259,8 @@ const Navigation = () => {
                 onClick: () => {
                   setMobileSearchBarIsOpen((prev) => !prev);
                 },
-                className: 'body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0',
+                className:
+                  'body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0 absolute right-4',
                 children: 'Cancel',
               }),
             ],
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
index 92643f55f..12dd66879 100644
--- a/assets/shared-bundle.js
+++ b/assets/shared-bundle.js
@@ -34215,30 +34215,21 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 
 var callBind$3 = { exports: {} };
 
-var esDefineProperty;
-var hasRequiredEsDefineProperty;
+var GetIntrinsic$3 = getIntrinsic;
 
-function requireEsDefineProperty() {
-  if (hasRequiredEsDefineProperty) return esDefineProperty;
-  hasRequiredEsDefineProperty = 1;
-
-  var GetIntrinsic = getIntrinsic;
-
-  /** @type {import('.')} */
-  var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false;
-  if ($defineProperty) {
-    try {
-      $defineProperty({}, 'a', { value: 1 });
-    } catch (e) {
-      // IE 8 has a broken defineProperty
-      $defineProperty = false;
-    }
+/** @type {import('.')} */
+var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false;
+if ($defineProperty$2) {
+  try {
+    $defineProperty$2({}, 'a', { value: 1 });
+  } catch (e) {
+    // IE 8 has a broken defineProperty
+    $defineProperty$2 = false;
   }
-
-  esDefineProperty = $defineProperty;
-  return esDefineProperty;
 }
 
+var esDefineProperty = $defineProperty$2;
+
 var GetIntrinsic$2 = getIntrinsic;
 
 var $gOPD$1 = GetIntrinsic$2('%Object.getOwnPropertyDescriptor%', true);
@@ -34254,7 +34245,7 @@ if ($gOPD$1) {
 
 var gopd$1 = $gOPD$1;
 
-var $defineProperty$1 = requireEsDefineProperty();
+var $defineProperty$1 = esDefineProperty;
 
 var $SyntaxError = syntax;
 var $TypeError$3 = type;
@@ -34307,7 +34298,7 @@ var defineDataProperty$1 = function defineDataProperty(obj, property, value) {
   }
 };
 
-var $defineProperty = requireEsDefineProperty();
+var $defineProperty = esDefineProperty;
 
 var hasPropertyDescriptors = function hasPropertyDescriptors() {
   return !!$defineProperty;
@@ -34386,7 +34377,7 @@ callBind$3.exports;
   var $call = GetIntrinsic('%Function.prototype.call%');
   var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply);
 
-  var $defineProperty = requireEsDefineProperty();
+  var $defineProperty = esDefineProperty;
   var $max = GetIntrinsic('%Math.max%');
 
   module.exports = function callBind(originalFunction) {
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index 6ed463278..bd2d3ee2e 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -697,6 +697,10 @@ video {
   left: 0.75rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -705,6 +709,10 @@ video {
   right: 0.5rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .top-0 {
   top: 0px;
 }
@@ -856,6 +864,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.ml-\[3\.25rem\] {
+  margin-left: 3.25rem;
+}
+
 .ml-padding-small {
   margin-left: 0.75rem;
 }
@@ -876,6 +888,10 @@ video {
   margin-right: 1rem;
 }
 
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .mt-11 {
   margin-top: 2.75rem;
 }
@@ -1136,6 +1152,10 @@ video {
   width: 3.75rem;
 }
 
+.w-\[calc\(100vw-7\.25rem\)\] {
+  width: calc(100vw - 7.25rem);
+}
+
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -1559,11 +1579,6 @@ video {
   background-color: rgb(55 27 12 / var(--tw-bg-opacity));
 }
 
-.bg-dark-pink-fade {
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 26 55 / var(--tw-bg-opacity));
-}
-
 .bg-dark-surface-1 {
   --tw-bg-opacity: 1;
   background-color: rgb(19 19 19 / var(--tw-bg-opacity));
@@ -1661,6 +1676,21 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-dark-blue-base-hovered {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 30 111 / var(--tw-bg-opacity));
+}
+
+.bg-dark-green-base-hovered {
+  --tw-bg-opacity: 1;
+  background-color: rgb(11 68 33 / var(--tw-bg-opacity));
+}
+
+.bg-dark-orange-base-hovered {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 35 14 / var(--tw-bg-opacity));
+}
+
 .fill-blue-base {
   fill: #4981ff;
 }
@@ -1820,6 +1850,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2532,10 +2567,10 @@ video {
     }
     p {
       font-family: var(--font-basel-grotesk);
-      font-size: 1.125rem;
+      font-size: 1rem;
       font-style: normal;
       font-weight: 500;
-      line-height: 1.4625rem;
+      line-height: 1.4rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -3738,7 +3773,6 @@ html:has(.ArticlePage) {
 
 zd-autocomplete {
   margin-left: -3.25rem !important;
-  width: 100vw !important;
   border-bottom-right-radius: 0.75rem !important;
   border-bottom-left-radius: 0.75rem !important;
   border-width: 1px !important;
@@ -3893,6 +3927,23 @@ iframe#launcher {
   z-index: 50 !important;
 }
 
+/* Hide scrollbar for Chrome, Safari and Opera */
+
+.ArticleBreadcrumbs::-webkit-scrollbar,
+.SideNav > div::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+
+.ArticleBreadcrumbs,
+.SideNav > div {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
 .placeholder\:text-light-pink-vibrant::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(245 13 180 / var(--tw-text-opacity));
@@ -3985,6 +4036,21 @@ iframe#launcher {
   background-color: rgba(34, 34, 34, 0.09);
 }
 
+.hover\:bg-light-blue-base-hovered:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(222 232 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-light-green-base-hovered:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 255 231 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-light-orange-base-hovered:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 238 217 / var(--tw-bg-opacity));
+}
+
 .hover\:\!text-light-accent-1-hovered:hover {
   --tw-text-opacity: 1 !important;
   color: rgb(199 10 146 / var(--tw-text-opacity)) !important;
@@ -4300,6 +4366,14 @@ iframe#launcher {
     margin-bottom: 1.5rem;
   }
 
+  .md\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
+  .md\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -4588,6 +4662,21 @@ iframe#launcher {
   background-color: rgb(254 244 255 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-dark-blue-base-hovered:hover:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 30 111 / var(--tw-bg-opacity));
+}
+
+.dark\:hover\:bg-dark-green-base-hovered:hover:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(11 68 33 / var(--tw-bg-opacity));
+}
+
+.dark\:hover\:bg-dark-orange-base-hovered:hover:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 35 14 / var(--tw-bg-opacity));
+}
+
 .dark\:hover\:text-dark-accent-1:hover:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(252 116 254 / var(--tw-text-opacity));
diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx
index 48563e0c2..bc9e53775 100644
--- a/src/modules/homepage/HomepageModule.tsx
+++ b/src/modules/homepage/HomepageModule.tsx
@@ -110,10 +110,14 @@ const Homepage: FC<Props> = ({ homepageData }) => {
                 className={cn(
                   'ColoredCard rounded-large p-padding-medium col-span-4 md:col-span-2',
                   {
-                    'bg-light-pink-fade dark:bg-dark-pink-fade': card.color === 'pink',
-                    'bg-light-green dark:bg-dark-green': card.color === 'green',
-                    'bg-light-blue dark:bg-dark-blue': card.color === 'blue',
-                    'bg-light-orange-fade dark:bg-dark-orange-fade': card.color === 'orange',
+                    'bg-light-pink-fade dark:bg-dark-pink-fade hover:bg-light-accent-2-hovered dark:hover:bg-dark-accent-2-hovered':
+                      card.color === 'pink',
+                    'bg-light-green dark:bg-dark-green hover:bg-light-green-base-hovered dark:hover:bg-dark-green-base-hovered':
+                      card.color === 'green',
+                    'bg-light-blue dark:bg-dark-blue hover:bg-light-blue-base-hovered dark:hover:bg-dark-blue-base-hovered':
+                      card.color === 'blue',
+                    'bg-light-orange-fade dark:bg-dark-orange-fade hover:bg-light-orange-base-hovered dark:hover:bg-dark-orange-base-hovered':
+                      card.color === 'orange',
                   }
                 )}
               >
@@ -182,7 +186,7 @@ const Homepage: FC<Props> = ({ homepageData }) => {
       ) : null}
       <Divider />
       {homepageData.topicsBlock && homepageData.topicsBlock.categories.length > 0 ? (
-        <div className="FAQBlock py-padding-x-large">
+        <div className="FAQBlock py-padding-x-large md:mb-16">
           <div className="flex flex-row items-center">
             <Layers className="w-6 h-6 mr-2" color="neutral-1" />
             <h3 className="heading-2 text-light-neutral-1 dark:text-dark-neutral-2">Topics</h3>
@@ -203,8 +207,6 @@ const Homepage: FC<Props> = ({ homepageData }) => {
           </div>
         </div>
       ) : null}
-      <Divider />
-      {homepageData.connectBlock ? <ConnectBlock connectBlock={homepageData.connectBlock} /> : null}
     </div>
   );
 };
diff --git a/src/modules/navigation/Navigation.tsx b/src/modules/navigation/Navigation.tsx
index 1e8c76d88..7e2390c57 100644
--- a/src/modules/navigation/Navigation.tsx
+++ b/src/modules/navigation/Navigation.tsx
@@ -71,7 +71,7 @@ const Navigation: FC = () => {
             onClick={() => {
               setMobileSearchBarIsOpen((prev) => !prev);
             }}
-            className="body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0"
+            className="body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0 absolute right-4"
           >
             Cancel
           </ButtonBase>
diff --git a/src/modules/side-nav/SideNavModule.tsx b/src/modules/side-nav/SideNavModule.tsx
index e21d18a6b..cc1c13aff 100644
--- a/src/modules/side-nav/SideNavModule.tsx
+++ b/src/modules/side-nav/SideNavModule.tsx
@@ -9,15 +9,27 @@ type Props = {
 
 export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
   const [activeNavState, setActiveNavState] = useState<NavState>(navState);
+  const [sideNavLoadedFirstTime, setSideNavLoadedFirstTime] = useState(true);
+  // initialActiveSection is used to set the initial state of the section when the side nav is loaded for the first time. Even if the section is active, it should be closed.
+  const [initialActiveSection] = useState<{ [key: number]: boolean }>({
+    [navState.section || '']: false,
+  });
   const [activeSection, setActiveSection] = useState<{ [key: number]: boolean }>({
     [navState.section || '']: true,
   });
 
   const handleSectiontoggle = (sectionId: number) => {
-    setActiveSection((prev) => ({
-      ...prev,
-      [sectionId]: !prev[sectionId],
-    }));
+    sideNavLoadedFirstTime
+      ? navState.section !== sectionId &&
+        setActiveSection((prev) => ({
+          ...prev,
+          [sectionId]: !prev[sectionId],
+        }))
+      : setActiveSection((prev) => ({
+          ...prev,
+          [sectionId]: !prev[sectionId],
+        }));
+    setSideNavLoadedFirstTime(false);
   };
 
   if (!sideNavData) {
@@ -139,11 +151,15 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                           >
                             {section.name}
                           </span>
-                          <ChevronDown />
+                          <div className="shrink-0">
+                            <ChevronDown />
+                          </div>
                         </button>
                         <ul
                           className={cn('accordion-body overflow-hidden', {
-                            'accordion-body-active': activeSection[section.id],
+                            'accordion-body-active':
+                              (sideNavLoadedFirstTime && initialActiveSection[section.id]) ||
+                              (!sideNavLoadedFirstTime && activeSection[section.id]),
                           })}
                         >
                           <div className="overflow-hidden">
@@ -155,7 +171,7 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                                   <a
                                     href={article.url}
                                     className={cn(
-                                      'transition body-3 hover:text-light-accent-1 dark:hover:text-dark-accent-1',
+                                      'transition body-3 block !leading-[1.4] hover:text-light-accent-1 dark:hover:text-dark-accent-1',
                                       {
                                         'text-light-accent-1 dark:text-dark-accent-1':
                                           isActiveArticle,
diff --git a/style.css b/style.css
index e51ef2788..e9c185532 100644
--- a/style.css
+++ b/style.css
@@ -197,18 +197,18 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(1) {
-  animation-duration: 4s;
-  animation-delay: 2s;
+  animation-duration: 6s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(2) {
   animation-duration: 6s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(3) {
-  animation-duration: 5s;
-  animation-delay: 2s;
+  animation-duration: 4s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(4) {
@@ -218,30 +218,30 @@ template {
 
 .avatar-wrapper g:nth-of-type(5) {
   animation-duration: 6s;
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(6) {
   animation-duration: 4s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
-  animation-duration: 6s;
-  animation-delay: 2s;
+  animation-duration: 5s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
   animation-duration: 6s;
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
-  animation-duration: 5s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(10) {
-  animation-duration: 4s;
-  animation-delay: 2s;
+  animation-duration: 5s;
+  animation-delay: 1s;
 }
diff --git a/styles/main.css b/styles/main.css
index 436f5db25..b46ac44e6 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -45,7 +45,7 @@
     }
 
     p {
-      @apply body-1;
+      @apply body-2;
     }
 
     a {
@@ -375,7 +375,7 @@ html:has(.ArticlePage) {
 }
 
 zd-autocomplete {
-  @apply !body-3 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-light-neutral-1 dark:!text-dark-neutral-1 md:!w-[25rem] !w-screen !-ml-[3.25rem] md:!-ml-12 !rounded-b-xl !shadow-none !border !border-light-surface-3 dark:!border-dark-surface-3;
+  @apply !body-3 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-light-neutral-1 dark:!text-dark-neutral-1 md:!w-[25rem] !-ml-[3.25rem] md:!-ml-12 !rounded-b-xl !shadow-none !border !border-light-surface-3 dark:!border-dark-surface-3;
 }
 
 zd-autocomplete-header {
@@ -412,3 +412,16 @@ input::-webkit-search-cancel-button {
 iframe#launcher {
   @apply !z-50;
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.ArticleBreadcrumbs::-webkit-scrollbar,
+.SideNav > div::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.ArticleBreadcrumbs,
+.SideNav > div {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 80135b88e..9357b6b56 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -160,6 +160,12 @@ const config: Config = {
         'dark-pink-fade-80': 'rgba(54,26,55,0.80)',
         'blue-base': '#4981FF',
         'green-base': '#0C8911',
+        'light-green-base-hovered': '#DFFFE7',
+        'dark-green-base-hovered': '#0B4421',
+        'light-blue-base-hovered': '#DEE8FF',
+        'dark-blue-base-hovered': '#171E6F',
+        'light-orange-base-hovered': '#FFEED9',
+        'dark-orange-base-hovered': '#4B230E',
         'green-vibrant': '#21C95E',
         'light-blue': '#EFF4FF',
         'dark-blue': '#10143D',
diff --git a/templates/header.hbs b/templates/header.hbs
index cb16279e2..a7039b53a 100644
--- a/templates/header.hbs
+++ b/templates/header.hbs
@@ -11,9 +11,11 @@
   </div>
   {{!-- for mobile nav search bar --}}
   <div id="search-bar-placeholder-nav-mobile" class="z-search w-full block md:hidden opacity-0">
-    <div class="w-full m-auto flex flex-row space-x-2 p-3 !px-1 rounded-[1.25rem] items-center !pointer-events-auto focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
+    <div class="w-[calc(100vw-7.25rem)] m-auto ml-2 p-3 !px-1 rounded-[1.25rem] items-center !pointer-events-auto focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
       <h2 class="sr-only">{{ t 'search' }}</h2>
-      {{search submit=false instant=settings.instant_search class='search search-full'}}
+      <div class="search-bar-placeholder-nav-mobile w-screen">
+        {{search submit=false instant=settings.instant_search class='search search-full'}}
+      </div>
     </div>
   </div>
 </header>
diff --git a/templates/home_page.hbs b/templates/home_page.hbs
index 06ae88c5b..9aaa72dd8 100644
--- a/templates/home_page.hbs
+++ b/templates/home_page.hbs
@@ -1,13 +1,15 @@
 <div class="Homepage flex flex-row bg-light-surface-1 dark:bg-dark-surface-1">
   <div id="new-side-nav" class="min-w-[15rem] max-w-[15rem] hidden md:block relative mt-nav-h"></div>
   <div id="new-homepage">
-    <div id="search-bar-placeholder-mobile" class="z-search w-full pointer-events-none md:hidden opacity-0">
-      <div class="m-auto flex flex-row space-x-2 p-3 rounded-[1.25rem] bg-light-surface-3 dark:!bg-dark-surface-3 items-center !pointer-events-auto border border-transparent focus-within:!border-light-surface-3 focus-within:dark:!border-dark-surface-3 focus-within:!bg-transparent focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
+    <div id="search-bar-placeholder-mobile" class="search-bar-placeholder-mobile z-search w-full pointer-events-none md:hidden opacity-0">
+      <div class="m-auto py-3 rounded-[1.25rem] bg-light-surface-3 dark:!bg-dark-surface-3 items-center !pointer-events-auto border border-transparent focus-within:!border-light-surface-3 focus-within:dark:!border-dark-surface-3 focus-within:!bg-transparent focus-within:!text-light-neutral-1 focus-within:dark:!text-dark-neutral-1">
         <h2 class="sr-only">{{ t 'search' }}</h2>
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="shrink-0">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="shrink-0 absolute left-4 mt-0.5">
           <path fill-rule="evenodd" clip-rule="evenodd" d="M9.16675 1.66699C5.02461 1.66699 1.66675 5.02486 1.66675 9.16699C1.66675 13.3091 5.02461 16.667 9.16675 16.667C10.9388 16.667 12.5673 16.0524 13.8508 15.0248L17.1126 18.2913C17.4378 18.617 17.9654 18.6174 18.2911 18.2922C18.6168 17.967 18.6172 17.4394 18.292 17.1137L15.0288 13.8458C16.0539 12.5631 16.6667 10.9366 16.6667 9.16699C16.6667 5.02486 13.3089 1.66699 9.16675 1.66699ZM9.16675 3.33366C5.94509 3.33366 3.33341 5.94533 3.33341 9.16699C3.33341 12.3887 5.94509 15.0003 9.16675 15.0003C12.3884 15.0003 15.0001 12.3887 15.0001 9.16699C15.0001 5.94533 12.3884 3.33366 9.16675 3.33366Z" fill="#6B6B6B"/>
         </svg>
-        {{search submit=false instant=settings.instant_search class='search search-full'}}
+        <div class="search-bar-placeholder-mobile w-full ml-[3.25rem]">
+          {{search submit=false instant=settings.instant_search class='search search-full'}}
+        </div>
       </div>
     </div>
   </div>
@@ -33,29 +35,29 @@
       cards: [
         {
           icon: 'graduationCap', 
-          title: 'Read FAQs',
-          description: 'Get more information on basic terms and how the Uniswap app works',
+          title: 'Frequently Asked Questions',
+          description: 'Answers to our top ten questions',
           color: 'pink',
-          url: '/hc/en-us/requests/new',
+          url: '/hc/en-us/sections/32172915881485',
         },
         {
           icon: 'lightbulb', 
-          title: 'How to use Uniswap',
-          description: 'Get more information on basic terms and how the Uniswap web app works',
+          title: 'Getting Started Guides',
+          description: 'Set up your wallet, make your first swap, and more',
           color: 'green',
-          url: '/hc/en-us/requests/new',
+          url: '/hc/en-us/categories/32174051347341',
         },
         {
           icon: 'helpCircle', 
-          title: 'Troubleshoot an issue',
-          description: 'Explore our guides for help troubleshooting issues',
+          title: 'Deep Dives and Troubleshooting',
+          description: 'More details on the Uniswap interface and troubleshooting issues',
           color: 'blue',
-          url: '/hc/en-us/requests/new',
+          url: '/hc/en-us/categories/32174144727565',
         },
         {
           icon: 'messageQuestion', 
-          title: 'Submit a Request',
-          description: 'If you’re having trouble you can contact our helpful team',
+          title: 'Get Help',
+          description: 'If you’re having trouble, our team is here to help!',
           color: 'orange',
           url: '/hc/en-us/requests/new',
         }

From a2d4b34d4839e8185d9123f4a2bf36e2b6dacb54 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Tue, 10 Dec 2024 20:31:43 +0900
Subject: [PATCH 4/6] change li font size add padding to heading texts

---
 assets/navigation-bundle.js                   |   2 +-
 assets/tailwind-output.css                    | 142 +++++++++++-------
 manifest.json                                 |   2 +-
 .../article-page/ArticlePageModule.tsx        |  23 ++-
 src/modules/navigation/Navigation.tsx         |   2 +-
 src/modules/side-nav/SideNavModule.tsx        |   5 +-
 style.css                                     |  20 +--
 styles/main.css                               |  24 ++-
 8 files changed, 126 insertions(+), 94 deletions(-)

diff --git a/assets/navigation-bundle.js b/assets/navigation-bundle.js
index 63d756906..ef093ce9a 100644
--- a/assets/navigation-bundle.js
+++ b/assets/navigation-bundle.js
@@ -279,7 +279,7 @@ const Navigation = () => {
                     jsxRuntimeExports.jsx('p', {
                       className:
                         'body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1',
-                      children: 'Uniswap Support',
+                      children: 'Support',
                     }),
                   ],
                 }),
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index bd2d3ee2e..e7b0de0e1 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1356,6 +1356,12 @@ video {
   column-gap: 1rem;
 }
 
+.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1564,19 +1570,19 @@ video {
   background-color: rgb(81 13 67 / var(--tw-bg-opacity));
 }
 
-.bg-dark-blue {
+.bg-dark-blue-base-hovered {
   --tw-bg-opacity: 1;
-  background-color: rgb(16 20 61 / var(--tw-bg-opacity));
+  background-color: rgb(23 30 111 / var(--tw-bg-opacity));
 }
 
-.bg-dark-green {
+.bg-dark-green-base-hovered {
   --tw-bg-opacity: 1;
-  background-color: rgb(15 44 26 / var(--tw-bg-opacity));
+  background-color: rgb(11 68 33 / var(--tw-bg-opacity));
 }
 
-.bg-dark-orange-fade {
+.bg-dark-orange-base-hovered {
   --tw-bg-opacity: 1;
-  background-color: rgb(55 27 12 / var(--tw-bg-opacity));
+  background-color: rgb(75 35 14 / var(--tw-bg-opacity));
 }
 
 .bg-dark-surface-1 {
@@ -1676,19 +1682,18 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-dark-blue-base-hovered {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 30 111 / var(--tw-bg-opacity));
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
-.bg-dark-green-base-hovered {
-  --tw-bg-opacity: 1;
-  background-color: rgb(11 68 33 / var(--tw-bg-opacity));
+.from-transparent {
+  --tw-gradient-from: transparent var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.bg-dark-orange-base-hovered {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 35 14 / var(--tw-bg-opacity));
+.to-light-surface-1 {
+  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
 }
 
 .fill-blue-base {
@@ -1930,6 +1935,10 @@ video {
   padding-left: 2.7rem;
 }
 
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
 .pt-margin-mobile {
   padding-top: 1.5rem;
 }
@@ -2491,6 +2500,9 @@ video {
     h2 {
       margin-top: 1.5rem;
     }
+    h2 {
+      margin-bottom: 1.25rem;
+    }
     h2 {
       font-family: var(--font-basel-grotesk);
       font-size: 2.25rem;
@@ -2506,6 +2518,9 @@ video {
     h3 {
       margin-top: 1.5rem;
     }
+    h3 {
+      margin-bottom: 1.25rem;
+    }
     h3 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.5rem;
@@ -2522,6 +2537,9 @@ video {
     h4 {
       margin-top: 1.5rem;
     }
+    h4 {
+      margin-bottom: 1.25rem;
+    }
     h4 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.25rem;
@@ -2538,6 +2556,9 @@ video {
     h5 {
       margin-top: 1.5rem;
     }
+    h5 {
+      margin-bottom: 1.25rem;
+    }
     h5 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.125rem;
@@ -2553,6 +2574,9 @@ video {
     h6 {
       margin-top: 1.5rem;
     }
+    h6 {
+      margin-bottom: 1.25rem;
+    }
     h6 {
       font-family: var(--font-basel-grotesk);
       font-size: 1rem;
@@ -2610,9 +2634,6 @@ video {
     img {
       border-radius: 0.75rem;
     }
-    img:first-child {
-      margin-top: 0px;
-    }
     ol {
       margin-top: 1.25rem;
       margin-bottom: 1.25rem;
@@ -2641,10 +2662,10 @@ video {
     }
     li {
       font-family: var(--font-basel-grotesk);
-      font-size: 1.125rem;
+      font-size: 1rem;
       font-style: normal;
       font-weight: 500;
-      line-height: 1.4625rem;
+      line-height: 1.4rem;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
@@ -2657,6 +2678,9 @@ video {
       ul {
         margin-left: 1rem;
       }
+      > p {
+        display: inline;
+      }
     }
     table,
     th,
@@ -3796,7 +3820,7 @@ zd-autocomplete {
 
 @media (min-width: 1280px) {
   zd-autocomplete {
-    margin-left: -3rem !important;
+    margin-left: -3.03125rem !important;
     width: 25rem !important;
   }
 }
@@ -3944,6 +3968,10 @@ iframe#launcher {
   /* Firefox */
 }
 
+#new-article-breadcrumbs > div {
+  position: relative;
+}
+
 .placeholder\:text-light-pink-vibrant::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(245 13 180 / var(--tw-text-opacity));
@@ -4023,19 +4051,6 @@ iframe#launcher {
   background-color: rgb(254 235 252 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-surface-2-hovered:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-light-surface-3:hover {
-  background-color: rgba(34, 34, 34, 0.05);
-}
-
-.hover\:bg-light-surface-3-hovered:hover {
-  background-color: rgba(34, 34, 34, 0.09);
-}
-
 .hover\:bg-light-blue-base-hovered:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(222 232 255 / var(--tw-bg-opacity));
@@ -4051,6 +4066,19 @@ iframe#launcher {
   background-color: rgb(255 238 217 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-light-surface-2-hovered:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-light-surface-3:hover {
+  background-color: rgba(34, 34, 34, 0.05);
+}
+
+.hover\:bg-light-surface-3-hovered:hover {
+  background-color: rgba(34, 34, 34, 0.09);
+}
+
 .hover\:\!text-light-accent-1-hovered:hover {
   --tw-text-opacity: 1 !important;
   color: rgb(199 10 146 / var(--tw-text-opacity)) !important;
@@ -4362,18 +4390,14 @@ iframe#launcher {
     margin-bottom: 0px;
   }
 
-  .md\:mb-6 {
-    margin-bottom: 1.5rem;
-  }
-
-  .md\:mb-12 {
-    margin-bottom: 3rem;
-  }
-
   .md\:mb-16 {
     margin-bottom: 4rem;
   }
 
+  .md\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -4509,6 +4533,10 @@ iframe#launcher {
   background-color: rgba(255, 255, 255, 0.12);
 }
 
+.dark\:to-dark-surface-1:where(.dark, .dark *) {
+  --tw-gradient-to: #131313 var(--tw-gradient-to-position);
+}
+
 .dark\:fill-blue-base:where(.dark, .dark *) {
   fill: #4981ff;
 }
@@ -4635,6 +4663,21 @@ iframe#launcher {
   background-color: rgb(81 13 67 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-dark-blue-base-hovered:hover:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 30 111 / var(--tw-bg-opacity));
+}
+
+.dark\:hover\:bg-dark-green-base-hovered:hover:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(11 68 33 / var(--tw-bg-opacity));
+}
+
+.dark\:hover\:bg-dark-orange-base-hovered:hover:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 35 14 / var(--tw-bg-opacity));
+}
+
 .dark\:hover\:bg-dark-surface-3:hover:where(.dark, .dark *) {
   background-color: rgba(255, 255, 255, 0.12);
 }
@@ -4662,21 +4705,6 @@ iframe#launcher {
   background-color: rgb(254 244 255 / var(--tw-bg-opacity));
 }
 
-.dark\:hover\:bg-dark-blue-base-hovered:hover:where(.dark, .dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 30 111 / var(--tw-bg-opacity));
-}
-
-.dark\:hover\:bg-dark-green-base-hovered:hover:where(.dark, .dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(11 68 33 / var(--tw-bg-opacity));
-}
-
-.dark\:hover\:bg-dark-orange-base-hovered:hover:where(.dark, .dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 35 14 / var(--tw-bg-opacity));
-}
-
 .dark\:hover\:text-dark-accent-1:hover:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(252 116 254 / var(--tw-text-opacity));
diff --git a/manifest.json b/manifest.json
index f8b101d54..adb5a4ae7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Copenhagen",
   "author": "Sanctuary Computer",
-  "version": "4.2.10",
+  "version": "4.2.11",
   "api_version": 4,
   "default_locale": "en-us",
   "settings": [
diff --git a/src/modules/article-page/ArticlePageModule.tsx b/src/modules/article-page/ArticlePageModule.tsx
index 3596cba4a..0e07bbd81 100644
--- a/src/modules/article-page/ArticlePageModule.tsx
+++ b/src/modules/article-page/ArticlePageModule.tsx
@@ -1,6 +1,6 @@
-import { FC } from "react";
-import { ArticlePageData } from "../../lib/types";
-import cn from "classnames";
+import { FC } from 'react';
+import { ArticlePageData } from '../../lib/types';
+import cn from 'classnames';
 
 type Props = {
   articlePageData: ArticlePageData;
@@ -11,7 +11,7 @@ type Props = {
 export const ArticleBreadcrumbs: FC<Props> = ({ articlePageData }) => {
   return (
     <>
-      <div className="ArticleBreadcrumbs mb-8 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8">
+      <div className="ArticleBreadcrumbs mb-8 flex flex-row items-center overflow-scroll col-span-4 sm:col-span-8 relative pr-6">
         <a href="/" target="_self" className="group flex">
           <span className="body-3 text-nowrap transition text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
             Home
@@ -30,23 +30,21 @@ export const ArticleBreadcrumbs: FC<Props> = ({ articlePageData }) => {
           );
         })}
         <Chevron />
-        <a
-          href={articlePageData.article.url}
-          target="_self"
-          className="group flex"
-        >
+        <a href={articlePageData.article.url} target="_self" className="group flex">
           <span className="body-3 text-nowrap transition text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-neutral-2 group-hover:dark:text-dark-neutral-2">
             {articlePageData.article.title}
           </span>
         </a>
       </div>
+      {/* Shade for the overflowing right side of the breadcrumbs */}
+      <div className="w-6 h-full bg-gradient-to-r from-transparent to-light-surface-1 dark:to-dark-surface-1 absolute right-0 top-0" />
     </>
   );
 };
 
 const Chevron: FC<{
-  color?: "neutral-1";
-}> = ({ color = "neutral-1" }) => {
+  color?: 'neutral-1';
+}> = ({ color = 'neutral-1' }) => {
   return (
     <svg
       className="mx-0.5 min-w-4 min-h-4"
@@ -61,8 +59,7 @@ const Chevron: FC<{
         clip-rule="evenodd"
         d="M5.52827 3.52827C5.26792 3.78862 5.26792 4.21073 5.52827 4.47108L9.05687 7.99967L5.52827 11.5283C5.26792 11.7886 5.26792 12.2107 5.52827 12.4711C5.78862 12.7314 6.21073 12.7314 6.47108 12.4711L10.4711 8.47108C10.7314 8.21073 10.7314 7.78862 10.4711 7.52827L6.47108 3.52827C6.21073 3.26792 5.78862 3.26792 5.52827 3.52827Z"
         className={cn({
-          "fill-light-neutral-1 dark:fill-dark-neutral-1":
-            color === "neutral-1",
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
         })}
       />
     </svg>
diff --git a/src/modules/navigation/Navigation.tsx b/src/modules/navigation/Navigation.tsx
index 7e2390c57..3fc0a8cbe 100644
--- a/src/modules/navigation/Navigation.tsx
+++ b/src/modules/navigation/Navigation.tsx
@@ -81,7 +81,7 @@ const Navigation: FC = () => {
             <LinkBase href="/hc/en-us" className="flex flex-row items-center">
               <MiniUnicon className="mb-[0.1875rem] h-8 w-8" />
               <p className="body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1">
-                Uniswap Support
+                Support
               </p>
             </LinkBase>
           </div>
diff --git a/src/modules/side-nav/SideNavModule.tsx b/src/modules/side-nav/SideNavModule.tsx
index cc1c13aff..fd80245d0 100644
--- a/src/modules/side-nav/SideNavModule.tsx
+++ b/src/modules/side-nav/SideNavModule.tsx
@@ -137,7 +137,7 @@ export const SideNav: FC<Props> = ({ sideNavData, navState }) => {
                     return (
                       <li key={section.id} className="mt-4 first:mt-6">
                         <button
-                          className="w-full group flex flex-row items-center justify-between"
+                          className="w-full group flex flex-row space-x-0.5 items-center justify-between"
                           onClick={() => handleSectiontoggle(section.id)}
                         >
                           <span
@@ -228,8 +228,7 @@ const ChevronDown: FC<{
         clip-rule="evenodd"
         d="M3.52876 5.52827C3.78911 5.26792 4.21122 5.26792 4.47157 5.52827L8.00016 9.05687L11.5288 5.52827C11.7891 5.26792 12.2112 5.26792 12.4716 5.52827C12.7319 5.78862 12.7319 6.21073 12.4716 6.47108L8.47157 10.4711C8.21122 10.7314 7.78911 10.7314 7.52876 10.4711L3.52876 6.47108C3.26841 6.21073 3.26841 5.78862 3.52876 5.52827Z"
         className={cn({
-          'transition fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover:fill-light-accent-1 group-hover:dark:fill-dark-accent-1':
-            color === 'neutral-2',
+          'transition fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
         })}
       />
     </svg>
diff --git a/style.css b/style.css
index e9c185532..00fe4a1a3 100644
--- a/style.css
+++ b/style.css
@@ -198,7 +198,7 @@ template {
 
 .avatar-wrapper g:nth-of-type(1) {
   animation-duration: 6s;
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(2) {
@@ -207,23 +207,23 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(3) {
-  animation-duration: 4s;
-  animation-delay: 1s;
+  animation-duration: 5s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(4) {
   animation-duration: 4s;
-  animation-delay: 2s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(5) {
-  animation-duration: 6s;
-  animation-delay: 2s;
+  animation-duration: 5s;
+  animation-delay: 1s;
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 4s;
-  animation-delay: 1s;
+  animation-duration: 6s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
@@ -232,12 +232,12 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(8) {
-  animation-duration: 6s;
+  animation-duration: 4s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
-  animation-duration: 6s;
+  animation-duration: 5s;
   animation-delay: 2s;
 }
 
diff --git a/styles/main.css b/styles/main.css
index b46ac44e6..2d5035750 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -25,23 +25,23 @@
     @apply text-light-neutral-1 dark:text-dark-neutral-1;
 
     h2 {
-      @apply heading-2 mt-margin-mobile first:mt-0;
+      @apply heading-2 mt-margin-mobile first:mt-0 mb-5;
     }
 
     h3 {
-      @apply heading-3 mt-margin-mobile first:mt-0;
+      @apply heading-3 mt-margin-mobile first:mt-0 mb-5;
     }
 
     h4 {
-      @apply heading-4 mt-margin-mobile first:mt-0;
+      @apply heading-4 mt-margin-mobile first:mt-0 mb-5;
     }
 
     h5 {
-      @apply subheading-1 mt-margin-mobile first:mt-0;
+      @apply subheading-1 mt-margin-mobile first:mt-0 mb-5;
     }
 
     h6 {
-      @apply subheading-2 mt-margin-mobile first:mt-0;
+      @apply subheading-2 mt-margin-mobile first:mt-0 mb-5;
     }
 
     p {
@@ -58,7 +58,7 @@
     }
 
     img {
-      @apply rounded-small my-5 first:mt-0;
+      @apply rounded-small my-5;
     }
 
     ol {
@@ -70,12 +70,16 @@
     }
 
     li {
-      @apply body-1;
+      @apply body-2;
 
       > ol,
       ul {
         @apply mt-2 ml-4;
       }
+
+      > p {
+        @apply inline;
+      }
     }
 
     table,
@@ -375,7 +379,7 @@ html:has(.ArticlePage) {
 }
 
 zd-autocomplete {
-  @apply !body-3 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-light-neutral-1 dark:!text-dark-neutral-1 md:!w-[25rem] !-ml-[3.25rem] md:!-ml-12 !rounded-b-xl !shadow-none !border !border-light-surface-3 dark:!border-dark-surface-3;
+  @apply !body-3 !bg-light-surface-1 dark:!bg-dark-surface-1 !text-light-neutral-1 dark:!text-dark-neutral-1 md:!w-[25rem] !-ml-[3.25rem] md:!-ml-[3.03125rem] !rounded-b-xl !shadow-none !border !border-light-surface-3 dark:!border-dark-surface-3;
 }
 
 zd-autocomplete-header {
@@ -425,3 +429,7 @@ iframe#launcher {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+#new-article-breadcrumbs > div {
+  @apply relative;
+}

From c7d142c331ca8046c35ea5e05c6ee07329fe9a72 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Tue, 10 Dec 2024 23:19:37 +0900
Subject: [PATCH 5/6] fix mobile menu highlight issue

---
 assets/shared-bundle.js                      | 37 ++++++++++++--------
 assets/tailwind-output.css                   | 23 +++++++++---
 src/modules/side-nav/MobileMenuNavModule.tsx | 12 +++++--
 style.css                                    | 28 +++++++--------
 styles/main.css                              | 10 +++---
 5 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
index 12dd66879..92643f55f 100644
--- a/assets/shared-bundle.js
+++ b/assets/shared-bundle.js
@@ -34215,20 +34215,29 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 
 var callBind$3 = { exports: {} };
 
-var GetIntrinsic$3 = getIntrinsic;
+var esDefineProperty;
+var hasRequiredEsDefineProperty;
 
-/** @type {import('.')} */
-var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false;
-if ($defineProperty$2) {
-  try {
-    $defineProperty$2({}, 'a', { value: 1 });
-  } catch (e) {
-    // IE 8 has a broken defineProperty
-    $defineProperty$2 = false;
+function requireEsDefineProperty() {
+  if (hasRequiredEsDefineProperty) return esDefineProperty;
+  hasRequiredEsDefineProperty = 1;
+
+  var GetIntrinsic = getIntrinsic;
+
+  /** @type {import('.')} */
+  var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false;
+  if ($defineProperty) {
+    try {
+      $defineProperty({}, 'a', { value: 1 });
+    } catch (e) {
+      // IE 8 has a broken defineProperty
+      $defineProperty = false;
+    }
   }
-}
 
-var esDefineProperty = $defineProperty$2;
+  esDefineProperty = $defineProperty;
+  return esDefineProperty;
+}
 
 var GetIntrinsic$2 = getIntrinsic;
 
@@ -34245,7 +34254,7 @@ if ($gOPD$1) {
 
 var gopd$1 = $gOPD$1;
 
-var $defineProperty$1 = esDefineProperty;
+var $defineProperty$1 = requireEsDefineProperty();
 
 var $SyntaxError = syntax;
 var $TypeError$3 = type;
@@ -34298,7 +34307,7 @@ var defineDataProperty$1 = function defineDataProperty(obj, property, value) {
   }
 };
 
-var $defineProperty = esDefineProperty;
+var $defineProperty = requireEsDefineProperty();
 
 var hasPropertyDescriptors = function hasPropertyDescriptors() {
   return !!$defineProperty;
@@ -34377,7 +34386,7 @@ callBind$3.exports;
   var $call = GetIntrinsic('%Function.prototype.call%');
   var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply);
 
-  var $defineProperty = esDefineProperty;
+  var $defineProperty = requireEsDefineProperty();
   var $max = GetIntrinsic('%Math.max%');
 
   module.exports = function callBind(originalFunction) {
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index e7b0de0e1..742860ea3 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1201,14 +1201,14 @@ video {
   max-width: 25rem;
 }
 
-.max-w-\[43\.375rem\] {
-  max-width: 43.375rem;
-}
-
 .max-w-\[56\.75rem\] {
   max-width: 56.75rem;
 }
 
+.max-w-\[43\.375rem\] {
+  max-width: 43.375rem;
+}
+
 .flex-shrink {
   flex-shrink: 1;
 }
@@ -2503,6 +2503,9 @@ video {
     h2 {
       margin-bottom: 1.25rem;
     }
+    h2 {
+      text-align: left;
+    }
     h2 {
       font-family: var(--font-basel-grotesk);
       font-size: 2.25rem;
@@ -2521,6 +2524,9 @@ video {
     h3 {
       margin-bottom: 1.25rem;
     }
+    h3 {
+      text-align: left;
+    }
     h3 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.5rem;
@@ -2540,6 +2546,9 @@ video {
     h4 {
       margin-bottom: 1.25rem;
     }
+    h4 {
+      text-align: left;
+    }
     h4 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.25rem;
@@ -2559,6 +2568,9 @@ video {
     h5 {
       margin-bottom: 1.25rem;
     }
+    h5 {
+      text-align: left;
+    }
     h5 {
       font-family: var(--font-basel-grotesk);
       font-size: 1.125rem;
@@ -2577,6 +2589,9 @@ video {
     h6 {
       margin-bottom: 1.25rem;
     }
+    h6 {
+      text-align: left;
+    }
     h6 {
       font-family: var(--font-basel-grotesk);
       font-size: 1rem;
diff --git a/src/modules/side-nav/MobileMenuNavModule.tsx b/src/modules/side-nav/MobileMenuNavModule.tsx
index b20f76ec7..42c417e85 100644
--- a/src/modules/side-nav/MobileMenuNavModule.tsx
+++ b/src/modules/side-nav/MobileMenuNavModule.tsx
@@ -96,6 +96,7 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
           <ul className="accordion-body">
             {selectedCategory &&
               selectedCategory.sections.map((section) => {
+                console.log(section, navState.category, selectedCategory.id);
                 return (
                   <li key={section.id} className="mt-4 first:mt-5">
                     <button
@@ -104,7 +105,13 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
                     >
                       <span
                         className={cn(
-                          'transition body-2 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1'
+                          'transition body-2 group-hover:text-light-accent-1 dark:group-hover:text-dark-accent-1',
+                          {
+                            'text-light-accent-1 dark:text-dark-accent-1':
+                              navState.section === section.id,
+                            'text-light-neutral-1 dark:text-dark-neutral-1':
+                              navState.section !== section.id,
+                          }
                         )}
                       >
                         {section.name}
@@ -197,8 +204,7 @@ const ChevronDown: FC<{
         clip-rule="evenodd"
         d="M3.52876 5.52827C3.78911 5.26792 4.21122 5.26792 4.47157 5.52827L8.00016 9.05687L11.5288 5.52827C11.7891 5.26792 12.2112 5.26792 12.4716 5.52827C12.7319 5.78862 12.7319 6.21073 12.4716 6.47108L8.47157 10.4711C8.21122 10.7314 7.78911 10.7314 7.52876 10.4711L3.52876 6.47108C3.26841 6.21073 3.26841 5.78862 3.52876 5.52827Z"
         className={cn({
-          'transition fill-light-neutral-2 dark:fill-dark-neutral-2 group-hover:fill-light-accent-1 group-hover:dark:fill-dark-accent-1':
-            color === 'neutral-2',
+          'transition fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
         })}
       />
     </svg>
diff --git a/style.css b/style.css
index 00fe4a1a3..66b6f244d 100644
--- a/style.css
+++ b/style.css
@@ -197,47 +197,47 @@ template {
 }
 
 .avatar-wrapper g:nth-of-type(1) {
-  animation-duration: 6s;
-  animation-delay: 2s;
-}
-
-.avatar-wrapper g:nth-of-type(2) {
-  animation-duration: 6s;
+  animation-duration: 5s;
   animation-delay: 1s;
 }
 
-.avatar-wrapper g:nth-of-type(3) {
+.avatar-wrapper g:nth-of-type(2) {
   animation-duration: 5s;
   animation-delay: 2s;
 }
 
-.avatar-wrapper g:nth-of-type(4) {
+.avatar-wrapper g:nth-of-type(3) {
   animation-duration: 4s;
   animation-delay: 1s;
 }
 
+.avatar-wrapper g:nth-of-type(4) {
+  animation-duration: 6s;
+  animation-delay: 2s;
+}
+
 .avatar-wrapper g:nth-of-type(5) {
-  animation-duration: 5s;
-  animation-delay: 1s;
+  animation-duration: 6s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(6) {
-  animation-duration: 6s;
+  animation-duration: 4s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(7) {
   animation-duration: 5s;
-  animation-delay: 1s;
+  animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(8) {
-  animation-duration: 4s;
+  animation-duration: 6s;
   animation-delay: 2s;
 }
 
 .avatar-wrapper g:nth-of-type(9) {
-  animation-duration: 5s;
+  animation-duration: 4s;
   animation-delay: 2s;
 }
 
diff --git a/styles/main.css b/styles/main.css
index 2d5035750..3161c65ec 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -25,23 +25,23 @@
     @apply text-light-neutral-1 dark:text-dark-neutral-1;
 
     h2 {
-      @apply heading-2 mt-margin-mobile first:mt-0 mb-5;
+      @apply heading-2 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h3 {
-      @apply heading-3 mt-margin-mobile first:mt-0 mb-5;
+      @apply heading-3 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h4 {
-      @apply heading-4 mt-margin-mobile first:mt-0 mb-5;
+      @apply heading-4 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h5 {
-      @apply subheading-1 mt-margin-mobile first:mt-0 mb-5;
+      @apply subheading-1 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     h6 {
-      @apply subheading-2 mt-margin-mobile first:mt-0 mb-5;
+      @apply subheading-2 mt-margin-mobile first:mt-0 mb-5 text-left;
     }
 
     p {

From f3e2759fe3081597d2116a3047a699f78a7464f5 Mon Sep 17 00:00:00 2001
From: nahbee10 <nahee@sanctuary.computer>
Date: Wed, 11 Dec 2024 01:30:05 +0900
Subject: [PATCH 6/6] remove console

---
 src/modules/side-nav/MobileMenuNavModule.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/side-nav/MobileMenuNavModule.tsx b/src/modules/side-nav/MobileMenuNavModule.tsx
index 42c417e85..c90d829b5 100644
--- a/src/modules/side-nav/MobileMenuNavModule.tsx
+++ b/src/modules/side-nav/MobileMenuNavModule.tsx
@@ -96,7 +96,6 @@ export const MobileMenuNav: FC<Props> = ({ sideNavData, navState }) => {
           <ul className="accordion-body">
             {selectedCategory &&
               selectedCategory.sections.map((section) => {
-                console.log(section, navState.category, selectedCategory.id);
                 return (
                   <li key={section.id} className="mt-4 first:mt-5">
                     <button