From 8d72508b66a9272185db010ba4a5e794695ef4cf Mon Sep 17 00:00:00 2001 From: Petri Partio Date: Fri, 31 May 2024 13:27:00 +0300 Subject: [PATCH] feat: make nav bg darker when scrolling --- app/globals.css | 21 +++++++++++++++++++++ app/layout.tsx | 2 ++ components/Nav.tsx | 2 +- components/TopFade.tsx | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 components/TopFade.tsx diff --git a/app/globals.css b/app/globals.css index d805cbf..c8654b0 100644 --- a/app/globals.css +++ b/app/globals.css @@ -53,6 +53,27 @@ html { } } +.top-fade { + height: 10rem; + background: #070b1e url('../public/background.webp'); + background-size: 1024px auto; + background-position: top center; + background-repeat: no-repeat; + -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0)); + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + z-index: 50; +} + +@media (min-width: 1024px) { + .top-fade { + background-size: 100% auto; + } +} + h1, h2, h3 { diff --git a/app/layout.tsx b/app/layout.tsx index e49399d..ac1493b 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; import BottomFade from '@/components/BottomFade'; +import TopFade from '@/components/TopFade'; const inter = Inter({ subsets: ['latin'] }); @@ -22,6 +23,7 @@ export default function RootLayout({ return ( + {children} diff --git a/components/Nav.tsx b/components/Nav.tsx index 843332f..fe953b4 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -23,7 +23,7 @@ export default function Nav() { }, []); return ( -