styling, mobile behavior

Raghuboi · Apr 10, 2024 · 86d8e00 · 86d8e00
1 parent dec74dd
commit 86d8e00
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 export default async function Page() {
   return (
     <div className="min-h-[85dvh] max-w-full flex justify-center items-center px-[3rem]">
-      <div className="max-w-[40rem] flex flex-col items-center justify-center gap-8">
+      <div className="max-w-[40rem] flex flex-col items-center justify-center gap-4 sm:gap-8">
         <HomeTitle />
         <HomeAbout />
         <HomeButtons />

diff --git a/src/features/home-title.tsx b/src/features/home-title.tsx
@@ -25,7 +25,7 @@ const HomeTitle: React.FC<IHomeTitle> = () => {
     <motion.div
       layout
       transition={{ duration: 0.5 }}
-      className="mr-auto flex flex-col gap-3 transition-width duration-500 ease-in-out"
+      className="relative mr-auto my-1 flex flex-col gap-3 transition-width duration-500 ease-in-out"
     >
       <TypewriterEffect
         words={WORDS}

diff --git a/src/layouts/background.tsx b/src/layouts/background.tsx
@@ -13,7 +13,7 @@ const Background: React.FC<IBackground> = ({ children }) => {
         minSize={0.6}
         maxSize={1.4}
         particleDensity={50}
-        className="w-[100dvw] min-h-[100dvh] absolute"
+        className="w-[100dvw] h-[100dvh] absolute"
         particleColor={theme === "dark" ? "#FFFFFF" : "#000000"}
       />
       <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>