ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 09:20:00 +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() { export default function PrivacyPolicy() {
return ( return (
<main className="flex min-h-screen flex-col items-center justify-start"> <div
<div id="policy"
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"
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>
<Markdown> {`
{`
# Main Developer Team # 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. 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:* *These are the site contributors:*
![Contributors](https://contributors-img.web.app/image?repo=zen-browser/www) ![Contributors](https://contributors-img.web.app/image?repo=zen-browser/www)
`} `}
</Markdown> </Markdown>
</div> </div>
</main>
); );
} }

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

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

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

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

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

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

8
src/app/layout.tsx
View file

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

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

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

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

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

4
src/app/page.tsx
View file

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

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

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

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

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

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

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

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

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

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" 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"> <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 <AlertModal
open={alertOpen} open={alertOpen}

6
src/components/features.tsx
View file

@ -37,7 +37,7 @@ function Question() {
export default function Features() { export default function Features() {
return ( return (
<section className="w-full flex-col" id="features"> <section className="w-full flex-col pt-28" id="features">
<BrowserComplexityExample /> <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="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"> <div className="flex-1 p-5 lg:p-12">
@ -303,7 +303,7 @@ export default function Features() {
/> />
</div> </div>
<div className="mx-auto mt-36 flex w-full flex-col md:w-5/6 lg:w-3/4"> <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"> <h2 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
Introducing Zen Glance{" 👀"} Introducing Zen Glance{" 👀"}
</h2> </h2>
@ -318,7 +318,7 @@ export default function Features() {
</Link> </Link>
</div> </div>
</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" /> <source src="/vids/glance.webm" type="video/webm" />
</video> </video>
</div> </div>

2
src/components/header.tsx
View file

@ -9,7 +9,7 @@ export default function Header() {
<> <>
<section <section
id="hero" 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"> <div className="relative">
<CoolHeaderText /> <CoolHeaderText />

8
src/components/marketplace.tsx
View file

@ -120,9 +120,9 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
const isNextNavigationDisabled = currentPage >= totalPages; const isNextNavigationDisabled = currentPage >= totalPages;
return ( 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 */} {/* 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 <StickyBox
className="h-fit min-w-52 text-xs text-muted-foreground lg:mb-0" className="h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
offsetTop={120} offsetTop={120}
@ -145,7 +145,7 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
</div> </div>
{/* Main content */} {/* 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 */} {/* 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"> <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) => ( {loadedThemes.map((theme) => (
@ -154,7 +154,7 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
</div> </div>
{/* Pagination */} {/* Pagination */}
<div className="my-8 flex items-center justify-center"> <div className="my-8 flex w-full items-center justify-center">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>
<PaginationItem <PaginationItem

2
src/components/navigation.tsx
View file

@ -118,7 +118,7 @@ ListItem.displayName = "ListItem2";
export function Navigation() { export function Navigation() {
const latestRelease = releaseNotes[0]; const latestRelease = releaseNotes[0];
return ( 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 /> <MobileNav />
<NavigationMenu> <NavigationMenu>
<NavigationMenuList className="hidden w-full items-center justify-between gap-32 py-3 sm:flex"> <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 ( return (
<section <section
className={ny( 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", data.version == releaseNotes[0].version ? "mt-24 pt-24" : "mt-36 pt-36",
)} )}
id={data.version} 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() { export default function WelcomePage() {
return ( 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 <WordPullUp
className="text-center text-6xl" className="text-center text-6xl"
words="Welcome to Zen Browser!" words="Welcome to Zen Browser!"