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(layout): improve height to reduce empty spaces

Browse source
This commit is contained in:
taroj1205 2024-11-03 11:54:50 +13:00
parent 2497ccd9ed
commit aa235204c6
19 changed files with 74 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/about/page.tsx
View file

@ -5,13 +5,12 @@ import "../privacy-policy/markdown.css";
export default function PrivacyPolicy() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
# Main Developer Team
These are the most active developers in the project. Awesome people that make Zen Browser possible, the order is not important, all of them are a big part of the project.
@ -38,8 +37,7 @@ These are the most active developers in the project. Awesome people that make Ze
*These are the site contributors:*
![Contributors](https://contributors-img.web.app/image?repo=zen-browser/www)
`}
</Markdown>
</div>
</main>
</Markdown>
</div>
);
}

6
src/app/branding-assets/page.tsx
View file

@ -1,9 +1,5 @@
import { BrandingAssets } from "@/components/branding-assets";
export default function BrandingAssetsPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<BrandingAssets />
</main>
);
return <BrandingAssets />;
}

6
src/app/create-theme/page.tsx
View file

@ -1,9 +1,5 @@
import CreateThemePage from "@/components/create-theme";
export default function BrandingAssetsPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<CreateThemePage />
</main>
);
return <CreateThemePage />;
}

6
src/app/download/page.tsx
View file

@ -1,9 +1,5 @@
import DownloadPage from "@/components/download/download";
export default function Download() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<DownloadPage />
</main>
);
return <DownloadPage />;
}

8
src/app/layout.tsx
View file

@ -63,10 +63,12 @@ export default async function RootLayout({
disableTransitionOnChange
>
<StyledComponentsRegistry>
<div className="mt-5">
{children}
<div className="flex min-h-screen flex-col">
<Navigation />
<main className="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4">
{children}
</main>
<Footer />
<Navigation /> {/* At the bottom of the page */}
</div>
</StyledComponentsRegistry>
</ThemeProvider>

6
src/app/mods/[theme]/page.tsx
View file

@ -47,9 +47,5 @@ export default async function ThemeInfoPage({
params: { theme: string };
}) {
const { theme } = params;
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<ThemePage themeID={theme} />
</main>
);
return <ThemePage themeID={theme} />;
}

6
src/app/mods/page.tsx
View file

@ -2,9 +2,5 @@ import MarketplacePage from "@/components/marketplace";
import { getAllThemes } from "@/lib/mods";
export default async function ThemesMarketplace() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<MarketplacePage themes={await getAllThemes()} />
</main>
);
return <MarketplacePage themes={await getAllThemes()} />;
}

4
src/app/page.tsx
View file

@ -3,9 +3,9 @@ import Header from "@/components/header";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-start overflow-x-hidden">
<>
<Header />
<Features />
</main>
</>
);
}

18
src/app/privacy-policy/page.tsx
View file

@ -4,13 +4,12 @@ import "./markdown.css";
export default function PrivacyPolicy() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
<div
id="policy"
className="py-42 mx-auto my-52 flex w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
# Privacy Policy
* Last updated: 2024-08-12
@ -88,8 +87,7 @@ If you have any questions or concerns about this Privacy Policy or Zen Browser,
---
By using Zen Browser, you agree to this Privacy Policy. Remember, with Zen, your privacy is in your hands.`}
</Markdown>
</div>
</main>
</Markdown>
</div>
);
}

18
src/app/release-notes/[version]/page.tsx
View file

