From 94ef5e3286ce1b146997911a95209219315841f5 Mon Sep 17 00:00:00 2001
From: Chiayi Wu <wu@Aidens-MacBook-Air.local>
Date: Mon, 27 Jan 2025 11:27:03 -0800
Subject: [PATCH] fix mobile for QP page

---
 src/components/qp/Carousel.astro     |  4 ++--
 src/components/qp/Join.astro         | 12 ++++++------
 src/components/qp/Mentorship.astro   | 12 ++++++------
 src/components/qp/PastProject.astro  |  4 ++--
 src/components/qp/PastProjects.astro |  2 +-
 src/components/qp/Step.astro         |  2 +-
 src/components/qp/Steps.astro        |  2 +-
 src/pages/quarterly.astro            |  2 +-
 8 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/qp/Carousel.astro b/src/components/qp/Carousel.astro
index fd1b879..65ded6b 100644
--- a/src/components/qp/Carousel.astro
+++ b/src/components/qp/Carousel.astro
@@ -7,7 +7,7 @@ import qp from "../../images/qp.webp";
 <div class="flex flex-col items-center pb-[5%]">
     <Subtitle title="We Are Excited To See You Here!" />
 
-    <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
+    <p class="w-1/3 text-center md:text-[1.2vw] text-[1.6vw] pb-[5%]">
         Lorem ipsum is placeholder text commonly used in the graphic, print, and
         publishing industries f
     </p>
@@ -15,6 +15,6 @@ import qp from "../../images/qp.webp";
     <Image
         src={qp}
         alt="board group photos"
-        class="w-1/2 rounded-[2vw] object-cover aspect-[2/1]"
+        class="md:w-1/2 w-[65vw] rounded-[2vw] object-cover aspect-[2/1]"
     />
 </div>
diff --git a/src/components/qp/Join.astro b/src/components/qp/Join.astro
index 573d9ff..dc45f68 100644
--- a/src/components/qp/Join.astro
+++ b/src/components/qp/Join.astro
@@ -7,20 +7,20 @@ import jonathan from "../../images/about3.webp";
 ---
 
 <div class="flex justify-center mb-[10%]">
-    <div class="flex w-[70%] items-center">
+    <div class="flex md:w-[70%] w-[80%] items-center">
         <div class="w-1/2 flex justify-center h-full relative">
             <Image src={mentorship} alt="blue background" class="mr-[20%]" />
             <Image
                 src={jonathan}
                 alt="blue background"
-                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0"
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] md:top-[5%] top-[9%] left-0"
             />
         </div>
-        <div class="w-1/2 font-light text-[1.2vw]">
-            <div class="flex items-center text-[2.3vw] mb-[5%]">
+        <div class="w-1/2 font-light md:text-[1.2vw] text-[1.6vw]">
+            <div class="flex items-center md:text-[2.3vw] text-[4vw] mb-[5%]">
                 <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
                 <p
-                    class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-ieee-yellow"
+                    class="md:text-[2.3vw] text-[4vw] font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-ieee-yellow"
                 >
                     How to join
                 </p>
@@ -37,7 +37,7 @@ import jonathan from "../../images/about3.webp";
                 <Link
                     href="/"
                     target="_blank"
-                    className="py-[2%] px-[15%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                    className="py-[2%] px-[15%] md:text-[1.2vw] text-[1.6vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
                 >
                     JOIN
                 </Link>
diff --git a/src/components/qp/Mentorship.astro b/src/components/qp/Mentorship.astro
index 76c7bef..37e3dba 100644
--- a/src/components/qp/Mentorship.astro
+++ b/src/components/qp/Mentorship.astro
@@ -7,12 +7,12 @@ import jonathan from "../../images/about3.webp";
 ---
 
 <div class="flex justify-center mt-[10%] mb-[3%]">
-    <div class="flex w-[70%] items-center">
-        <div class="w-1/2 font-light text-[1.2vw]">
-            <div class="flex items-center text-[2.3vw] mb-[5%]">
+    <div class="flex md:w-[70%] w-[80%] items-center">
+        <div class="md:w-1/2 w-[60%] font-light md:text-[1.2vw] text-[1.6vw]">
+            <div class="flex items-center md:text-[2.3vw] text-[4vw] mb-[5%]">
                 <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
                 <p
-                    class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow"
+                    class="md:text-[2.3vw] text-[4vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow"
                 >
                     Mentorship
                 </p>
@@ -33,7 +33,7 @@ import jonathan from "../../images/about3.webp";
                 <Link
                     href="/"
                     target="_blank"
-                    className="p-[2%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
+                    className="p-[2%] md:text-[1.2vw] text-[1.6vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"
                 >
                     BECOME A MENTOR
                 </Link>
@@ -45,7 +45,7 @@ import jonathan from "../../images/about3.webp";
             <Image
                 src={jonathan}
                 alt="blue background"
-                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] right-[10%]"
+                class="absolute rounded-full object-cover aspect-[262/433] w-[54%] md:top-[5%] top-[15%] right-[10%]"
             />
         </div>
     </div>
