fix footer ordering

arlyon · Jun 8, 2024 · 8213670 · 8213670
1 parent 229155f
commit 8213670
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/site/app/page.tsx b/site/app/page.tsx
@@ -32,7 +32,7 @@ const LogoIcon = () => (
     aria-current="page"
     className="rounded-2xl justify-center items-center p-[1px] flex relative overflow-hidden hover:scale-105 transition-transform"
   >
-    <div className="animate-[spin_5s_linear_infinite] duration-500 absolute bg-gradient-to-br from-green-600 to-green-400 dark:from-green-950 dark:to-green-500 size-20"></div>
+    <div className="animate-[spin_3s_linear_infinite] duration-500 absolute bg-gradient-to-br from-green-600 to-green-400 dark:from-green-950 dark:to-green-500 size-20"></div>
     <div className="relative text-white bg-gradient-to-br from-green-600 to-green-400 dark:from-black dark:to-green-800 p-3 aspect-square rounded-2xl flex items-center justify-center">
       <Logo />
     </div>
@@ -57,7 +57,7 @@ export default function HomePage() {
         <div />
         <div />
         <div />
-        <div className="bg-gradient-to-tl dark:from-black dark:to-green-950 flex relative flex-col gap-6 items-center justify-center bg-background p-4 lg:p-16 outline outline-1 outline-green-500 dark:outline-green-600">
+        <div className="dark:bg-gradient-to-tl dark:from-black dark:to-green-950 flex relative flex-col gap-6 items-center justify-center bg-background p-4 lg:p-16 outline outline-1 outline-green-500 dark:outline-green-600">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"

diff --git a/site/components/footer.tsx b/site/components/footer.tsx
@@ -10,15 +10,7 @@ import { ThemeToggle } from "./theme-toggle";
 export function Footer() {
   return (
     <footer className="w-full bg-primary-foreground py-12 text-sm border-t">
-      <div className="container mx-auto grid grid-cols-2 lg:grid-cols-[auto_1fr_1fr_max-content] gap-16 px-8">
-        <div className="max-w-96">
-          <Logo />
-          <h3 className="text-lg font-semibold mb-4 mt-2">Litehouse</h3>
-          <p className="text-muted-foreground">
-            Litehouse is a lightweight OS for your home, designed from the
-            ground up to be easy to use, resource efficient, open, and secure.
-          </p>
-        </div>
+      <div className="container mx-auto grid grid-cols-2 lg:grid-cols-[auto_1fr_1fr_max-content] gap-8 sm:gap-16 px-8">
         <div>
           <h4 className="font-semibold mb-2">Resources</h4>
           <ul className="text-muted-foreground">
@@ -51,19 +43,6 @@ export function Footer() {
             </li>
           </ul>
         </div>
-        <div className="lg:order-3 flex flex-col items-start gap-4">
-          <p className="text-muted-foreground">
-            Made by{" "}
-            <Link
-              href="https://github.com/arlyon"
-              className="text-primary hover:underline"
-              prefetch={false}
-            >
-              @arlyon
-            </Link>
-          </p>
-          <ThemeToggle />
-        </div>
         <div>
           <h4 className="font-semibold mb-2">Community</h4>
           <ul className="text-muted-foreground">
@@ -87,6 +66,27 @@ export function Footer() {
             </li>
           </ul>
         </div>
+        <div className="lg:-order-1 max-w-96">
+          <Logo />
+          <h3 className="text-lg font-semibold mb-4 mt-2">Litehouse</h3>
+          <p className="text-muted-foreground">
+            Litehouse is a lightweight OS for your home, designed from the
+            ground up to be easy to use, resource efficient, open, and secure.
+          </p>
+        </div>
+        <div className="flex flex-col items-start gap-4">
+          <p className="text-muted-foreground">
+            Made by{" "}
+            <Link
+              href="https://github.com/arlyon"
+              className="text-primary hover:underline"
+              prefetch={false}
+            >
+              @arlyon
+            </Link>
+          </p>
+          <ThemeToggle />
+        </div>
       </div>
     </footer>
   );