From c9c45f8d28b1a9ae34d212616baad443d709c756 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Feb 2025 00:32:47 +0100
Subject: [PATCH] make footer more compact on mobile

---
 src/components/layout/Footer.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Footer.vue b/src/components/layout/Footer.vue
index c50262c..3b8ecf4 100644
--- a/src/components/layout/Footer.vue
+++ b/src/components/layout/Footer.vue
@@ -7,17 +7,17 @@ const { t } = useI18n()
 
 <template>
   <footer class="bg-card border-t border-border">
-    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-      <div class="flex flex-col md:flex-row justify-between items-center py-4 gap-4">
+    <div class="mx-auto max-w-7xl px-3 sm:px-6 lg:px-8">
+      <div class="flex flex-col md:flex-row justify-between items-center py-2 sm:py-4 gap-2 sm:gap-4">
         <!-- Powered by section -->
-        <div class="flex items-center space-x-2 text-sm text-muted-foreground">
+        <div class="flex items-center gap-1.5 text-xs sm:text-sm text-muted-foreground">
           <span>{{ t('footer.poweredBy') }}</span>
-          <img src="@/assets/bitcoin.svg" alt="Bitcoin" class="w-8 h-8" />
+          <img src="@/assets/bitcoin.svg" alt="Bitcoin" class="w-6 h-6 sm:w-8 sm:h-8" />
         </div>
         <div class="flex items-center gap-4">
           <a href="https://lnbits.atitlan.io/tipjar/3" target="_blank" rel="noopener noreferrer"
-            class="inline-flex items-center justify-center rounded-md bg-accent/10 px-4 py-2 text-sm font-medium text-accent border border-accent/20 hover:bg-accent/20 hover:border-accent/40 transition-colors">
-            <Rocket class="mr-2 h-4 w-4" />
+            class="inline-flex items-center justify-center rounded-md bg-accent/10 px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-accent border border-accent/20 hover:bg-accent/20 hover:border-accent/40 transition-colors">
+            <Rocket class="mr-1.5 sm:mr-2 h-3.5 w-3.5 sm:h-4 sm:w-4" />
             {{ t('footer.donate') }}
           </a>
         </div>