fix: aboutCard

delta · Dec 12, 2023 · 017edb0 · 017edb0
1 parent 00cd359
commit 017edb0
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 9 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -98,7 +98,7 @@ const About = () => {
                 <Image
                     src={bigmascot}
                     alt="bigmascot"
-                    className="xl:scale-90 scale-[35%] md:scale-[50%]"
+                    className="xl:scale-75 scale-[35%] md:scale-[50%]"
                 />
             </motion.div>
             <div className="flex flex-col md:justify-center max-md:mt-7 items-center h-full w-full m-0">

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -276,7 +276,7 @@ body {
     filter: hue-rotate(137deg) drop-shadow(0 0 20px #23a347) brightness(120%);
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1024px) {
     .about {
         min-height: max(100vh, 742px);
     }
@@ -288,6 +288,24 @@ body {
     }
 }
 
-.markdown > * {
+.markdown>* {
     all: revert;
 }
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgb(170, 168, 168);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(126, 251, 254, 1);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(126, 251, 254, 1);
+}
diff --git a/src/components/AboutCard/AboutCard.module.css b/src/components/AboutCard/AboutCard.module.css
@@ -47,6 +47,14 @@
     border-radius: 2px;
 }
 
+@media screen and ((width > 600px) and (width < 1000px)) {
+    .parent {
+        width: 30rem;
+        height: 75%;
+    }
+
+}
+
 /* .topWedge {
     width: 70px;
     height: 6.9px;

diff --git a/src/components/AboutCard/AboutCard.tsx b/src/components/AboutCard/AboutCard.tsx
@@ -4,11 +4,8 @@ import AboutContent from './AboutContent.json';
 const AboutCard: React.FC<AboutCardProps> = ({ cardRef }) => {
     const content = AboutContent.content;
     return (
-        <div className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[65%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 ">
-            <p
-                ref={cardRef}
-                className="pt-3 font-Nunito max-lg:text-base text-lg md:h-[80%] lg:h-[85%]"
-            >
+        <div className="AboutCard max-lg:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[50rem] md:h-[60%] flex justify-center items-center pt-20 p-11 ">
+            <p ref={cardRef} className="font-Nunito text-xl h-[90%] w-[88.5%] overflow-auto p-1">
                 {content}
             </p>
         </div>

diff --git a/src/components/AboutCard/AboutCardMob.tsx b/src/components/AboutCard/AboutCardMob.tsx
@@ -9,7 +9,7 @@ const AboutCardMob: React.FC<AboutCardProps> = ({ cardRef }) => {
             className={
                 styles.parent +
                 ' ' +
-                'md:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
+                'lg:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
             }
             ref={cardRef}
         >