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

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

@ -5,7 +5,6 @@ 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"
@ -40,6 +39,5 @@ These are the most active developers in the project. Awesome people that make Ze
`}
</Markdown>
</div>
</main>
);
}

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 />;
}

6
src/app/layout.tsx
View file

@ -63,10 +63,12 @@ export default async function RootLayout({
disableTransitionOnChange
>
<StyledComponentsRegistry>
<div className="mt-5">
<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>
</>
);
}

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

@ -4,10 +4,9 @@ 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"
className="py-42 mx-auto my-52 flex w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
@ -90,6 +89,5 @@ 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>
);
}

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

@ -28,8 +28,7 @@ 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">
<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">
@ -37,7 +36,6 @@ export default function ReleaseNotePage({
</Button>
</a>
</div>
</main>
);
}

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

@ -19,7 +19,6 @@ 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">
@ -42,6 +41,5 @@ export default function ReleaseNotes() {
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
</main>
);
}

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!"