fix: add header-list-style class for consistent list styling in header and footer

Author: Monil-KTX

input.css

@@ -109,3 +109,7 @@ main {
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+
+.header-list-style {
+  list-style: none;
+}

overrides/css/output.css

@@ -944,6 +944,10 @@ video {
   gap: 1.5rem;
 }
 
+.tw-gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .tw-space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.125rem * var(--tw-space-x-reverse));
@@ -1555,6 +1559,10 @@ main {
   background-clip: text;
 }
 
+.header-list-style {
+  list-style: none;
+}
+
 .hover\:tw-border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));

overrides/partials/footer.html

@@ -764,12 +764,12 @@
         <p>3000 Sand Hill Rd Building 1, Suite 260, Menlo Park, CA 94025</p>
       </div>
       <ul class="tw-flex tw-flex-wrap tw-gap-4 tw-text-xs tw-text-gray-300">
-        <li class="hover:tw-text-[#7782FF]">
+        <li class="hover:tw-text-[#7782FF] header-list-style">
           <a href="/policies/terms-of-service/" target="_blank"
             >Terms of Service</a
           >
         </li>
-        <li class="hover:tw-text-[#7782FF]">
+        <li class="hover:tw-text-[#7782FF] header-list-style">
           <a href="/policies/privacy-policy/" target="_blank">Privacy Policy</a>
         </li>
       </ul>
@@ -915,7 +915,7 @@
           </div>
         </div>
         <li
-          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10 header-list-style"
         >
           <a href="https://short.openobserve.ai/community" target="_blank">
             <img
@@ -926,7 +926,7 @@
           </a>
         </li>
         <li
-          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10 header-list-style"
         >
           <a href="https://twitter.com/OpenObserve" target="_blank">
             <img
@@ -937,7 +937,7 @@
           </a>
         </li>
         <li
-          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10 header-list-style"
         >
           <a
             href="https://www.linkedin.com/company/openobserve"
@@ -951,7 +951,7 @@
           </a>
         </li>
         <li
-          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10 header-list-style"
         >
           <a href="https://github.com/openobserve/openobserve" target="_blank">
             <img
@@ -962,7 +962,7 @@
           </a>
         </li>
         <li
-          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10"
+          class="tw-p-2 tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-white hover:tw-bg-opacity-10 header-list-style"
         >
           <a href="https://www.youtube.com/@openobserve" target="_blank">
             <img
@@ -1063,7 +1063,7 @@
           <div class="tw-text-white tw-font-medium tw-text-base tw-mb-3">${
             section.title
           }</div>
-          <ul class="tw-space-y-2 tw-text-gray-300 tw-text-xs">
+          <ul class="tw-space-y-2 tw-text-gray-300 tw-text-xs header-list-style">
             ${section.items
               .map(
                 (item) => `<li class="hover:tw-text-[#7782FF]">

overrides/partials/header.html

@@ -16,7 +16,7 @@
         </a>
         <nav>
           <ul
-            class="tw-flex tw-items-center tw-space-x-0.5 tw-w-full tw-font-semibold tw-text-[17px]"
+            class="tw-flex tw-items-center tw-space-x-0.5 tw-w-full tw-font-semibold tw-text-[17px] header-list-style"
           >
             <!-- PLATFORM -->
             <li class="tw-group tw-relative">
@@ -31,7 +31,7 @@
                 class="tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-full tw-mt-2 tw-w-[660px] tw-p-5 tw-bg-white tw-rounded-lg tw-border-2 tw-border-gray-300 tw-shadow-lg tw-hidden group-hover:tw-flex"
               >
                 <ul
-                  class="tw-space-y-2 tw-grid tw-grid-cols-3 tw-text-[14px] tw-text-gray-500 tw-w-full"
+                  class="tw-gap-y-2 tw-grid tw-grid-cols-3 tw-text-[14px] tw-text-gray-500 tw-w-full header-list-style"
                 >
                   <li class="hover:tw-text-black">
                     <a href="/logs/">Logs</a>
@@ -73,7 +73,7 @@
                 class="tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-full tw-mt-2 tw-w-[430px] tw-p-5 tw-bg-white tw-rounded-lg tw-border-2 tw-border-gray-300 tw-shadow-lg tw-hidden group-hover:tw-flex group-hover:tw-flex-wrap group-hover:tw-gap-x-8 group-hover:tw-gap-y-4"
               >
                 <ul
-                  class="tw-space-y-2 tw-grid tw-grid-cols-2 tw-text-[14px] tw-text-gray-500 tw-w-full"
+                  class="tw-gap-y-2 tw-grid tw-grid-cols-2 tw-text-[14px] tw-text-gray-500 tw-w-full header-list-style"
                 >
                   <li class="hover:tw-text-black">
                     <a href="/aws-monitoring/">AWS Monitoring</a>
@@ -110,7 +110,7 @@
                 class="tw-absolute tw-left-1/2 tw--translate-x-1/2 tw-top-full tw-mt-2 tw-w-[450px] tw-p-5 tw-bg-white tw-rounded-lg tw-border-2 tw-border-gray-300 tw-shadow-lg tw-hidden group-hover:tw-flex group-hover:tw-flex-wrap group-hover:tw-gap-x-8 group-hover:tw-gap-y-4"
               >
                 <ul
-                  class="tw-space-y-2 tw-grid tw-grid-cols-2 tw-text-[14px] tw-text-gray-500 tw-w-full"
+                  class="tw-gap-y-2 tw-grid tw-grid-cols-2 tw-text-[14px] tw-text-gray-500 tw-w-full header-list-style"
                 >
                   <li class="hover:tw-text-black">
                     <a href="/docs" target="_blank">Documentation</a>