mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-20 17:44:41 +12:00
fix(website): various UI improvements (#9538)
* fix(website): raise category z-index to prevent clipping * refactor(website): wrap footer badges when necessary to prevent overflow
This commit is contained in:
parent
5b8d535fd6
commit
280ed0ce08
2 changed files with 71 additions and 75 deletions
|
@ -5,93 +5,89 @@ 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="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
|
<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12">
|
||||||
<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
|
<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto">
|
||||||
<div className="flex flex-col gap-4 lg:flex-row">
|
<a
|
||||||
|
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||||
|
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
||||||
|
rel="external noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
title="Vercel"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
alt="Vercel"
|
||||||
|
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||||
|
height={44}
|
||||||
|
placeholder="blur"
|
||||||
|
src={vercelLogo}
|
||||||
|
width={212}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||||
|
href="https://www.cloudflare.com"
|
||||||
|
rel="external noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
title="Cloudflare Workers"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
alt="Cloudflare"
|
||||||
|
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
||||||
|
height={44}
|
||||||
|
placeholder="blur"
|
||||||
|
priority
|
||||||
|
src={workersLogo}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
|
||||||
|
<div className="text-lg font-semibold">Community</div>
|
||||||
|
<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://vercel.com/?utm_source=discordjs&utm_campaign=oss"
|
href="https://discord.gg/djs"
|
||||||
rel="external noopener noreferrer"
|
rel="external noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="Vercel"
|
|
||||||
>
|
>
|
||||||
<Image
|
Discord
|
||||||
alt="Vercel"
|
|
||||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
|
||||||
height={44}
|
|
||||||
placeholder="blur"
|
|
||||||
src={vercelLogo}
|
|
||||||
width={212}
|
|
||||||
/>
|
|
||||||
</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://www.cloudflare.com"
|
href="https://github.com/discordjs/discord.js/discussions"
|
||||||
rel="external noopener noreferrer"
|
rel="external noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="Cloudflare Workers"
|
|
||||||
>
|
>
|
||||||
<Image
|
GitHub discussions
|
||||||
alt="Cloudflare"
|
|
||||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
|
|
||||||
height={44}
|
|
||||||
placeholder="blur"
|
|
||||||
priority
|
|
||||||
src={workersLogo}
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row gap-6 md:gap-12">
|
</div>
|
||||||
<div className="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">Community</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://discord.gg/djs"
|
href="https://github.com/discordjs/discord.js"
|
||||||
rel="external noopener noreferrer"
|
rel="external noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
Discord
|
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://github.com/discordjs/discord.js/discussions"
|
href="https://discord.js.org/docs"
|
||||||
rel="external noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
GitHub discussions
|
discord.js documentation
|
||||||
</a>
|
</a>
|
||||||
</div>
|
<a
|
||||||
</div>
|
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
||||||
<div className="flex flex-col gap-2">
|
href="https://discord-api-types.dev"
|
||||||
<div className="text-lg font-semibold">Project</div>
|
rel="external noopener noreferrer"
|
||||||
<div className="flex flex-col gap-1">
|
target="_blank"
|
||||||
<a
|
>
|
||||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
discord-api-types
|
||||||
href="https://github.com/discordjs/discord.js"
|
</a>
|
||||||
rel="external noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
discord.js
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
|
||||||
href="https://discordjs.guide"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
discord.js guide
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
|
|
||||||
href="https://discord-api-types.dev"
|
|
||||||
rel="external noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
discord-api-types
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -94,7 +94,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
|
||||||
.filter((group) => groupItems[group].length)
|
.filter((group) => groupItems[group].length)
|
||||||
.map((group, idx) => (
|
.map((group, idx) => (
|
||||||
<Section
|
<Section
|
||||||
buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring"
|
buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring z-10"
|
||||||
icon={resolveIcon(group)}
|
icon={resolveIcon(group)}
|
||||||
key={`${group}-${idx}`}
|
key={`${group}-${idx}`}
|
||||||
title={group}
|
title={group}
|
||||||
|
|
Loading…
Reference in a new issue