website: Improve download button

Author: probablykasper

README.md

@@ -23,8 +23,7 @@ https://github.com/user-attachments/assets/b73cdcf8-8abb-4d43-a5eb-582cad7e3075
 ## Android
 
 The Android app is not useful yet, unless you just want you browse your library. There's no playback or syncing. You have to manually copy over your Library.json file.
-
-<a href="https://apps.obtainium.imranr.dev/redirect?r=obtainium://app/%7B%22id%22%3A%22space.kasper.ferrum%22%2C%22url%22%3A%22https%3A%2F%2Fgithub.com%2Fprobablykasper%2Fferrum%22%2C%22author%22%3A%22probablykasper%22%2C%22name%22%3A%22Ferrum%22%2C%22preferredApkIndex%22%3A0%2C%22additionalSettings%22%3A%22%7B%5C%22includePrereleases%5C%22%3Afalse%2C%5C%22fallbackToOlderReleases%5C%22%3Atrue%2C%5C%22filterReleaseTitlesByRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22filterReleaseNotesByRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22verifyLatestTag%5C%22%3Afalse%2C%5C%22sortMethodChoice%5C%22%3A%5C%22date%5C%22%2C%5C%22useLatestAssetDateAsReleaseDate%5C%22%3Afalse%2C%5C%22releaseTitleAsVersion%5C%22%3Afalse%2C%5C%22trackOnly%5C%22%3Afalse%2C%5C%22versionExtractionRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22matchGroupToUse%5C%22%3A%5C%22%5C%22%2C%5C%22versionDetection%5C%22%3Atrue%2C%5C%22releaseDateAsVersion%5C%22%3Afalse%2C%5C%22useVersionCodeAsOSVersion%5C%22%3Afalse%2C%5C%22apkFilterRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22invertAPKFilter%5C%22%3Afalse%2C%5C%22autoApkFilterByArch%5C%22%3Atrue%2C%5C%22appName%5C%22%3A%5C%22%5C%22%2C%5C%22appAuthor%5C%22%3A%5C%22%5C%22%2C%5C%22shizukuPretendToBeGooglePlay%5C%22%3Afalse%2C%5C%22allowInsecure%5C%22%3Afalse%2C%5C%22exemptFromBackgroundUpdates%5C%22%3Afalse%2C%5C%22skipUpdateNotifications%5C%22%3Afalse%2C%5C%22about%5C%22%3A%5C%22%5C%22%2C%5C%22refreshBeforeDownload%5C%22%3Afalse%2C%5C%22includeZips%5C%22%3Afalse%2C%5C%22zippedApkFilterRegEx%5C%22%3A%5C%22%5C%22%7D%22%2C%22overrideSource%22%3A%22GitHub%22%7D"><img alt="Get it on Obtainium" height="80" src="https://github-production-user-asset-6210df.s3.amazonaws.com/30463115/393344052-713d71c5-3dec-4ec4-a3f2-8d28d025a9c6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20260306%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260306T105704Z&X-Amz-Expires=300&X-Amz-Signature=40b1697b23ba74e2f6b28e74746797344b5947d7f1fa5fa507f4ad624d7cbde6&X-Amz-SignedHeaders=host"></a>
+<a href="https://apps.obtainium.imranr.dev/redirect?r=obtainium://app/%7B%22id%22%3A%22space.kasper.ferrum%22%2C%22url%22%3A%22https%3A%2F%2Fgithub.com%2Fprobablykasper%2Fferrum%22%2C%22author%22%3A%22probablykasper%22%2C%22name%22%3A%22Ferrum%22%2C%22preferredApkIndex%22%3A0%2C%22additionalSettings%22%3A%22%7B%5C%22includePrereleases%5C%22%3Afalse%2C%5C%22fallbackToOlderReleases%5C%22%3Atrue%2C%5C%22filterReleaseTitlesByRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22filterReleaseNotesByRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22verifyLatestTag%5C%22%3Afalse%2C%5C%22sortMethodChoice%5C%22%3A%5C%22date%5C%22%2C%5C%22useLatestAssetDateAsReleaseDate%5C%22%3Afalse%2C%5C%22releaseTitleAsVersion%5C%22%3Afalse%2C%5C%22trackOnly%5C%22%3Afalse%2C%5C%22versionExtractionRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22matchGroupToUse%5C%22%3A%5C%22%5C%22%2C%5C%22versionDetection%5C%22%3Atrue%2C%5C%22releaseDateAsVersion%5C%22%3Afalse%2C%5C%22useVersionCodeAsOSVersion%5C%22%3Afalse%2C%5C%22apkFilterRegEx%5C%22%3A%5C%22%5C%22%2C%5C%22invertAPKFilter%5C%22%3Afalse%2C%5C%22autoApkFilterByArch%5C%22%3Atrue%2C%5C%22appName%5C%22%3A%5C%22%5C%22%2C%5C%22appAuthor%5C%22%3A%5C%22%5C%22%2C%5C%22shizukuPretendToBeGooglePlay%5C%22%3Afalse%2C%5C%22allowInsecure%5C%22%3Afalse%2C%5C%22exemptFromBackgroundUpdates%5C%22%3Afalse%2C%5C%22skipUpdateNotifications%5C%22%3Afalse%2C%5C%22about%5C%22%3A%5C%22%5C%22%2C%5C%22refreshBeforeDownload%5C%22%3Afalse%2C%5C%22includeZips%5C%22%3Afalse%2C%5C%22zippedApkFilterRegEx%5C%22%3A%5C%22%5C%22%7D%22%2C%22overrideSource%22%3A%22GitHub%22%7D"><img alt="Get it on Obtainium" height="80" src="https://raw.githubusercontent.com/ImranR98/Obtainium/refs/heads/main/assets/graphics/badge_obtainium.png"></a>
 
 ## Dev instructions
 

