make title text fade behind header

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

View File

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

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 bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
</div>
<div className="relative z-20">
<div className="mb-16">
<div className="relative z-10 mb-16">
<Title className="mx-auto max-w-xs">{t("search.title")}</Title>
</div>
<div className="relative z-30">
<Sticky enabled top={16} onStateChange={stickStateChanged}>
<SearchBarInput
onChange={setSearch}