From d93fa031253426af0feb44f09b3dc267d0268911 Mon Sep 17 00:00:00 2001
From: Jonathan McCaffrey <jonmcc.0723@gmail.com>
Date: Mon, 2 May 2022 12:51:22 -0400
Subject: [PATCH] style(Footer) Made link icons bigger, and more tweaks

---
 Components/Shared/FooterComponent.razor | 30 +++++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/Components/Shared/FooterComponent.razor b/Components/Shared/FooterComponent.razor
index f28ac90..a6c3f25 100644
--- a/Components/Shared/FooterComponent.razor
+++ b/Components/Shared/FooterComponent.razor
@@ -3,21 +3,21 @@
 <div class="footerContainer" xmlns="http://www.w3.org/1999/html">
     <div class="footerSocials">
 
-        <a href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/discussions" target="_blank">
+        <a class="footerIcon" href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/discussions" target="_blank">
             <i class="fa-brands fa-github"></i>
         </a>
 
-        <a href="mailto:igpfanreference@jonathanmccaffrey.com" target="_blank">
+        <a class="footerIcon" href="mailto:igpfanreference@jonathanmccaffrey.com" target="_blank">
             <i class="fa-solid fa-envelope"></i>
         </a>
 
-        <a href="https://discord.gg/uMq8bMGeeN" target="_blank">
+        <a class="footerIcon" href="https://discord.gg/uMq8bMGeeN" target="_blank">
             <i class="fa-brands fa-discord"></i>
         </a>
-        <a href="https://www.youtube.com/channel/UCQx88d5C12yp4l7uszNYrdQ" target="_blank">
+        <a class="footerIcon" href="https://www.youtube.com/channel/UCQx88d5C12yp4l7uszNYrdQ" target="_blank">
             <i class="fa-brands fa-youtube"></i>
         </a>
-        <a href="https://www.twitch.tv/jonathanmccaffrey" target="_blank">
+        <a class="footerIcon" href="https://www.twitch.tv/jonathanmccaffrey" target="_blank">
             <i class="fa-brands fa-twitch"></i>
         </a>
     </div>
@@ -29,14 +29,30 @@
 
 
 <style>
+    .footerIcon {
+        font-size: 24px;
+        padding: 8px;
+        background-color: rgba(255,255,255,0.05);
+        border: 2px solid rgba(255,255,255,0.1);
+        border-radius: 6px;
+        line-height: 0;
+    }
+    
+    .footerIcon:hover {     
+        color: #8fc5ff;
+        background-color: rgba(200,200,255,0.1);
+        border: 2px solid rgba(140,140,255,0.4);
+    }
+            
+
     .footerContainer {
         width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding-top: 8px;
-        padding-bottom: 96px;
-        gap: 12px;
+        padding-bottom: 102px;
+        gap: 24px;
     }
     
     .footerSocials {