@ -28,16 +28,14 @@ export default function ReleaseNotePage({
if (!releaseNote) {
return (
<main className="flex min-h-screen flex-col items-center justify-center">
<div className="flex h-screen flex-wrap items-center justify-center">
<h1 className="mt-12 text-4xl font-bold">Release note not found</h1>
<a href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</a>
</div>
</main>
<div className="flex flex-wrap items-center justify-center">
<h1 className="mt-12 text-4xl font-bold">Release note not found</h1>
<a href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</a>
</div>
);
}

46
src/app/release-notes/page.tsx
View file

@ -19,29 +19,27 @@ export const metadata: Metadata = {
export default function ReleaseNotes() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div className="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5">
<h1 className="mt-48 text-4xl font-bold">Release Notes</h1>
<p className="mt-8 text-lg text-muted-foreground">
Stay up to date with the latest changes to Zen Browser! Since the{" "}
<a className="text-blue-500" href="#1.0.0-a.1">
first release
</a>{" "}
till{" "}
<a
className="text-blue-500"
href={`/release-notes/${releaseNotes[0].version}`}
>
{releaseNotes[0].version}
</a>
, we've been working hard to make Zen Browser the best it can be.
<br />
<br /> Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((releaseNote) => (
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
</main>
<div className="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5">
<h1 className="mt-48 text-4xl font-bold">Release Notes</h1>
<p className="mt-8 text-lg text-muted-foreground">
Stay up to date with the latest changes to Zen Browser! Since the{" "}
<a className="text-blue-500" href="#1.0.0-a.1">
first release
</a>{" "}
till{" "}
<a
className="text-blue-500"
href={`/release-notes/${releaseNotes[0].version}`}
>
{releaseNotes[0].version}
</a>
, we've been working hard to make Zen Browser the best it can be.
<br />
<br /> Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((releaseNote) => (
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
);
}

6
src/app/welcome/page.tsx
View file

@ -1,9 +1,5 @@
import WelcomePage from "@/components/welcome";
export default function Download() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<WelcomePage />
</main>
);
return <WelcomePage />;
}

2
src/components/download/download.tsx
View file

@ -155,7 +155,7 @@ export default function DownloadPage() {
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
/>
<div className="relative flex h-screen w-full flex-col items-center justify-center overflow-hidden lg:flex-row">
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden lg:flex-row">
<div className="mx-auto flex w-full flex-col justify-center p-10 md:p-20 lg:w-1/2 lg:p-0 2xl:w-1/3">
<AlertModal
open={alertOpen}

6
src/components/features.tsx
View file

@ -37,7 +37,7 @@ function Question() {
export default function Features() {
return (
<section className="w-full flex-col" id="features">
<section className="w-full flex-col pt-28" id="features">
<BrowserComplexityExample />
<div className="mx-auto mt-16 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
<div className="flex-1 p-5 lg:p-12">
@ -303,7 +303,7 @@ export default function Features() {
/>
</div>
<div className="mx-auto mt-36 flex w-full flex-col md:w-5/6 lg:w-3/4">
<div className="flex flex-col justify-center items-center text-center p-16">
<div className="flex flex-col items-center justify-center p-16 text-center">
<h2 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
Introducing Zen Glance{" 👀"}
</h2>
@ -318,7 +318,7 @@ export default function Features() {
</Link>
</div>
</div>
<video className="rounded-md object-cover w-full" loop autoPlay muted>
<video className="w-full rounded-md object-cover" loop autoPlay muted>
<source src="/vids/glance.webm" type="video/webm" />
</video>
</div>

2
src/components/header.tsx
View file

@ -9,7 +9,7 @@ export default function Header() {
<>
<section
id="hero"
className="relative mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 text-center md:mt-[-50px] md:px-8"
className="relative mx-auto flex min-h-svh max-w-7xl flex-col justify-center px-6 text-center md:mt-[-50px] md:px-8"
>
<div className="relative">
<CoolHeaderText />

8
src/components/marketplace.tsx
View file

@ -120,9 +120,9 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
const isNextNavigationDisabled = currentPage >= totalPages;
return (
<div className="relative mx-auto flex h-full w-full flex-col lg:flex-row">
<div className="relative mx-auto flex h-full w-full flex-grow flex-col lg:flex-row">
{/* Sidebar */}
<div className="relative w-full flex-shrink-0 bg-surface px-10 py-48 shadow dark:bg-[#121212] lg:mt-24 lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:py-32 xl:w-1/3 2xl:w-1/4">
<div className="relative w-full flex-1 bg-surface px-10 py-48 shadow dark:bg-[#121212] lg:mt-24 lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:py-32 xl:w-1/3 2xl:w-1/4">
<StickyBox
className="h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
offsetTop={120}
@ -145,7 +145,7 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
</div>
{/* Main content */}
<div className="flex w-full flex-col pt-16 lg:w-auto">
<div className="flex w-full flex-col justify-between pt-16 lg:w-auto">
{/* Mods Grid */}
<div className="grid w-full grid-cols-1 gap-8 px-5 pt-6 lg:w-auto lg:gap-y-16 lg:px-10 xl:w-auto xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4">
{loadedThemes.map((theme) => (
@ -154,7 +154,7 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
</div>
{/* Pagination */}
<div className="my-8 flex items-center justify-center">
<div className="my-8 flex w-full items-center justify-center">
<Pagination>
<PaginationContent>
<PaginationItem

2
src/components/navigation.tsx
View file

@ -118,7 +118,7 @@ ListItem.displayName = "ListItem2";
export function Navigation() {
const latestRelease = releaseNotes[0];
return (
<div className="border-grey fixed left-0 top-0 z-40 flex w-full items-center justify-center border-b bg-background p-2">
<div className="border-grey sticky left-0 top-0 z-40 flex w-full items-center justify-center border-b bg-background p-2">
<MobileNav />
<NavigationMenu>
<NavigationMenuList className="hidden w-full items-center justify-between gap-32 py-3 sm:flex">

2
src/components/release-note.tsx
View file

@ -70,7 +70,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
return (
<section
className={ny(
"relative flex flex-col border-t lg:flex-row",
"relative flex flex-col border-t pt-28 lg:flex-row",
data.version == releaseNotes[0].version ? "mt-24 pt-24" : "mt-36 pt-36",
)}
id={data.version}

2
src/components/welcome.tsx
View file

@ -5,7 +5,7 @@ import WordPullUp from "./ui/word-pull-up";
export default function WelcomePage() {
return (
<div className="relative flex min-h-screen w-full flex-col items-center justify-center">
<div className="relative flex w-full flex-col items-center justify-center">
<WordPullUp
className="text-center text-6xl"
words="Welcome to Zen Browser!"