responsify 404 page mobile

acm-ucr · Nov 26, 2024 · 3e6c47b · 3e6c47b
1 parent 31bf5e2
commit 3e6c47b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -6,33 +6,38 @@ import { links } from "@/data/Footer";
 
 const NotFound = () => {
   return (
-    <div className="flex h-[820px] w-full flex-col items-center justify-center bg-gradient-to-b from-hlg-dark-gray via-hlg-dark-gray to-hlg-red-200">
+    <div className="relative flex h-[600px] w-full flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-hlg-dark-gray via-hlg-dark-gray to-hlg-red-200 lg:h-[820px]">
       <Image
         src={Logo}
         alt="Highlander Gloves Logo"
-        className="absolute left-8 size-[620px] translate-y-20 transform items-end"
+        className="absolute left-8 size-[200px] -translate-x-8 translate-y-60 items-end lg:size-[620px] lg:translate-y-20"
       />
-      <div className="flex flex-col items-center justify-center pt-20">
-        <div className="relative flex items-center justify-center rounded-3xl bg-hlg-red-200 px-28 py-8 text-3xl">
-          <p className="absolute translate-x-2 translate-y-2 self-center font-archivo-black text-9xl text-black">
+      <div className="flex flex-col items-center justify-center pt-36 lg:pt-20">
+        <div className="relative flex items-center justify-center rounded-full bg-hlg-red-200 px-12 py-3 text-3xl lg:rounded-3xl lg:px-28 lg:py-8">
+          <p className="absolute translate-x-1 translate-y-1 self-center font-archivo-black text-5xl text-black lg:translate-x-2 lg:translate-y-2 lg:text-9xl">
+            404
+          </p>
+          <p className="relative font-archivo-black text-5xl lg:text-9xl">
             404
           </p>
-          <p className="relative font-archivo-black text-9xl">404</p>
         </div>
-        <p className="relative pb-10 pt-4 font-archivo-narrow text-[8.125rem]">
+        <p className="relative hidden pb-10 pt-4 font-archivo-narrow text-[8.125rem] md:block">
           Page Not Found
         </p>
+        <p className="relative block pb-5 pt-4 font-archivo-narrow text-3xl md:hidden">
+          PAGE NOT FOUND
+        </p>
         <div className="relative">
           <Button txt="Back To Home" link="/" />
         </div>
       </div>
-      <div className="m-auto mb-0 mr-5 flex items-end gap-4 p-4 pr-0 text-black">
+      <div className="m-auto mb-0 mr-3 flex items-end gap-2 p-4 pr-0 text-black lg:mr-5 lg:gap-4">
         {links.map((link, index) => (
           <Link
             key={index}
             href={link.link}
             target="_blank"
-            className="text-4xl"
+            className="text-2xl lg:text-4xl"
           >
             {link.icon}
           </Link>

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -5,10 +5,10 @@ const Button = (props: { txt: string; link: string }) => {
   return (
     <Link
       href={props.link}
-      className="box-border flex items-center justify-center rounded-full border-[5px] border-hlg-red-300 bg-hlg-red-200 px-12 py-2 font-archivo-black text-3xl transition-transform duration-300 hover:-translate-y-1"
+      className="box-border flex items-center justify-center rounded-full border-[5px] border-hlg-red-300 bg-hlg-red-200 px-12 py-2 font-archivo-black text-xl transition-transform duration-300 hover:-translate-y-1 lg:text-3xl"
     >
       <div className="relative inline-block whitespace-nowrap">
-        <span className="absolute left-2 top-1.5 text-black opacity-100">
+        <span className="absolute left-1 top-1 text-black opacity-100 lg:left-2 lg:top-1.5">
           {props.txt}
         </span>
         <span className="relative text-white">{props.txt}</span>