fix: inconsistent sizing on background of icons

1 files changed, 9 insertions, 5 deletions

diff --git a/src/components/Link.astro b/src/components/Link.astro
index 9a6708d..6a7c7ca 100644
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -20,7 +20,6 @@ const { icon, title, description, url } = Astro.props;
         <p class="link-description">{description}</p>
     </div>
 </a>
-
 <style>
     .link {
         padding: 0.75rem;
@@ -40,11 +39,7 @@ const { icon, title, description, url } = Astro.props;
     }
 
     .link-icon {
-        width: 3rem;
-        height: 3rem;
         margin-right: 1.125rem;
-        background: var(--pink-darker);
-        border-radius: 0.5rem;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -53,6 +48,15 @@ const { icon, title, description, url } = Astro.props;
     .link-icon i {
         font-size: 1.5rem;
         color: var(--zinc-50);
+        background: var(--pink-darker);
+        padding: 10%;
+        border-radius: 0.5rem;
+        background-size: cover;
+        width: 3rem;
+        height: 3rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
     .link-title {