Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-12 15:53:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve dark mode background patterns

Browse Source
This commit is contained in:
Mythie
2023-09-25 00:18:15 +10:00
parent 965b5c0afd
commit 80c9ab5d8c
10 changed files with 42 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/marketing/src/app/(marketing)/layout.tsx
View File

@ -1,4 +1,8 @@
import React from 'react';
'use client';
import React, { useEffect, useState } from 'react';
import { cn } from '@documenso/ui/lib/utils';
import { Footer } from '~/components/(marketing)/footer';
import { Header } from '~/components/(marketing)/header';
@ -8,15 +12,31 @@ export type MarketingLayoutProps = {
};
export default function MarketingLayout({ children }: MarketingLayoutProps) {
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const onScroll = () => {
setScrollY(window.scrollY);
};
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<div className="relative max-w-[100vw] pt-20 md:pt-28">
<div className="fixed left-0 top-0 z-50 w-full bg-white/50 backdrop-blur-md">
<div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
<div
className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
'bg-background/50 backdrop-blur-md': scrollY > 5,
})}
>
<Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
</div>
<div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
<Footer className="mt-24 bg-transparent backdrop-blur-[2px]" />
<Footer className="bg-background border-muted mt-24 border-t" />
</div>
);
}

2
apps/marketing/src/app/(marketing)/oss-friends/page.tsx
View File

@ -37,7 +37,7 @@ export default async function OSSFriendsPage() {
<Image
src={backgroundPattern}
alt="background pattern"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
/>
</div>
</div>