feat: update social buttons with animation effects (#17)

src/Client/Components/Content/Connect.razor

@@ -2,18 +2,18 @@
     <div class="d-flex flex-column flex-wrap">
         <h5 class="text-primary pt-3 pb-2">_Connect</h5>
 
-        <div class="d-flex flex-row">
-            <a href="https://threads.net/@@thevictorfryeadventure" target="_blank" class="btn-link">
-                <img src="/images/threads.svg" alt="Threads" class="social-icon m-1">
+        <div class="d-socials d-flex flex-row flex-wrap">
+            <a href="https://threads.net/@@thevictorfryeadventure" target="_blank" class="btn-social px-2">
+                <img src="/images/threads.svg" alt="Threads" class="img-social" />
             </a>
-            <a href="https://linkedin.com/in/victorfrye" target="_blank" class="btn-link">
-                <img src="/images/linkedin.svg" alt="LinkedIn" class="social-icon m-1">
+            <a href="https://linkedin.com/in/victorfrye" target="_blank" class="btn-social px-2">
+                <img src="/images/linkedin.svg" alt="LinkedIn" class="img-social" />
             </a>
-            <a href="https://github.com/victorfrye" target="_blank" class="btn-link">
-                <img src="/images/github.svg" alt="GitHub" class="social-icon m-1">
+            <a href="https://github.com/victorfrye" target="_blank" class="btn-social px-2">
+                <img src="/images/github.svg" alt="GitHub" class="img-social" />
             </a>
-            <a href="mailto:victorfrye@outlook.com" target="_blank" class="btn-link">
-                <img src="/images/envelope.svg" alt="Email Me" class="social-icon m-1">
+            <a href="mailto:victorfrye@outlook.com" target="_blank" class="btn-social px-2">
+                <img src="/images/envelope.svg" alt="Email Me" class="img-social" />
             </a>
         </div>
     </div>

src/Client/Components/Content/Connect.razor.css

@@ -0,0 +1,66 @@
+:root {
+
+    --threads: radial-gradient(circle farthest-corner at 35% 90%, #ffd600 0%, #ffd600 5%, #ff7a00 45%, #ff0069 60%, #d300c5 80%, #7638fa 95%);
+    --linkedin: #0077B5;
+    --github: #333;
+    --email: var(--gradient);
+}
+
+.d-socials {
+    gap: 1rem;
+}
+
+.btn-link {
+    fill: var(--primary);
+    border-bottom: none;
+}
+
+.img-social {
+    height: 20px;
+    width: 20px;
+}
+
+.btn-social {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: none;
+    background-color: transparent;
+    border-radius: 50%;
+    outline: 2px solid var(--secondary);
+    cursor: pointer;
+    transition: all 0.3s;
+    display: grid;
+    place-items: center;
+
+    fill: var(--primary);
+    border-bottom: none;
+}
+
+.btn-social:hover {
+    outline-offset: 3px;
+    transition: all 0.3s;
+}
+
+.btn-social img {
+    transition: all 0.3s;
+}
+
+.btn-social:hover img {
+    transform: scale(1.15);
+}
+
+.btn-social:hover:nth-child(1) {
+    background: radial-gradient(circle at 30% 107%, #ffd600 0%, #ffd600 10%, #ff7a00 20%, #ff0069 50%, #d300c5 75%, #7638fa 90%);
+}
+
+.btn-social:hover:nth-child(2) {
+    background: #0077B5;
+}
+
+.btn-social:hover:nth-child(3) {
+    background: #333;
+}
+
+.btn-social:hover:nth-child(4) {
+    background: var(--gradient);
+}

src/Client/wwwroot/styles/app.css

@@ -10,7 +10,7 @@ body {
     --tertiary: #36454f;
     --bg: #1d1d20;
 
-    --gradient: linear-gradient(0deg, var(--secondary) 0%, black 70%);
+    --gradient: radial-gradient(circle at 30% 107%, var(--primary) 0%, var(--secondary) 15%, black 70%);
     --gradient-tl: linear-gradient(135deg, var(--secondary) 0%, black 50%, var(--secondary) 100%);
     --gradient-br: linear-gradient(135deg, black 0%, var(--secondary) 50%, black 100%);
 }
@@ -65,21 +65,14 @@ body {
     background: var(--gradient) !important;
 }
 
-.social-icon {
-    height: 24px;
-    width: 24px;
-}
-
-
-a,
-.btn-link {
+a {
     color: var(--primary);
     text-decoration: none !important;
     border-bottom: 1px dotted var(--primary);
 }
 
-.btn-link {
-    fill: var(--primary);
+a:hover {
+    color: var(--secondary);
     border-bottom: none;
 }
 
@@ -89,28 +82,6 @@ a,
     border-color: var(--primary);
 }
 
-.btn:focus,
-.btn:active:focus,
-.btn-link.nav-link:focus,
-.form-control:focus,
-.form-check-input:focus {
-    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--tertiary);
-}
-
-.content {
-    padding-top: 1.1rem;
-}
-
-h1:focus {
-    outline: none;
-}
-
-.accent-bar {
-    margin-left: 30px;
-    position: relative;
-    display: block;
-}
-
 .valid.modified:not([type=checkbox]) {
     outline: 1px solid #26b050;
 }