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

@ -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,14 +85,15 @@ if (
<SocialMediaStrip gap="6" />
</div>
</div>
<Video
src={whatsNewVideo}
autoplay
loop
muted
playsinline
preload="none"
class="w-full rounded-3xl object-cover shadow-lg"
/>
src={whatsNewVideo}
autoplay
loop
muted
playsinline
preload="none"
class="rounded-3xl object-cover shadow-lg"
/>
</main>
</Layout>