Fix footer layout

azvyae · Oct 10, 2024 · 7a517ef · 7a517ef
1 parent 41b7b1d
commit 7a517ef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/footer/autobacklink.tsx b/src/components/footer/autobacklink.tsx
@@ -27,9 +27,9 @@ function AutoBacklinks() {
       .map((_, i) => (
         <div
           key={i}
-          className={`w-fit flex gap-2 whitespace-nowrap items-center font-medium transition-colors rounded text-[#5a685d] dark:text-light py-1 relative`}
+          className={`w-fit flex gap-1 whitespace-nowrap items-center font-medium transition-colors rounded text-[#5a685d] dark:text-light py-1 relative`}
         >
-          <div className="flex relative items-center h-full gap-2">
+          <div className="flex relative items-center h-full gap-1">
             <span
               style={{
                 width: 64 + (i % 2 === 0 ? i : i * 16),
@@ -49,10 +49,10 @@ function AutoBacklinks() {
       href={item.url}
       target="_blank"
       rel="noopener noreferrer"
-      className={`w-fit flex gap-2 whitespace-nowrap font-medium transition-colors rounded group text-[#5a685d] dark:text-light py-1 relative`}
+      className={`w-fit flex gap-1 whitespace-nowrap font-medium transition-colors rounded group text-[#5a685d] dark:text-light py-1 relative`}
       title={`Visit ${item.label}`}
     >
-      <div className="flex relative items-center gap-2">
+      <div className="flex relative items-center gap-1">
         {item.label}
         <span className="border-b-2 group-hover:w-full w-0 transition-[width] absolute bottom-0"></span>
       </div>

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -21,7 +21,9 @@ function Footer() {
           className="justify-center flex-col items-start text-base flex"
         >
           <h6 className="font-extrabold text-lg mb-2">Links</h6>
-          <MainLinks />
+          <div className="grid gap-1">
+            <MainLinks />
+          </div>
         </div>
         <div
           data-item="social-links"
@@ -37,7 +39,7 @@ function Footer() {
           <h6 className="font-extrabold text-lg mb-2 flex gap-2 items-center">
             Check Also <HiExternalLink />
           </h6>
-          <div className="flex-wrap gap-2 items-start text-base flex">
+          <div className="flex-wrap gap-1 items-start text-base flex">
             <AutoBacklinks />
           </div>
         </div>