l/wrath
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add noise background image

Browse source
This commit is contained in:
Guoqi Sun 2024-12-11 21:25:58 +08:00
parent c3f2c0839b
commit 821d87c568
3 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/react/noise-bg.tsx Normal file
View file

@ -0,0 +1,19 @@
export function NoiseBg() {
return (
<div
style={{
position: "fixed",
inset: 0,
zIndex: -1,
width: "100%",
height: "100%",
backgroundSize: "128px",
backgroundRepeat: "repeat",
backgroundImage:
"url('https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png')",
opacity: 0.06,
borderRadius: 0,
}}
></div>
)
}

5
src/components/react/test.tsx
View file

@ -1,5 +0,0 @@
export function Test() {
return (
<div className="text-3xl text-blue-500">Test React and TailwindCSS</div>
)
}

2
src/layouts/base.astro
View file

@ -1,6 +1,7 @@
--- ---
import "~/styles/globals.css" import "~/styles/globals.css"
import { config } from "~/config" import { config } from "~/config"
import { NoiseBg } from "~/components/react/noise-bg"
--- ---
<!doctype html> <!doctype html>
@ -35,6 +36,7 @@ import { config } from "~/config"
<body class="dark:bg-[#121212] dark:text-white"> <body class="dark:bg-[#121212] dark:text-white">
<div class="flex min-h-screen w-full justify-center px-10 md:p-0"> <div class="flex min-h-screen w-full justify-center px-10 md:p-0">
<slot /> <slot />
<NoiseBg />
</div> </div>
</body> </body>
</html> </html>