From 97d333ec6aee525a01f3151f5590f407943e7818 Mon Sep 17 00:00:00 2001
From: afnzmn <afnzmn@gmail.com>
Date: Mon, 18 Jul 2022 22:46:58 -0400
Subject: [PATCH] download selection wip, wrapper fix

---
 .../components/atoms/DownloadSelection.svelte | 45 +++++++++++++++++++
 .../molecules/ContributorHost.svelte          |  3 +-
 .../molecules/DownloadSelectionHost.svelte    | 22 +++++++++
 src/routes/__layout.svelte                    |  7 +++
 src/routes/credits.svelte                     |  2 -
 src/routes/download.svelte                    |  7 +++
 src/routes/index.svelte                       | 10 -----
 7 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/atoms/DownloadSelection.svelte
 create mode 100644 src/lib/components/molecules/DownloadSelectionHost.svelte

diff --git a/src/lib/components/atoms/DownloadSelection.svelte b/src/lib/components/atoms/DownloadSelection.svelte
new file mode 100644
index 0000000..c30733b
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index 3a2b5f0..d9926c4 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/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));
     }
diff --git a/src/lib/components/molecules/DownloadSelectionHost.svelte b/src/lib/components/molecules/DownloadSelectionHost.svelte
new file mode 100644
index 0000000..f6e672c
--- /dev/null
+++ b/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>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7b76219..e691db2 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -4,6 +4,7 @@ import Button from "$lib/components/atoms/Button.svelte";
 import NavHost from "$lib/components/molecules/NavHost.svelte";
 import SocialButton from "$lib/components/atoms/SocialButton.svelte";
 import SocialHost from "$lib/components/molecules/SocialHost.svelte";
+import Wave from '$lib/components/atoms/Wave.svelte';
 
 </script>
 
@@ -28,6 +29,7 @@ import SocialHost from "$lib/components/molecules/SocialHost.svelte";
 <NavHost></NavHost>
 <slot />
 <SocialHost />
+<Wave />
 
 <style>
 	:global(*) {
@@ -50,6 +52,11 @@ import SocialHost from "$lib/components/molecules/SocialHost.svelte";
 		background-color: #0f111a;
 	}
 
+	:global(.wrapper) {
+		margin-left: 6rem;
+		margin-right: 6rem;
+	}
+
 	:root {
 		--white: #ffe1e1;
 		--red: #ff4151;
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index a6b5369..cbc0ff4 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,7 +1,5 @@
 <script>
-	import Wave from '$lib/components/atoms/Wave.svelte';
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
     </script>
 
 <div class="wrapper">
diff --git a/src/routes/download.svelte b/src/routes/download.svelte
index e69de29..45f3646 100644
--- a/src/routes/download.svelte
+++ b/src/routes/download.svelte
@@ -0,0 +1,7 @@
+<script>
+    import DownloadSelectionHost from '$lib/components/molecules/DownloadSelectionHost.svelte';
+</script>
+
+<div class="wrapper">
+    <DownloadSelectionHost></DownloadSelectionHost>
+</div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 944a9f1..bd5c903 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,5 @@
 <script>
 	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
-	import Wave from '$lib/components/atoms/Wave.svelte';
 	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
 </script>
 
@@ -9,12 +8,3 @@
 	<HeroImage />
 </div>
 
-<Wave />
-
-
-<style>
-	.wrapper {
-		padding-left: 6rem;
-		padding-right: 6rem;
-	}
-</style>