Update footer

3 files changed, 76 insertions, 63 deletions

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6b37226..b8dea07 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,26 +1,34 @@
 ---
-import { Separator } from '@/components/ui/separator'
 import { SOCIAL_LINKS } from '@/consts'
 import Link from './Link.astro'
 import SocialIcons from './SocialIcons.astro'
 ---
 
 <footer
-  class="mx-auto mb-8 flex w-full max-w-3xl flex-col items-center justify-center gap-y-2 px-4 sm:mb-4 sm:flex-row sm:justify-between"
+  class="mx-auto mt-16 flex w-full max-w-3xl items-center justify-between gap-y-2 px-2"
 >
-  <div class="flex flex-wrap items-center justify-center gap-x-2 text-center">
-    <span class="text-muted-foreground text-sm">
-      &copy; {new Date().getFullYear()} All rights reserved.
-    </span>
-    <Separator orientation="vertical" className="hidden h-4! sm:block" />
-    <p class="text-muted-foreground text-sm">
-      Made with 🤍 by <Link
-        href="https://codeberg.org/fosscet/"
-        class="text-foreground"
-        external
-        underline>fosscet</Link
-      >!
-    </p>
-  </div>
+  <p class="text-muted-foreground font-mono text-xs">
+    <span class="c">/*</span>
+    🄯 {new Date().getFullYear()}
+    <br />
+    <span class="c">&nbsp;*</span> Status: Up and Running (mostly) <br />
+    <span class="c">&nbsp;*</span> Generated at {Date.now()}ms UNIX. <br />
+    <span class="c">&nbsp;*</span>
+    <span class="text-primary">&lt;3</span>
+    <Link
+      href="https://codeberg.org/fosscet/"
+      class="text-foreground"
+      external
+      underline>fosscet</Link
+    >
+    <br />
+    <span class="c">&nbsp;*/</span>
+  </p>
+
+  <style>
+    .c {
+      color: var(--muted);
+    }
+  </style>
   <SocialIcons links={SOCIAL_LINKS} />
 </footer>
diff --git a/src/components/SocialIcons.astro b/src/components/SocialIcons.astro
index 236bb6a..ef843d6 100644
--- a/src/components/SocialIcons.astro
+++ b/src/components/SocialIcons.astro
@@ -12,7 +12,7 @@ interface Props {
 const { links } = Astro.props
 ---
 
-<ul class="flex flex-wrap gap-2" role="list">
+<ul class="flex flex-col flex-wrap gap-2" role="list">
   {
     links.map(({ href, label }) => (
       <li>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1e5d956..8b526f7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -48,50 +48,55 @@ const events = await getRecentEvents(SITE.featuredEventsCount)
       </p>
     </div>
   </section>
-  <section class="flex flex-col gap-y-4">
-    <h2 class="text-2xl font-medium">Events</h2>
-    <ul class="flex flex-col gap-y-4">
-      {
-        events.map((event) => (
-          <li>
-            <EventCard entry={event} />
-          </li>
-        ))
-      }
-    </ul>
-    <div class="flex justify-center">
-      <Link
-        href="/events"
-        class={buttonVariants({ variant: 'ghost' }) + ' group'}
-      >
-        See all posts <span
-          class="ml-1.5 transition-transform group-hover:translate-x-1"
-          >&rarr;</span
-        >
-      </Link>
-    </div>
-  </section>
-  <section class="flex flex-col gap-y-4">
-    <h2 class="text-2xl font-medium">Blog posts</h2>
-    <ul class="flex flex-col gap-y-4">
-      {
-        blog.map((post) => (
-          <li>
-            <BlogCard entry={post} />
-          </li>
-        ))
-      }
-    </ul>
-    <div class="flex justify-center">
-      <Link
-        href="/blog"
-        class={buttonVariants({ variant: 'ghost' }) + ' group'}
-      >
-        See all posts <span
-          class="ml-1.5 transition-transform group-hover:translate-x-1"
-          >&rarr;</span
-        >
-      </Link>
-    </div>
-  </section>
+  {
+    events.length > 0 && (
+      <section class="flex flex-col gap-y-4">
+        <h2 class="text-2xl font-medium">Events</h2>
+        <ul class="flex flex-col gap-y-4">
+          {events.map((event) => (
+            <li>
+              <EventCard entry={event} />
+            </li>
+          ))}
+        </ul>
+        <div class="flex justify-center">
+          <Link
+            href="/events"
+            class={buttonVariants({ variant: 'ghost' }) + ' group'}
+          >
+            See all events
+            <span class="ml-1.5 transition-transform group-hover:translate-x-1">
+              &rarr;
+            </span>
+          </Link>
+        </div>
+      </section>
+    )
+  }
+
+  {
+    blog.length > 0 && (
+      <section class="flex flex-col gap-y-4">
+        <h2 class="text-2xl font-medium">Blog posts</h2>
+        <ul class="flex flex-col gap-y-4">
+          {blog.map((post) => (
+            <li>
+              <BlogCard entry={post} />
+            </li>
+          ))}
+        </ul>
+        <div class="flex justify-center">
+          <Link
+            href="/blog"
+            class={buttonVariants({ variant: 'ghost' }) + ' group'}
+          >
+            See all posts{' '}
+            <span class="ml-1.5 transition-transform group-hover:translate-x-1">
+              &rarr;
+            </span>
+          </Link>
+        </div>
+      </section>
+    )
+  }
 </Layout>