diff --git a/src/components/qp/PastProject.astro b/src/components/qp/PastProject.astro
index 95c3db8..8e1a8d1 100644
--- a/src/components/qp/PastProject.astro
+++ b/src/components/qp/PastProject.astro
@@ -5,10 +5,10 @@ import Link from "next/link";
 ---
 
 <Link href={link} target="_blank" className={`ease-in-out group relative col-span-${col} text-white`}>
-    <img src={image} alt="past projects image" class="h-[30vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300" />
+    <img src={image} alt="past projects image" class="md:h-[30vh] h-[15vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300" />
 
     <div class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]">
-        <div class="text-[1.1vw] flex w-full px-[2%] justify-between items-end">
+        <div class="text-[1.4vw] md:text-[1.1vw] flex w-full px-[2%] justify-between items-end">
             <p class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
                 {title}
             </p>
diff --git a/src/components/qp/PastProjects.astro b/src/components/qp/PastProjects.astro
index f70523e..91194db 100644
--- a/src/components/qp/PastProjects.astro
+++ b/src/components/qp/PastProjects.astro
@@ -6,7 +6,7 @@ import Subtitle from "../core/Subtitle.astro";
 <div class="flex flex-col items-center">
     <Subtitle title="Past Projects" />
 
-    <div class="w-[70%] grid grid-cols-6 gap-[1.5vw]">
+    <div class="w-[80%] md:w-[70%] grid grid-cols-6 gap-[1.5vw]">
         {projects.map((project)=>(
             <PastProject
              title = {project.title}
diff --git a/src/components/qp/Step.astro b/src/components/qp/Step.astro
index b02486f..c9b0976 100644
--- a/src/components/qp/Step.astro
+++ b/src/components/qp/Step.astro
@@ -3,7 +3,7 @@ const { text, number, col, position, width } = Astro.props;
 ---
 
 <div
-    class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
+    class={`relative col-span-${col} border-[0.1vw] border-white/30 text-[1.5vw] md:text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw] `}
 >
     <p
         class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight `}
diff --git a/src/components/qp/Steps.astro b/src/components/qp/Steps.astro
index 685584e..07d2048 100644
--- a/src/components/qp/Steps.astro
+++ b/src/components/qp/Steps.astro
@@ -6,7 +6,7 @@ import Subtitle from "../core/Subtitle.astro";
 
 <div class="flex flex-col items-center mt-[7%] mb-[10%]">
     <Subtitle title="How it works:" />
-    <div class="grid grid-rows-2 w-[70%] gap-[2vw]">
+    <div class="grid grid-rows-2 md:w-[70%] w-[80%] gap-[2vw]">
         <div class="grid grid-cols-4 gap-[1.5vw]">
             {
                 steps
diff --git a/src/pages/quarterly.astro b/src/pages/quarterly.astro
index 99802bc..1f3a77b 100644
--- a/src/pages/quarterly.astro
+++ b/src/pages/quarterly.astro
@@ -30,7 +30,7 @@ import Timeline from "../components/qp/Timeline.astro";
             data-inview
             src={qp}
             alt="board group photos"
-            class="in-view:animate-fade w-2/3 rounded-full object-cover aspect-[2.5/1]"
+            class="in-view:animate-fade md:w-2/3 w-[75vw] rounded-full object-cover aspect-[2.5/1]"
         />
     </div>
     <About