fix(ui): simply bg style

package.json

@@ -21,8 +21,8 @@
     "deploy": "gatsby build && gh-pages -d public -b master"
   },
   "dependencies": {
-    "@mantine/core": "^7.4.1",
-    "@mantine/hooks": "^7.4.1",
+    "@mantine/core": "^7.7.1",
+    "@mantine/hooks": "^7.7.1",
     "@mdx-js/react": "^2.3.0",
     "@react-hooks-library/core": "^0.5.1",
     "@react-icons/all-files": "^4.1.0",

src/components/background.tsx

@@ -48,7 +48,7 @@ const PingBgText = ({ bgText }: PingBgTextProps) => (
 const CenterContainer = ({ children }: PropsWithChildren) => (
   <div
     id="bg-center-container"
-    className="fixed flex items-center justify-center break-all transition-all w-lvw h-lvh opacity-bg"
+    className="fixed flex items-center justify-center break-all transition-all pointer-events-none w-lvw h-lvh opacity-bg"
   >
     {children}
   </div>
@@ -57,7 +57,7 @@ const CenterContainer = ({ children }: PropsWithChildren) => (
 const DotPattern = ({ children }: PropsWithChildren) => (
   <div
     id="dot-pattern-animation"
-    className="fixed w-[90lvw] h-[100lvh] border outline-1 z-[20] dot-pattern"
+    className="fixed w-[90lvw] h-[100lvh] border outline-1 z-[0] dot-pattern"
   >
     {children}
   </div>
@@ -73,7 +73,7 @@ const Background = () => {
         <DotPattern>
           <StaticImage
             className={cn(
-              'pointer-events-none select-none z-[20] grayscale h-full w-full'
+              'pointer-events-none select-none z-[1] grayscale h-full w-full'
             )}
             src="../images/girl.png"
             alt="background images"

src/pages/404.tsx

@@ -1,10 +1,9 @@
 import { FC } from 'react';
 import { Link, HeadFC, PageProps, navigate } from 'gatsby';
 import { StaticImage } from 'gatsby-plugin-image';
-import BackgroundContainer from '../components/background-container';
 
 const NotFoundPage = () => (
-  <BackgroundContainer>
+  <div className="flex flex-col text-white font-primary bg-dracula-darker/70 w-dvw bg-glow">
     <div className="flex flex-col items-center justify-center h-screen gap-y-4">
       <StaticImage
         src="../images/home.webp"
@@ -30,7 +29,7 @@ const NotFoundPage = () => (
         </button>
       </div>
     </div>
-  </BackgroundContainer>
+  </div>
 );
 
 const NotFoundPageRouter: FC<PageProps> = () => <NotFoundPage />;

src/styles/global.css

@@ -78,11 +78,10 @@
 
 html,
 body {
-  width: 100%;
-  height: 100%;
+  width: 100dvw;
+  height: 100dvh;
   margin: 0;
   padding: 0;
-  background-color: #373a4d;
   touch-action: none;
 }