download selection wip

Co-authored-by: sn <baiorett@koisu.ru>

src/lib/components/atoms/DownloadChannel.svelte

@@ -23,7 +23,7 @@
 	button {
 		font-weight: 300;
 		height: 60px;
-		width: 21vw;
+		width: 43vw;
 		color: var(--white);
 		border-radius: 200px;
 		border: 0;

src/lib/components/atoms/DownloadSelector.svelte

@@ -0,0 +1,95 @@
+<script>
+    import Button from '$lib/components/atoms/Button.svelte';
+</script>
+
+<div class="download-selection">
+    <h1>99.9.9a</h1>
+    <h3>2022-07-11</h3>
+    <div class="info">
+        <div class='rounded-fill'>
+            <h2>Features</h2>
+        </div>
+        <ul>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+            <li><h4>sn is so oococolol</h4></li>
+        </ul>
+    </div>
+    <div class="button">
+        <Button>Download</Button>
+    </div>
+</div>
+
+<style>
+	.download-selection {
+		background-color: var(--grey-two);
+		border-radius: 20px;
+        justify-content: center;
+		height:50vh;
+	}
+
+    h1 {
+        text-align: center;
+        margin-top: 1.75rem;
+        font-weight: 700;
+    }
+    h2 {
+        text-align: left;
+        font-weight: 700;
+        font-size:1.2rem;
+    }
+
+    .rounded-fill {
+        display:inline-block;
+        border-radius: 200px;
+        margin-left: 1rem;
+        padding: 0.5rem 1rem;
+        background-color: var(--grey-three);
+    }
+
+    .info{
+        margin-top: 1rem;
+        overflow-y: scroll;
+        margin-right: 0.5rem;
+        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
+    }
+
+    h3 {
+        font-weight:400;
+        font-size: 1.2rem;
+        text-align: center;
+        color:var(--grey-six)
+    }
+
+    h4 {
+        color: var(--white);
+        font-weight: 300;
+    }
+
+    ul {
+        margin-left:3rem;
+        line-height: 1.5rem;
+        height: 10vw;
+    }
+
+    li {
+        color:var(--white)
+    }
+
+    .button {
+        display:flex;
+        justify-content: center;
+        margin-top: -2rem;
+    }
+
+</style>

src/lib/components/atoms/Wave.svelte

@@ -11,7 +11,8 @@
   svg {
     position: absolute;
     z-index: -2;
-    bottom:0
+    bottom:0;
+    transform: translateY(20%);
   }
 
   .wave {

src/lib/components/molecules/DownloadChannelHost.svelte

@@ -1,12 +1,12 @@
 <script>
-	import DownloadSelection from '../atoms/DownloadSelection.svelte';
+	import DownloadChannel from '../atoms/DownloadChannel.svelte';
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
 
-	export let items = ['Manager', 'CLI', 'Patches', 'Integrations'];
+	export let items = ['Stable', 'Development'];
 
-	export let activeTab = 'Manager';
+	export let activeTab = 'Stable';
 
 	$: handleTabChange = (item) => {
 		activeTab = item;
@@ -15,10 +15,10 @@
 
 <div class="download-selection">
 	{#each items as item}
-		<DownloadSelection active={item === activeTab} 
+		<DownloadChannel active={item === activeTab} 
 			on:click={handleTabChange(item)}>
 				{item}
-		</DownloadSelection>
+		</DownloadChannel>
 	{/each}
 </div>
 

src/lib/components/molecules/DownloadSelectorHost.svelte

@@ -0,0 +1,25 @@
+<script>
+    import DownloadSelector from "../atoms/DownloadSelector.svelte";
+</script>
+
+<div class="download-selector-main">
+    <DownloadSelector></DownloadSelector>
+    <DownloadSelector></DownloadSelector>
+    <DownloadSelector></DownloadSelector>
+    <DownloadSelector></DownloadSelector>
+</div>
+
+
+<style>
+    .download-selector-main {
+        margin-top: 2rem;
+        padding: 12px 12px;
+        border-radius: 25px;
+        background-color: var(--grey-one);
+        width: 100;
+        gap:15px;
+		align-items: center;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
+</style>

src/routes/__layout.svelte

@@ -69,6 +69,7 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 		--grey-three: #3e404f;
 		--grey-four: #1B1E29;
 		--grey-five: #D0D0D0;
+		--grey-six: #a19e9e;
 	}
 
 	:global(::selection) {
@@ -97,13 +98,13 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	}
 
 	:global(::-webkit-scrollbar-thumb) {
-		background-color: var(--grey-two);
+		background-color: var(--grey-three);
 		border-radius: 20px;
 		border: 6px solid transparent;
 		background-clip: content-box;
 	}
 
 	:global(::-webkit-scrollbar-thumb:hover) {
-		background-color: var(--grey-three);
+		background-color: var(--grey-four);
 	}
 </style>

src/routes/download.svelte

@@ -1,7 +1,9 @@
 <script>
-    import DownloadSelectionHost from '$lib/components/molecules/DownloadSelectionHost.svelte';
+    import DownloadChannelHost from '$lib/components/molecules/DownloadChannelHost.svelte';
+    import DownloadSelectorHost from '$lib/components/molecules/DownloadSelectorHost.svelte';
 </script>
 
 <div class="wrapper">
-    <DownloadSelectionHost></DownloadSelectionHost>
+    <DownloadChannelHost></DownloadChannelHost>
+    <DownloadSelectorHost></DownloadSelectorHost>
 </div>