From f9dd8054940d916a67a51bb95d496d7cd7c77fb6 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 15 Aug 2022 21:35:38 -0400
Subject: [PATCH] fix: social button hover glitch, cleanup: contrib button

---
 .../components/atoms/ContributorButton.svelte |  8 ++--
 src/lib/components/atoms/SocialButton.svelte  | 46 +++++++++++--------
 .../components/molecules/SocialHost.svelte    |  3 +-
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/atoms/ContributorButton.svelte b/src/lib/components/atoms/ContributorButton.svelte
index 957ed7c..8a9accb 100644
--- a/src/lib/components/atoms/ContributorButton.svelte
+++ b/src/lib/components/atoms/ContributorButton.svelte
@@ -22,6 +22,7 @@
 	button {
 		color: var(--white);
 		border-radius: 200px;
+		overflow: hidden;
         border: 0;
 		/* padding: 5px 5px; */
         width:86px;
@@ -40,10 +41,7 @@
 	}
 
 	img {
-		/* margin: 0;
-		padding: 0; */
-		border-radius: 50%;
-        max-height: 86px;
-        max-width: 86px;
+		height: 100%;
+		width: 100%;
 	}
 </style>
diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/lib/components/atoms/SocialButton.svelte
index a602b98..4211890 100644
--- a/src/lib/components/atoms/SocialButton.svelte
+++ b/src/lib/components/atoms/SocialButton.svelte
@@ -1,38 +1,44 @@
 <script>
 	export let src = 'socials/github.svg';
-    export let alt = 'GitHub';
-    export let href = '#';
+	export let alt = 'GitHub';
+	export let href = '#';
 </script>
 
-<button>
-    <a {href}>
-        <img {src} {alt}>
-    </a>
-</button>
+<div>
+	<button>
+		<a {href}>
+			<img {src} {alt} />
+		</a>
+	</button>
+</div>
 
 <style>
 	button {
-		color: var(--white);
-		border-radius: 200px;
-        border: 0;
+		border: 0;
+		width: 60px;
+		height: 60px;
 		padding: 14px;
-        width:60px;
-        height:60px;
 		cursor: pointer;
+		border-radius: 200px;
+		transition: transform 0.4s var(--bezier-one);
 		background-color: var(--grey-four);
-		font-size: 1.5rem;
-		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
+		color: var(--white);
 		user-select: none;
-        margin-right:0.5rem;
+		margin-right: 0.5rem;
 		margin-left: 0.5rem;
 	}
 
-    img {
-        width:30px;
-    }
+	div {
+		display: inline-block;
+	}
 
-	button:hover {
-		transform: translate(0%, -5%);
+	img {
+		transition: filter 0.4s var(--bezier-one);
+		width: 30px;
+	}
+
+	div:hover > button {
+		transform: translateY(-5%);
 	}
 
 	button:hover img {
diff --git a/src/lib/components/molecules/SocialHost.svelte b/src/lib/components/molecules/SocialHost.svelte
index 72dbf9f..de9e05b 100644
--- a/src/lib/components/molecules/SocialHost.svelte
+++ b/src/lib/components/molecules/SocialHost.svelte
@@ -12,11 +12,10 @@
 <style>
     .social-host {
         justify-content: space-between;
-        position: absolute;
 		align-items: center;
+        position: fixed;
         bottom: 3rem;
         left: 5.5rem;
-        user-select: none;
     }
 
     @media screen and (max-width: 1052px) {