bender/2c30383e-f0ab-4aed-8d0a-e38cbac2af92
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Add an animated background to the website.

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-04-20 09:58:27 +00:00
parent 75addd1200
commit 6d5f16afbc
2 changed files with 4 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -21,7 +21,7 @@ export default function App() {
}, []); }, []);
return ( return (
<div className="app-container"> <div className="app-container relative z-10 isolate">
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarCentered <NavbarCentered
logo={<img src={logoImg} alt="Apex Plumbing" className="h-8 w-auto" />} logo={<img src={logoImg} alt="Apex Plumbing" className="h-8 w-auto" />}

21
src/index.css
View File

@@ -134,33 +134,18 @@ html {
body { body {
margin: 0; margin: 0;
background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: '${inter.variable} ${openSans.variable}', sans-serif; font-family: '${inter.variable} ${openSans.variable}', sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
overscroll-behavior-y: none; overscroll-behavior-y: none;
background: linear-gradient(60deg, var(--background) 0%, var(--background-accent) 50%, var(--background) 100%);
background-size: 200% 200%;
animation: moveGradient 15s ease infinite;
} }
.app-container { .app-container {
position: relative;
isolation: isolate;
}
.app-container::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: linear-gradient(
60deg,
var(--background) 0%,
var(--accent) 50%,
var(--background) 100%
);
background-size: 400% 400%;
animation: moveGradient 15s ease infinite;
} }
h1, h1,