From 05838d395bfa71a0d08faf1cd7e5af8e10092bd8 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 17 Jan 2025 13:13:01 +0000
Subject: [PATCH] fix(web): handle footer responsively

---
 packages/web/app/app.vue | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/web/app/app.vue b/packages/web/app/app.vue
index 930d6cb..065a2fb 100644
--- a/packages/web/app/app.vue
+++ b/packages/web/app/app.vue
@@ -35,22 +35,25 @@ const { data: repos } = useRepos()
       </nav>
       <NuxtPage />
     </main>
-    <footer class="justify-center flex gap-2 font-sans p-2 text-center text-sm opacity-75 hover:opacity-100 mb-4">
+    <footer class="justify-center flex flex-col md:flex-row gap-2 font-sans p-2 text-center text-sm opacity-75 hover:opacity-100 mb-4">
       <a
         class="no-underline hover:underline text-white"
         href="https://github.com/danielroe/unsight.dev"
       >
         source
       </a>
-      &middot;
-      made with ❤️ by <a
-        class="no-underline font-semibold hover:underline text-white"
-        href="https://bsky.app/profile/danielroe.dev"
-      >
-        @danielroe.dev
-      </a>
-      &middot;
-      {{ repos.length }} repos
+      <span class="before:hidden md:before:inline-block before:content-['·'] before:mr-2">
+        made with ❤️ by
+        <a
+          class="no-underline font-semibold hover:underline text-white"
+          href="https://bsky.app/profile/danielroe.dev"
+        >
+          @danielroe.dev
+        </a>
+      </span>
+      <span class="before:hidden md:before:inline-block before:content-['·'] before:mr-2">
+        {{ repos.length }} repos
+      </span>
     </footer>
   </div>
 </template>
-- 
2.51.2