button shenanigans, download selector almost done

src/lib/components/atoms/Button.svelte

@@ -2,10 +2,12 @@
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
 	export let href = '#';
+	export let fontsize = '1.2rem';
+
 </script>
 
 <a {href}>
-	<button class={type}>
+	<button class={type} style="font-size: {fontsize};">
 			<slot/>
 	</button>
 </a>
@@ -25,10 +27,8 @@
 		padding: 12px 40px;
 		cursor: pointer;
 		background-color: transparent;
-		font-size: 1.5rem;
 		margin-top: 45px;
 		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		margin-right: 20px;
 		user-select: none;
 	}
 

src/lib/components/atoms/DownloadChannel.svelte

@@ -22,8 +22,8 @@
 
 	button {
 		font-weight: 300;
-		font-size: 1.5rem;
+		font-size: 1.4rem;
-		height: 60px;
+		height: 55px;
 		width: 100%;
 		color: var(--white);
 		border-radius: 200px;

src/lib/components/atoms/DownloadSelector.svelte

@@ -3,26 +3,17 @@
 </script>
 
 <div class="download-selection">
-    <h1>99.9.9a</h1>
+    <h1>2.5.0</h1>
-    <h3>2022-07-11</h3>
+    <h4>2022-07-11</h4>
     <div class="info">
-        <div class='rounded-fill'>
+        <div class='rounded-fill'><h3>Features</h3></div>
-            <h2>Features</h2>
-        </div>
         <ul>
-            <li><h4>sn is so oococolol</h4></li>
+            <li><h5>feature request issue template <a href="https://github.com/revanced/revanced-patcher/commit/112bc998f4761a647cb9eab7454e35264fa96fd9">(1b39278)</a></h5></li>
-            <li><h4>sn is so oococolol</h4></li>
+            <li><h5>issue templates [skip ci] <a href="https://github.com/revanced/revanced-patcher/commit/112bc998f4761a647cb9eab7454e35264fa96fd9">(112bc99)</a></h5></li>
-            <li><h4>sn is so oococolol</h4></li>
+        </ul>
-            <li><h4>sn is so oococolol</h4></li>
+        <div class='rounded-fill'><h3>Bug Fixes</h3></div>
-            <li><h4>sn is so oococolol</h4></li>
+        <ul>
-            <li><h4>sn is so oococolol</h4></li>
+            <li><h5>missing additional items [skip ci] <a href="https://github.com/revanced/revanced-patcher/commit/0ebab8bf598d993df6e340651205cba48f1ef725">(0ebab8b)</a></h5></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">
@@ -33,27 +24,30 @@
 <style>
 	.download-selection {
 		background-color: var(--grey-two);
-		border-radius: 20px;
+		border-radius: 15px;
         justify-content: center;
-		height:50vh;
+		height:100%;
 	}
 
     h1 {
         text-align: center;
-        margin-top: 1.75rem;
+        margin-top: 1.4rem;
         font-weight: 700;
     }
-    h2 {
+    
+    h3 {
         text-align: left;
-        font-weight: 700;
+    }
-        font-size:1.2rem;
+
+    h4 {
+        text-align: center;
     }
     
     .rounded-fill {
         display:inline-block;
         border-radius: 200px;
         margin-left: 1rem;
-        padding: 0.5rem 1rem;
+        padding: 0.4rem 0.75rem;
         background-color: var(--grey-three);
     }
 
@@ -61,35 +55,33 @@
         margin-top: 1rem;
         overflow-y: scroll;
         margin-right: 0.5rem;
-        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
+        -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
+        height:30vh;
     }
 
-    h3 {
-        font-weight:400;
-        font-size: 1.2rem;
-        text-align: center;
-        color:var(--grey-six)
-    }
 
-    h4 {
-        color: var(--white);
-        font-weight: 300;
-    }
 
     ul {
+        margin-top: 0.5rem;
         margin-left:3rem;
+        margin-bottom:1rem;
         line-height: 1.5rem;
-        height: 10vw;
     }
 
     li {
-        color:var(--white)
+        color:var(--white);
+    }
+
+    ul a {
+        text-decoration: none;
+        color:var(--red);
     }
 
     .button {
         display:flex;
         justify-content: center;
-        margin-top: -2rem;
+        margin-top: -1.5rem;
+        margin-bottom: 1.5rem;
     }
 
 </style>

src/lib/components/atoms/Navigation.svelte

@@ -18,8 +18,8 @@
 		display: inline-block;
 		position: relative;
 		font-weight: 300;
-		margin-left: 7px;
+		margin-left: 0.5rem;
-		margin-right: 7px;
+		margin-right: 0.5rem;
 		align-items: center;
 		border: var(--grey-six);
 		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);

src/lib/components/molecules/DownloadChannelHost.svelte

@@ -13,7 +13,7 @@
 	};
 </script>
 
-<div class="download-selection">
+<div class="download-channel">
 	{#each items as item}
 		<DownloadChannel active={item === activeTab} 
 			on:click={handleTabChange(item)}>
@@ -23,12 +23,12 @@
 </div>
 
 <style>
-	.download-selection {
+	.download-channel {
 		background-color: var(--grey-one);
 		border-radius: 200px;
-		display: flex;
+		padding: 0.5rem 0.5rem;
-		padding: 8px 8px;
         display: grid;
 		grid-template-columns: 1fr 1fr;
+		gap:1rem;
 	}
 </style>

src/lib/components/molecules/DownloadSelectorHost.svelte

@@ -9,19 +9,24 @@
     <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;
+        margin-top: 2rem;
-        gap:15px;
+        padding: 0.75rem 0.75rem;
-		align-items: center;
+        border-radius: 25px;
-        display: grid;
+        width: 100%;
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap:0.9rem;
+        display:grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
+        grid-auto-flow: column;
+        overscroll-behavior-x: contain;
+        scroll-snap-type: x mandatory;
+        overflow-x: scroll;
+
     }
 </style>

src/lib/components/organisms/IndexDescription.svelte

@@ -14,8 +14,8 @@
 		</h2>
 		
 		<div class="hero-buttons">
-			<Button kind="primary" href="/download">Download</Button>
+			<Button kind="primary" href="/download" fontsize="1.5rem">Download</Button>
-			<Button href="/docs">Read The Docs</Button>
+			<Button href="/docs" fontsize="1.5rem">Read The Docs</Button>
 		</div>
     </div>
 </section>
@@ -26,6 +26,8 @@
 	}
 	
 	.hero-buttons {
+		display: flex;
+		gap:1rem;
 		user-select: none;
 	}
 

src/routes/__layout.svelte

@@ -68,6 +68,7 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 		--grey-four: #1B1E29;
 		--grey-five: #D0D0D0;
 		--grey-six: #a19e9e;
+		--grey-seven: #535563;
 	}
 
 	:global(::selection) {
@@ -88,6 +89,24 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 		font-size: 1.85rem;
 	}
 
+    :global(h3) {
+		color: var(--white);
+		font-weight: 600;
+		font-size: 1rem;
+    }
+
+    :global(h4) {
+		color:var(--grey-six);
+        font-weight:500;
+        font-size: 1rem;
+    }
+
+    :global(h5) {
+		color:var(--white);
+        font-weight: 300;
+        font-size: 1rem;
+    }
+
 	/*-----scrollbar-----*/
 
 	:global(::-webkit-scrollbar) {
@@ -103,6 +122,6 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	}
 
 	:global(::-webkit-scrollbar-thumb:hover) {
-		background-color: var(--grey-four);
+		background-color: var(--grey-seven);
 	}
 </style>