fix(ui): Fixes misaligned footer after tailwind update

tif-calin · Aug 11, 2024 · 13a0dd1 · 13a0dd1
1 parent 2e83de7
commit 13a0dd1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,28 @@
+import Socials from "./Socials.tsx";
+
+const Footer = () => {
+  return (
+    <footer>
+      <div
+        class={`max-w-screen-md mx-auto p-4 flex flex-row flex-shrink flex-wrap gap-1 items-center justify-between rounded text-xl`}
+        /* NOTE: `backdrop-blur` is currently broken in twind */
+        style="backdrop-filter: blur(8px);"
+      >
+        <span class="flex flex-grow items-center gap-1 text-left w-[33%] whitespace-nowrap">
+          <span class="rotate-180 translate-y-[1.5px]">&copy;</span>
+          <a href="https://github.com/tif-calin/work.culi.page_2fresh">
+            steal this
+          </a>
+        </span>
+        <Socials />
+        <span class="text-right w-[33%] whitespace-nowrap flex-grow">
+          <span>
+            (re-)built with <a href="https://fresh.deno.dev/">fresh 🍋</a>
+          </span>
+        </span>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/Socials.tsx b/components/Socials.tsx
@@ -21,7 +21,7 @@ const Socials = () => {
           key={key}
           /* TODO: find a better way to manage TW specificity than `!important`
                                                              - culi, '23.02feb */
-          class="transition group-hover:opacity-50 !hover:opacity-100"
+          class="transition group-hover:opacity-50 hover:!opacity-100"
           title={key}
           href={url}
         >

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -4,6 +4,7 @@ import ProjectsSection from "../components/home/sections/ProjectsSection.tsx";
 import ToolsSection from "../components/home/sections/ToolsSection.tsx";
 import Socials from "../components/Socials.tsx";
 import Contact from "../components/home/Contact.tsx";
+import Footer from "../components/Footer.tsx";
 
 const sectionContentClass =
   " flex flex-col items-center justify-center max-w-screen-md mx-auto p-4";
@@ -39,26 +40,7 @@ export default function Home() {
         <ToolsSection contentClass={sectionClass} />
         <Contact contentClass={sectionContentClass} />
       </main>
-      <footer>
-        <div
-          class={`${sectionContentClass} flex flex-row flex-shrink flex-wrap gap-1 items-center justify-between rounded text-xl`}
-          /* NOTE: `backdrop-blur` is currently broken in tw */
-          style="backdrop-filter: blur(8px);"
-        >
-          <span class="flex flex-grow items-center gap-1 text-left w-[33%] whitespace-nowrap">
-            <span class="rotate-180 translate-y-[1.5px]">&copy;</span>
-            <a href="https://github.com/tif-calin/work.culi.page_2fresh">
-              steal this
-            </a>
-          </span>
-          <Socials />
-          <span class="text-right w-[33%] whitespace-nowrap flex-grow">
-            <span>
-              (re-)built with <a href="https://fresh.deno.dev/">fresh 🍋</a>
-            </span>
-          </span>
-        </div>
-      </footer>
+      <Footer />
       <svg
         class="fixed inset-0 pointer-events-none z-[-1]"
         transform="translateZ(0)"