download selection wip, wrapper fix

src/lib/components/atoms/DownloadSelection.svelte

@@ -0,0 +1,45 @@
+<script>
+	export let kind = 'secondary';
+	$: type = 'button-' + kind;
+	export let href = '#';
+</script>
+
+<a {href}>
+	<button class={type}>
+			<slot/>
+	</button>
+</a>
+
+<style>
+	a {
+		color: var(--white);
+		text-decoration: none;
+	} 
+
+	button,
+	.button-secondary {
+		font-weight: 300;
+        height:60px;
+        width:20vw;
+		color: var(--white);
+		border-radius: 200px;
+        border:0;
+		padding: 12px 40px;
+		cursor: pointer;
+		background-color: transparent;
+		font-size: 1.5rem;
+		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		transition-duration: 0.4s;
+		user-select: none;
+	}
+
+	.button-primary {
+		background-color: var(--red);
+		box-shadow: 0px 0px 32px 1px var(--red-glow);
+	}
+
+	button:hover {
+		background-color: var(--grey-two);
+        font-weight:500;
+	}
+</style>

src/lib/components/molecules/ContributorHost.svelte

@@ -35,9 +35,8 @@
 
     .social-host {
         width: 100;
+        gap:2rem;
 		align-items: center;
-        margin-left: 5rem;
-        margin-right: 5rem;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }

src/lib/components/molecules/DownloadSelectionHost.svelte

@@ -0,0 +1,22 @@
+<script>
+	import DownloadSelection from '../atoms/DownloadSelection.svelte';
+</script>
+
+<div class="download-selection">
+    <DownloadSelection>Manager</DownloadSelection>
+    <DownloadSelection>CLI</DownloadSelection>
+    <DownloadSelection>Patches</DownloadSelection>
+    <DownloadSelection>Integrations</DownloadSelection>
+</div>
+
+<style>
+	.download-selection {
+		transform: translateY(60%);
+		background-color: var(--grey-one);
+		border-radius: 200px;
+		display: flex;
+		justify-content: space-between;
+
+		padding: 8px 8px;
+	}
+</style>