Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 06:19:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

make title text fade behind header

Browse Source
This commit is contained in:
Max Ward 2023-02-19 18:42:52 -08:00
parent 25ccd941ca
commit 35ecaece5b
2 changed files with 41 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/layout/Navigation.tsx
View File

@ -12,43 +12,45 @@ export interface NavigationProps {
export function Navigation(props: NavigationProps) { export function Navigation(props: NavigationProps) {
return ( return (
<div className="fixed left-0 right-0 top-0 z-10 flex min-h-[88px] items-center justify-between py-5 px-7"> <div className="fixed left-0 right-0 top-0 z-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent">
<div <div className="flex items-center justify-between py-5 px-7">
className={`${ <div
props.bg ? "opacity-100" : "opacity-0" className={`${
} absolute inset-0 block bg-denim-100 transition-opacity duration-300`} props.bg ? "opacity-100" : "opacity-0"
> } absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" /> >
</div> <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
<div className="relative flex w-full items-center justify-center sm:w-fit">
<div className="mr-auto sm:mr-6">
<Link to="/">
<BrandPill clickable />
</Link>
</div> </div>
{props.children} <div className="relative flex w-full items-center justify-center sm:w-fit">
</div> <div className="mr-auto sm:mr-6">
<div <Link to="/">
className={`${ <BrandPill clickable />
props.children ? "hidden sm:flex" : "flex" </Link>
} relative flex-row gap-4`} </div>
> {props.children}
<a </div>
href={conf().DISCORD_LINK} <div
target="_blank" className={`${
rel="noreferrer" props.children ? "hidden sm:flex" : "flex"
className="text-2xl text-white" } relative flex-row gap-4`}
> >
<IconPatch icon={Icons.DISCORD} clickable /> <a
</a> href={conf().DISCORD_LINK}
<a target="_blank"
href={conf().GITHUB_LINK} rel="noreferrer"
target="_blank" className="text-2xl text-white"
rel="noreferrer" >
className="text-2xl text-white" <IconPatch icon={Icons.DISCORD} clickable />
> </a>
<IconPatch icon={Icons.GITHUB} clickable /> <a
</a> href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
>
<IconPatch icon={Icons.GITHUB} clickable />
</a>
</div>
</div> </div>
</div> </div>
); );

8
src/views/search/SearchView.tsx
View File

@ -32,10 +32,10 @@ export function SearchView() {
<div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center"> <div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
<div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" /> <div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
</div> </div>
<div className="relative z-20"> <div className="relative z-10 mb-16">
<div className="mb-16"> <Title className="mx-auto max-w-xs">{t("search.title")}</Title>
<Title className="mx-auto max-w-xs">{t("search.title")}</Title> </div>
</div> <div className="relative z-30">
<Sticky enabled top={16} onStateChange={stickStateChanged}> <Sticky enabled top={16} onStateChange={stickStateChanged}>
<SearchBarInput <SearchBarInput
onChange={setSearch} onChange={setSearch}