ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 01:10:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(mods): update mods for larger monitor screen

Browse source
This commit is contained in:
Shintaro Jokagi 2025-03-17 00:10:08 +13:00
parent 03906ef819
commit 51db578f7a
2 changed files with 37 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/components/ModsList.tsx
View file

@ -127,7 +127,7 @@ export default function ModsList({ mods }: ModsListProps) {
return ( return (
<div> <div>
<div className="mx-auto mb-8 flex flex-col items-start gap-4 px-8 lg:w-1/2"> <div className="mx-auto flex flex-col items-start gap-4 px-8 lg:w-1/2">
<div className="flex w-full flex-col items-center gap-6"> <div className="flex w-full flex-col items-center gap-6">
<input <input
type="text" type="text"
@ -189,32 +189,41 @@ export default function ModsList({ mods }: ModsListProps) {
</div> </div>
</div> </div>
<div className="mx-auto grid grid-cols-1 gap-12 p-10 md:grid-cols-2 lg:grid-cols-3 lg:p-24 lg:px-24"> <div className="mx-auto grid grid-cols-1 place-items-start gap-12 p-10 md:grid-cols-2 lg:grid-cols-3 lg:p-24 lg:px-24 2xl:grid-cols-4">
{paginatedMods.map((mod) => ( {paginatedMods.length > 0 ? (
<a paginatedMods.map((mod) => (
key={mod.id} <a
href={`/mods/${mod.id}`} key={mod.id}
className="mb-6 flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90" href={`/mods/${mod.id}`}
> className="flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
<div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md lg:h-auto"> >
<img <div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md lg:h-auto">
src={mod.image} <img
alt={mod.name} src={mod.image}
loading="lazy" alt={mod.name}
className="h-full w-full object-cover transition-transform duration-100 hover:scale-105" loading="lazy"
/> className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
</div> />
<div> </div>
<h2 className="text-lg font-bold"> <div>
{mod.name}{' '} <h2 className="text-lg font-bold">
<span className="ml-1 text-sm font-normal"> {mod.name}{' '}
by @{mod.author} <span className="ml-1 text-sm font-normal">
</span> by @{mod.author}
</h2> </span>
<p className="text-sm font-thin">{mod.description}</p> </h2>
</div> <p className="text-sm font-thin">{mod.description}</p>
</a> </div>
))} </a>
))
) : (
<div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center">
<h2 className="text-lg font-bold">No results found</h2>
<p className="text-sm font-thin">
Try searching for a different term or check back later.
</p>
</div>
)}
</div> </div>
{renderPagination()} {renderPagination()}

2
src/pages/mods/index.astro
View file

@ -9,7 +9,7 @@ const mods = (await getAllMods()) || []
--- ---
<Layout title="Zen Mods"> <Layout title="Zen Mods">
<main class="mt-32 2xl:mt-0"> <main class="mx-auto mt-32 max-w-[120rem] 2xl:mt-0">
<header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark"> <header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark">
<div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2"> <div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
<div> <div>