mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2025-01-06 09:36:00 +00: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

4
src/components/layout/Navigation.tsx
View file

@ -12,7 +12,8 @@ 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 className="flex items-center justify-between py-5 px-7">
<div <div
className={`${ className={`${
props.bg ? "opacity-100" : "opacity-0" props.bg ? "opacity-100" : "opacity-0"
@ -51,5 +52,6 @@ export function Navigation(props: NavigationProps) {
</a> </a>
</div> </div>
</div> </div>
</div>
); );
} }

4
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}