refactor(app): improve layout consistency and responsiveness across pages

The changes focus on standardizing layouts, spacing, and container usage
throughout the site while enhancing responsive behavior. Key improvements
include:

- Unified container usage for consistent page widths
- Standardized section padding and gaps
- Removed redundant padding/margin classes
- Better responsive grid layouts
- Consistent text alignment and spacing
- Cleaner flexbox structures
This commit is contained in:
Shintaro Jokagi 2025-05-15 12:43:48 +12:00
parent 1c56e00c6f
commit c82ae06030
No known key found for this signature in database
GPG key ID: 0DDF8FA44C9A0DA8
19 changed files with 108 additions and 98 deletions

View file

@ -19,9 +19,9 @@ const {
<section
id="Community"
class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:pt-36"
class="relative flex w-full flex-col items-center text-start md:text-center lg:py-36 gap-6 py-12"
>
<Description class="mb-2 px-4 text-6xl font-bold">
<Description class="mb-2 text-6xl font-bold">
<motion.span client:load {...getTitleAnimation(0.2)}>
{community.title[0]}
</motion.span>
@ -35,12 +35,12 @@ const {
<motion.p
client:load
{...getTitleAnimation(0.6)}
className="px-4 md:px-24 lg:w-1/2 lg:px-0"
className="lg:w-1/2 lg:px-0"
>
{community.description}
</motion.p>
<div
class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center"
>
<motion.span client:load {...getTitleAnimation(0.8)}>
<Button class:list={['px-4']} href="https://github.com/zen-browser">
@ -66,14 +66,14 @@ const {
</motion.div>
</div>
<motion.span
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
className="flex max-w-full lg:max-w-none lg:flex-none"
client:load
{...getTitleAnimation(1.4)}
>
<Image
src={ComImage}
alt={community.images.community.alt}
class="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
/>
</motion.span>
</section>

View file

@ -32,7 +32,7 @@ const descriptions = Object.values(features.featureTabs).map(
<section
id="Features"
class="relative flex w-full flex-col px-4 text-start md:px-24 lg:mx-auto lg:w-3/4 lg:px-0 lg:py-36"
class="relative flex w-full flex-col text-start lg:py-36 py-12"
>
<Description class="mb-2 text-6xl font-bold">
<motion.span client:load {...getTitleAnimation(0.2)}>
@ -49,7 +49,7 @@ const descriptions = Object.values(features.featureTabs).map(
{features.description}
</motion.p>
<div
class="mb-12 mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
>
<div class="flex w-full flex-col lg:w-1/3">
<!-- Mobile tabs -->

View file

@ -15,11 +15,11 @@ const {
<footer
id="footer"
class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24"
class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24 items-center"
role="contentinfo"
aria-label="Site footer"
>
<div class="flex w-full flex-col items-start justify-between gap-12">
<div class="flex w-full flex-col items-start justify-between gap-12 container">
<section
class="w-full text-center lg:w-1/2 lg:text-left"
aria-labelledby="footer-title"

View file

@ -88,7 +88,7 @@ const {
</div>
</header>
<motion.span
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
className="flex max-w-full lg:max-w-none lg:flex-none"
client:load
{...getHeroTitleAnimation()}
>
@ -99,6 +99,6 @@ const {
muted
playsinline
preload="none"
class="mb-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
class="mb-24 rounded-3xl shadow-md dark:opacity-80"
/>
</motion.span>

View file

@ -138,8 +138,8 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
return (
<div>
<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 flex-col items-center gap-4">
<div className="flex w-full flex-col items-center justify-center gap-6">
<input
type="text"
id="search"
@ -200,13 +200,13 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
</div>
</div>
<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">
<div className="grid grid-cols-1 w-full place-items-start gap-12 md:grid-cols-2 xl:grid-cols-3 py-6">
{paginatedMods.length > 0 ? (
paginatedMods.map((mod) => (
<a
key={mod.id}
href={`/mods/${mod.id}`}
className="flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
className="flex flex-col w-full 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">
<img

View file

@ -21,7 +21,7 @@ const {
<!-- Desktop Navigation -->
<Astronav>
<MenuItems
class="relative z-20 mx-auto grid w-full grid-cols-2 items-center gap-2 bg-paper px-4 py-3 lg:grid lg:min-w-fit lg:grid-cols-[auto_1fr_auto] lg:p-6 xl:w-3/4"
class="relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6 container"
>
<a
class="flex items-center gap-2 text-lg font-bold"

View file

@ -18,10 +18,10 @@ const {
} = getUI(locale)
---
<section id="sponsors" class:list={['mb-32 px-4', !showSponsors && 'hidden']}>
<div class="mx-auto flex flex-col px-6 text-center">
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
<div class="mx-auto flex flex-col text-center">
<motion.span client:load {...getTitleAnimation(0.2)}>
<Description class="mb-2 px-4 text-6xl font-bold"
<Description class="mb-2 text-6xl font-bold"
>Our Sponsors</Description
>
</motion.span>

View file

@ -144,7 +144,7 @@
}
},
"about": {
"title": "About - Zen Browser",
"title": "About - Zen",
"description": "We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected.",
"littleHelp": "A little help?",
"mainTeam": {
@ -223,7 +223,8 @@
"description": "We are a small team of developers working hard to bring you the best browsing experience. If you like what we do, please consider supporting us.",
"patreon": {
"title": "Patreon",
"description": "Patreon allows you to support us with a monthly donation. You can choose the level of support that works best for you."
"description": "Patreon allows you to support us with a monthly donation. You can choose the level of support that works best for you.",
"button": "Go to Patreon"
},
"koFi": {
"title": "Ko-fi",

View file

@ -97,7 +97,7 @@ const locale = getLocale(Astro);
</head>
<body
class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark"
class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark text-pretty"
>
<NavBar />
<slot />

View file

@ -15,17 +15,19 @@ const {
<Layout title={notFound.title}>
<main
class="flex min-h-[70vh] flex-col items-center justify-center py-24 text-center"
class="flex min-h-[70vh] container flex-col items-center justify-center gap-6 py-24 text-center"
>
<Title class="mb-4 text-7xl font-bold text-coral md:text-9xl">404</Title>
<Description class="mb-6 text-xl md:text-2xl">
<Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
<div class="flex flex-col gap-4 items-center">
<Description class="text-xl md:text-2xl">
{notFound.title}
</Description>
<p class="mb-8 max-w-xl text-lg text-gray-500 dark:text-gray-400">
<p class="max-w-xl text-lg text-gray-500 dark:text-gray-400">
{notFound.description}
</p>
<Button href={getLocalePath('/')} isPrimary>
<Button href={getLocalePath('/')} isPrimary class="w-fit">
{notFound.button}
</Button>
</div>
</main>
</Layout>

View file

@ -18,64 +18,62 @@ const {
description={layout.about.description}
>
<main
class="relative flex min-h-screen flex-col items-center justify-center py-24"
class="flex min-h-screen flex-col items-center justify-center py-24 container w-full gap-24"
>
<div class="mb-24 p-4 text-center lg:w-1/2">
<Description class="text-6xl font-bold">{about.title}</Description>
<Description>
<div class="text-center w-full flex flex-col gap-4">
<Description class="text-6xl font-bold leading-none">{about.title}</Description>
<Description class="max-w-3xl mx-auto">
{about.description}
</Description>
<Button href="/donate" class="mx-auto mt-4 w-fit" isPrimary
<Button href="/donate" class="mx-auto w-fit" isPrimary
>{about.littleHelp}</Button
>
</div>
<div
class="relative flex w-full flex-col items-center justify-center lg:flex-row"
class="grid lg:grid-cols-[1fr_1px_1fr] gap-6"
>
<div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
<div class="text-4xl font-bold lg:text-6xl">{about.mainTeam.title}</div>
<div class="flex flex-col gap-4">
<div class="text-4xl font-bold lg:text-6xl leading-none">{about.mainTeam.title}</div>
<Description>
{about.mainTeam.description}
</Description>
<div class="mt-4">
<ul>
<div>
<ul class="flex flex-col gap-2">
{Object.entries(about.mainTeam.members).map(([_key, member]) => (
<li class="text-sm">
{member.link ? (
<a href={member.link === true ? '' : member.link}>
<strong class="zen-link font-bold">{member.name}</strong>
</a>
<span class="opacity-60"> : {member.description}</span>
<span class="opacity-80"> : {member.description}</span>
) : (
<strong class="font-bold">{member.name}</strong>
<span class="opacity-60"> : {member.description}</span>
<span class="opacity-80"> : {member.description}</span>
)}
</li>
))}
</ul>
</div>
</div>
<div class="absolute hidden h-full w-[1px] bg-dark opacity-15 lg:block">
</div>
<div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
<div class="text-4xl font-bold lg:text-6xl">{about.contributors.title}</div>
<hr class="hidden h-full w-[1px] bg-dark opacity-15 lg:block" />
<div class="flex flex-col gap-4">
<div class="text-4xl font-bold lg:text-6xl leading-none">{about.contributors.title}</div>
<Description>
{about.contributors.description}
</Description>
<a href="https://github.com/zen-browser/desktop/graphs/contributors"
<div class="flex flex-col gap-4"><a href="https://github.com/zen-browser/desktop/graphs/contributors"
><img
src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
alt="Contributors"
class="mt-8"
/></a
>
<a href="https://github.com/zen-browser/www/graphs/contributors"
><img
src="https://contributors-img.web.app/image?repo=zen-browser/www"
alt="Contributors (website)"
class="mt-8"
/></a
>
></div>
</div>
</div>
</main>

View file

@ -14,40 +14,37 @@ const {
---
<Layout title={layout.donate.title} description={layout.donate.description}>
<main class="pb-52 pt-36">
<main class="pb-52 pt-36 container">
<div
class="relative flex w-full flex-col items-center justify-center gap-12"
class="flex flex-col items-center justify-center gap-12"
>
<div class="px-8 lg:w-2/5 lg:text-center xl:px-0">
<div class="lg:text-center flex flex-col gap-4">
<Description class="text-6xl font-bold">{donate.title}</Description>
<Description>
<Description class="max-w-3xl">
{donate.description}
</Description>
</div>
<div class="flex w-full flex-col items-center justify-center lg:flex-row">
<div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
<div class="grid grid-cols-1 lg:grid-cols-[1fr_1px_1fr] gap-12 text-center max-w-5xl">
<div class="flex flex-col gap-4 items-center">
<div class="text-6xl font-bold">{donate.patreon.title}</div>
<Description>
{donate.patreon.description}
</Description>
<div class="mt-6">
<Button
isPrimary
href="https://www.patreon.com/zen_browser"
class="w-fit"
>
Go to Patreon
{donate.patreon.button}
<ArrowRight class="size-4" />
</Button>
</div>
</div>
<div class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block"></div>
<div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
<hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
<div class="flex flex-col gap-4 items-center">
<div class="text-6xl font-bold">{donate.koFi.title}</div>
<Description>
{donate.koFi.description}
</Description>
<div class="mt-6">
<Button
href="https://ko-fi.com/zen_browser"
isPrimary
@ -59,6 +56,5 @@ const {
</div>
</div>
</div>
</div>
</main>
</Layout>

View file

@ -41,7 +41,7 @@ const platformDescriptions = download.platformDescriptions
<Layout title={layout.download.title} description={layout.download.description}>
<main class="flex min-h-screen flex-col px-6 data-[os='windows']:bg-zen-blue">
<div class="container relative mx-auto max-w-5xl py-12">
<div class="container relative mx-auto py-12">
<div class="mb-6 mt-12 flex flex-col gap-4">
<Description id="download-title" class="text-6xl font-bold"
>{download.title}</Description

View file

@ -17,7 +17,7 @@ const { layout } = getUI(locale)
description={layout.index.description}
isHome
>
<main>
<main class="container">
<Hero />
<Features />
<Sponsors showSponsors />

View file

@ -18,16 +18,12 @@ const allMods = (await getAllMods()) || []
---
<Layout title={layout.mods.title}>
<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">
<div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
<div>
<main class="mt-32 container 2xl:mt-32 flex flex-col gap-10">
<header class="flex w-full flex-col border-dark gap-8">
<Description class="text-6xl font-bold">{mods.title}</Description>
<Description>
<Description class="max-w-3xl">
{mods.description}
</Description>
</div>
</div>
</header>
<!-- Importing ModList component -->

View file

@ -22,11 +22,11 @@ const {
<Layout title={layout.releaseNotes.title}>
<main
class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4 container"
>
<div
id="release-notes"
class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
class="py-42 flex min-h-screen flex-col justify-center w-full"
>
<Description class="mt-48 text-4xl font-bold">Release Notes</Description>
<p

View file

@ -14,7 +14,7 @@ const {
<Layout title={layout.welcome.title} description={layout.welcome.description}>
<main
class="relative mx-auto flex flex-col items-center gap-24 px-6 lg:gap-0 lg:px-24"
class="container"
>
<Features
title1={welcome.title[0]}

View file

@ -37,7 +37,7 @@ if (
)}
>
<main
class="relative mx-auto flex flex-col items-center gap-24 px-6 pb-52 pt-36 lg:px-24 xl:flex-row"
class="container flex xl:min-h-[calc(100vh-12rem)] xl:mt-22 flex-col gap-12 py-12 xl:grid xl:grid-cols-[2fr_3fr]"
>
<div class="flex flex-col gap-8">
<div>
@ -54,26 +54,26 @@ if (
<div>
<Fragment set:html={whatsNewText[0].replace(/\n/g, '<br>')} />
</div>
<ul class="hidden flex-col gap-2 md:flex">
<ul class="hidden list-disc flex-col gap-2 xl:flex xl:container">
<a
href="https://github.com/zen-browser/desktop/issues/new/choose"
target="_blank"
>
<li class="ml-3 list-disc">
<Description class="text-base font-bold"
>{whatsNew.reportIssue}</Description
>
<li>
<Description class="text-base font-bold">
{whatsNew.reportIssue}
</Description>
</li>
</a>
<a href="https://discord.gg/zen-browser" target="_blank">
<li class="ml-3 list-disc">
<Description class="text-base font-bold"
>{whatsNew.joinDiscord}</Description
>
<li>
<Description class="text-base font-bold">
{whatsNew.joinDiscord}
</Description>
</li>
</a>
</ul>
<div class="flex flex-col gap-8 md:flex-row">
<div class="flex flex-wrap gap-8 place-self-start xl:place-self-center">
<Button
href={`/release-notes#${latestVersion.version}`}
isPrimary
@ -85,6 +85,7 @@ if (
<SocialMediaStrip gap="6" />
</div>
</div>
<Video
src={whatsNewVideo}
autoplay
@ -92,7 +93,7 @@ if (
muted
playsinline
preload="none"
class="w-full rounded-3xl object-cover shadow-lg"
class="rounded-3xl object-cover shadow-lg"
/>
</main>
</Layout>

View file

@ -3,6 +3,22 @@ export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
darkMode: ['selector', '[data-theme="dark"]'],
theme: {
container: {
screens: {
sm: "100%",
md: "100%",
lg: "1024px",
xl: "1280px",
},
padding: {
DEFAULT: '1rem',
sm: '1.5rem',
md: '1.5rem',
lg: '1.5rem',
xl: '2rem',
},
center: true,
},
extend: {
screens: {
'-sm': '@media (max-width: 639px)',