From 14163cf48a00e3cbe3d19f5b69c5f60bb2ebbfa9 Mon Sep 17 00:00:00 2001
From: Barbara Peric <b.peric10@gmail.com>
Date: Mon, 31 Mar 2025 11:45:42 +0100
Subject: [PATCH 1/2] fix: touch area for social media icons

---
 components/Footer.vue         | 2 +-
 components/SocialNetworks.vue | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/Footer.vue b/components/Footer.vue
index 30ed67c0..477b8b32 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -9,7 +9,7 @@ const { getStarted, resources } = useActions('footerLinks')
         <div class="header">
           <MailingListSignup />
         </div>
-        <div class="header flex text-1.2em lg:justify-center">
+        <div class="flex text-1.2em lg:justify-center">
           <SocialNetworks class="items-center" icon-class="hover:color-brand-1 hover:scale-110" />
         </div>
         <div>
diff --git a/components/SocialNetworks.vue b/components/SocialNetworks.vue
index f5d1999c..e5f53f2d 100644
--- a/components/SocialNetworks.vue
+++ b/components/SocialNetworks.vue
@@ -7,9 +7,13 @@ const socialNetworks = useActions('socialNetworks')
 </script>
 
 <template>
-  <div class="flex gap-4">
+  <div class="h-fit flex flex-wrap justify-center gap-4">
     <div v-for="n in socialNetworks" :key="n.name">
-      <AppLink :href="n.href" class="flex items-center justify-center transition" :class="iconClass">
+      <AppLink
+        :href="n.href"
+        class="min-h-[48px] min-w-[48px] flex items-center justify-center p-2 transition"
+        :class="iconClass"
+      >
         <div :class="n.icon" :title="`${n.description} on ${n.name}`" />
       </AppLink>
     </div>

From 73f74d644ef82dcfe9814df211107bf411734a39 Mon Sep 17 00:00:00 2001
From: Barbara Peric <b.peric10@gmail.com>
Date: Wed, 2 Apr 2025 10:18:19 +0100
Subject: [PATCH 2/2] fix: alignment on small screens

---
 components/Footer.vue         | 6 +++---
 components/SocialNetworks.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Footer.vue b/components/Footer.vue
index 477b8b32..8b7f91bb 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -5,12 +5,12 @@ const { getStarted, resources } = useActions('footerLinks')
 <template>
   <footer class="bg-brand-4 color-brand-3">
     <div class="border-3 b-current rounded-10 px-6 py-5 md:rounded-20 md:pt-12">
-      <div class="grid cols-1 gap-6 text-xs lg:cols-3 sm:cols-2 sm:text-base">
+      <div class="grid cols-1 gap-6 text-xs lg:grid-cols-[auto_1fr_auto] md:cols-[auto_1fr] sm:text-base">
         <div class="header">
           <MailingListSignup />
         </div>
-        <div class="flex text-1.2em lg:justify-center">
-          <SocialNetworks class="items-center" icon-class="hover:color-brand-1 hover:scale-110" />
+        <div class="flex justify-start text-1.2em md:justify-center">
+          <SocialNetworks class="lg:justify-center" icon-class="hover:color-brand-1 hover:scale-110" />
         </div>
         <div>
           <div class="grid cols-1 gap-6 lg:cols-2">
diff --git a/components/SocialNetworks.vue b/components/SocialNetworks.vue
index e5f53f2d..a4fc71a1 100644
--- a/components/SocialNetworks.vue
+++ b/components/SocialNetworks.vue
@@ -7,7 +7,7 @@ const socialNetworks = useActions('socialNetworks')
 </script>
 
 <template>
-  <div class="h-fit flex flex-wrap justify-center gap-4">
+  <div class="h-fit flex flex-wrap gap-4">
     <div v-for="n in socialNetworks" :key="n.name">
       <AppLink
         :href="n.href"