website/src/routes/Download.svelte

@@ -18,7 +18,7 @@
 	const linux_rpm: Version = { os: 'Linux', arch: '.rpm', ending: 'linux-x86_64.rpm' }
 	const android_obtainium: Version = { os: 'Obtainium', arch: '', ending: '' }
 	const android_arm64: Version = { os: 'Android', arch: 'arm64', ending: '-android-arm64.apk' }
-	const android_x86_64: Version = { os: 'Android', arch: 'x86_64', ending: '-android-x86_64.apk' }
+	const android_x86_64: Version = { os: 'Android', arch: 'x64', ending: '-android-x86_64.apk' }
 
 	const desktop_versions: Version[] = [
 		macos_arm,
@@ -182,7 +182,7 @@
 	{/if}
 
 	<div
-		class="flex w-full max-w-xl items-stretch rounded-2xl border border-white/10 bg-white/[0.04]"
+		class="flex w-full max-w-xl flex-col items-stretch rounded-2xl border border-white/10 bg-white/[0.04] sm:flex-row"
 	>
 		<!-- ── Desktop ── -->
 		<div class="relative z-10 flex flex-1 flex-col gap-2.5 p-5">
@@ -201,7 +201,12 @@
 				>
 				Desktop
 			</div>
-			<p class="-mt-1 text-xs leading-snug text-white/0 select-none" aria-hidden="true">.</p>
+			<p
+				class="-mt-1 text-xs leading-snug text-white/0 select-none not-sm:hidden"
+				aria-hidden="true"
+			>
+				.
+			</p>
 
 			<ButtonPopup let:toggle let:isOpen let:close>
 				<div
@@ -255,14 +260,14 @@
 
 				<div
 					slot="popup"
-					class="dropdown absolute top-full right-0 left-0 overflow-hidden rounded-b-[10px] border border-t-0 border-white/20 bg-white/5 backdrop-blur-xl"
+					class="dropdown absolute top-full right-0 left-0 overflow-hidden rounded-b-[10px] border border-t-0 border-white/20 bg-white/5 backdrop-blur-md"
 					style="z-index: 9999;"
 					transition:scale={{ start: 0.95, opacity: 0, duration: 160 }}
 				>
 					{#each desktop_versions as version}
 						<button
 							type="button"
-							class="dropdown-item flex h-9 w-full cursor-pointer items-center gap-2 bg-transparent px-3.5 text-left text-[13.5px] text-white/80 transition-colors duration-100 outline-none hover:bg-white/[0.06] hover:text-white"
+							class="dropdown-item flex h-9 w-full cursor-pointer items-center gap-2 bg-transparent px-3.5 text-left text-[13.5px] text-white/80 outline-none hover:bg-white/5 hover:text-white"
 							on:click={() => {
 								close()
 								download(version)
@@ -292,7 +297,7 @@
 		</div>
 
 		<!-- vertical divider -->
-		<div class="my-3.5 w-px shrink-0 bg-white/[0.08]"></div>
+		<div class="shrink-0 bg-white/10 not-sm:mx-3.5 not-sm:h-px sm:my-3.5 sm:w-px"></div>
 
 		<!-- ── Android ── -->
 		<div class="relative z-[5] flex flex-1 flex-col gap-2.5 p-5">
@@ -316,7 +321,7 @@
 						href={obtainium_url}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="flex h-full cursor-pointer items-center gap-1.5 pr-3.5 pl-3 whitespace-nowrap text-white/70 transition-colors duration-150 outline-none hover:text-white"
+						class="flex h-full grow cursor-pointer items-center gap-1.5 pr-3.5 pl-3 whitespace-nowrap text-white/70 transition-colors duration-150 outline-none hover:text-white"
 					>
 						<svg
 							width="14"