[website] responsiveness issues fixed downloads section

This commit is contained in:
Kingkor Roy Tirtho 2022-07-19 10:56:49 +06:00
parent e86710f666
commit 7d9f9019c2
3 changed files with 22 additions and 10 deletions

View File

@ -16,13 +16,22 @@ const Root = () => {
bgPos="right" bgPos="right"
> >
<VStack mt="10" mx="6" spacing="4" alignItems="flex-start"> <VStack mt="10" mx="6" spacing="4" alignItems="flex-start">
<Heading color="#212121" size="2xl"> <chakra.section
Spotube p={{ base: "5", md: "0" }}
</Heading> borderRadius="2xl"
<Heading color="#212121" size="lg" maxW="500px"> bgColor={{
A fast, modern, lightweight & efficient Spotify Music Client for base: "#f5f5f599",
every platform md: "transparent",
</Heading> }}
>
<Heading color="#212121" size="2xl">
Spotube
</Heading>
<Heading color="#212121" size="lg" maxW="500px">
A fast, modern, lightweight & efficient Spotify Music Client for
every platform
</Heading>
</chakra.section>
<DownloadButton /> <DownloadButton />
</VStack> </VStack>
</chakra.section> </chakra.section>

View File

@ -17,7 +17,7 @@ import { DisplayAd } from "components/special";
export default function PackageManagerPage() { export default function PackageManagerPage() {
return ( return (
<VStack p="5" spacing="5"> <VStack p="5" spacing="5">
<VStack align="start" maxW="2xl"> <VStack align="start" w="full" maxW="2xl">
<Heading>Installation using Package Managers</Heading> <Heading>Installation using Package Managers</Heading>
<Text> <Text>
If you don&apos;t want to download the binary of Spotube, you can use If you don&apos;t want to download the binary of Spotube, you can use

View File

@ -19,7 +19,7 @@ import { DisplayAd, InFeedAd } from "components/special";
import { GetServerSideProps, NextPage } from "next"; import { GetServerSideProps, NextPage } from "next";
import { MarkdownComponentDefs } from "misc/MarkdownComponentDefs"; import { MarkdownComponentDefs } from "misc/MarkdownComponentDefs";
import { octokit } from "configurations/ocotokit"; import { octokit } from "configurations/ocotokit";
import gemoji from "remark-gemoji" import gemoji from "remark-gemoji";
enum AssetTypes { enum AssetTypes {
sums = "sums", sums = "sums",
@ -148,7 +148,10 @@ const StableDownloads: NextPage<Props> = ({ data }) => {
borderRadius={`0 5px 5px ${ borderRadius={`0 5px 5px ${
assets.length !== 1 ? 5 : 0 assets.length !== 1 ? 5 : 0
}px`} }px`}
w="72" w={{
base: "full",
sm: "72",
}}
> >
{assets.map((asset) => { {assets.map((asset) => {
return ( return (