fix(websites/guide): remove flex-basis

This commit is contained in:
iCrawl
2023-05-12 20:02:04 +02:00
parent 13073acefc
commit d033f925e0
2 changed files with 102 additions and 98 deletions

View File

@@ -5,8 +5,8 @@ import workersLogo from '~/assets/powered-by-workers.png';
export default function Footer() { export default function Footer() {
return ( return (
<footer className="md:pl-12 md:pr-12"> <footer className="md:pl-12 md:pr-12">
<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12"> <div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto"> <div className="flex flex-wrap place-content-center place-items-center gap-4">
<a <a
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
@@ -40,54 +40,56 @@ export default function Footer() {
/> />
</a> </a>
</div> </div>
<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto"> <div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
<div className="text-lg font-semibold">Community</div> <div className="max-w-max flex flex-col gap-2">
<div className="flex flex-col gap-1"> <div className="text-lg font-semibold">Community</div>
<a <div className="flex flex-col gap-1">
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" <a
href="https://discord.gg/djs" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
rel="external noopener noreferrer" href="https://discord.gg/djs"
target="_blank" rel="external noopener noreferrer"
> target="_blank"
Discord >
</a> Discord
<a </a>
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" <a
href="https://github.com/discordjs/discord.js/discussions" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
rel="external noopener noreferrer" href="https://github.com/discordjs/discord.js/discussions"
target="_blank" rel="external noopener noreferrer"
> target="_blank"
GitHub discussions >
</a> GitHub discussions
</a>
</div>
</div> </div>
</div> <div className="max-w-max flex flex-col gap-2">
<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto"> <div className="text-lg font-semibold">Project</div>
<div className="text-lg font-semibold">Project</div> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-1"> <a
<a className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href="https://github.com/discordjs/discord.js"
href="https://github.com/discordjs/discord.js" rel="external noopener noreferrer"
rel="external noopener noreferrer" target="_blank"
target="_blank" >
> discord.js
discord.js </a>
</a> <a
<a className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href="https://discord.js.org/docs"
href="https://discord.js.org/docs" rel="noopener noreferrer"
rel="noopener noreferrer" target="_blank"
target="_blank" >
> discord.js documentation
discord.js documentation </a>
</a> <a
<a className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href="https://discord-api-types.dev"
href="https://discord-api-types.dev" rel="external noopener noreferrer"
rel="external noopener noreferrer" target="_blank"
target="_blank" >
> discord-api-types
discord-api-types </a>
</a> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -5,8 +5,8 @@ import workersLogo from '~/assets/powered-by-workers.png';
export default function Footer() { export default function Footer() {
return ( return (
<footer className="md:pl-12 md:pr-12"> <footer className="md:pl-12 md:pr-12">
<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12"> <div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto"> <div className="flex flex-wrap place-content-center place-items-center gap-4">
<a <a
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
@@ -40,54 +40,56 @@ export default function Footer() {
/> />
</a> </a>
</div> </div>
<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto"> <div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
<div className="text-lg font-semibold">Community</div> <div className="max-w-max flex flex-col gap-2">
<div className="flex flex-col gap-1"> <div className="text-lg font-semibold">Community</div>
<a <div className="flex flex-col gap-1">
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" <a
href="https://discord.gg/djs" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
rel="external noopener noreferrer" href="https://discord.gg/djs"
target="_blank" rel="external noopener noreferrer"
> target="_blank"
Discord >
</a> Discord
<a </a>
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" <a
href="https://github.com/discordjs/discord.js/discussions" className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
rel="external noopener noreferrer" href="https://github.com/discordjs/discord.js/discussions"
target="_blank" rel="external noopener noreferrer"
> target="_blank"
GitHub discussions >
</a> GitHub discussions
</a>
</div>
</div> </div>
</div> <div className="max-w-max flex flex-col gap-2">
<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto"> <div className="text-lg font-semibold">Project</div>
<div className="text-lg font-semibold">Project</div> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-1"> <a
<a className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href="https://github.com/discordjs/discord.js"
href="https://github.com/discordjs/discord.js" rel="external noopener noreferrer"
rel="external noopener noreferrer" target="_blank"
target="_blank" >
> discord.js
discord.js </a>
</a> <a
<a className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href="https://discord.js.org/docs"
href="https://discord.js.org/docs" rel="noopener noreferrer"
rel="noopener noreferrer" target="_blank"
target="_blank" >
> discord.js documentation
discord.js documentation </a>
</a> <a
<a className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href="https://discord-api-types.dev"
href="https://discord-api-types.dev" rel="external noopener noreferrer"
rel="external noopener noreferrer" target="_blank"
target="_blank" >
> discord-api-types
discord-api-types </a>
</a> </div>
</div> </div>
</div> </div>
</div> </div>