more mobile

src/components/core/Title.astro

@@ -3,7 +3,7 @@ const {title} = Astro.props;
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="flex items-center text-[3vw] ml-[10%] pt-[10%] text-white font-semibold">
+<div class="flex items-center md:text-[3vw] text-[4.5vw] ml-[10%] md:pt-[10%] pt-[15%] text-white font-semibold">
     <LiaDotCircle className=" mr-[1vw] text-[2.7vw]"/>
     <p>
         {title}

src/components/events/Calendar.jsx

@@ -234,7 +234,7 @@ const Calendar = ({ CALENDAR_API_KEY, EVENT_CALENDAR_ID }) => {
 
   return (
     <div
-      className="w-[90vw] mx-auto p-[3vw] relative"
+      className="md:w-[90vw] w-[95vw] mx-auto p-[3vw] relative z-10"
       onMouseMove={handleMouseMove}
     >
       {/* Hovering Calendar Header */}

src/components/events/EventList.jsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
 
 const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
-  <div className="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative">
+  <div className="text-white w-[40vw] pl-[8%] md:border-l-[0.3vw] border-l-[0.5vw] border-white/70 pb-[5%] relative">
     <p
       data-inview
-      className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]`}
+      className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full md:text-[1.3vw] text-[2.3vw]`}
     >
       {name}
     </p>
     <div
       data-inview
-      className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]`}
+      className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit md:text-[1.2vw] text-[2vw] my-[2%]`}
     >
       <p>Location: {location}</p>
       {date && (
@@ -28,11 +28,11 @@ const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
     </div>
     <p
       data-inview
-      className={`animate-duration-500 animate-delay-${delay * 200 + 200} in-view:animate-fade-left text-[1vw] text-white/60`}
+      className={`animate-duration-500 animate-delay-${delay * 200 + 200} in-view:animate-fade-left md:text-[1vw] text-[1.8vw] text-white/60`}
     >
       {description}
     </p>
-    <div className="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" />
+    <div className="bg-ieee-yellow md:h-[1.2vw] h-[1.5vw] md:w-[1.2vw] w-[1.5vw] rounded-full absolute -top-[1.5%] -left-[2%]" />
   </div>
 );
 

src/components/events/EventTitle.astro

@@ -4,14 +4,14 @@ import eventbg from "../../images/eventbg.png";
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="w-full pt-[25vh] flex justify-center relative">
+<div class="w-full md:pt-[13vw] pt-[16vw] flex justify-center relative">
     <Image
         src={eventbg}
         alt="Event Page Background"
-        class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover"
+        class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover"
     />
     <div
-        class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]"
+        class="absolute -bottom-[6%] md:left-[20%] left-[10%] flex items-center md:text-[3vw] text-[6vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]"
     >
         <LiaDotCircle className=" mr-[2vw] pt-[0.5%]" />
         <p>EVENTS</p>

src/components/events/UpcomingEvents.astro

@@ -1,21 +1,20 @@
 ---
-import UpcomingEvent from "./UpcomingEvent.astro";
 import { LiaDotCircle } from "react-icons/lia";
 import EventList from "./EventList.jsx";
 const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
 const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
 ---
 
-<div class="flex ml-[15%] my-[10%]">
+<div class="flex ml-[15%] md:my-[10%] my-[20%]">
-    <div class="w-1/4 text-white pr-[5%] mr-[10%]">
+    <div class="md:w-1/4 w-[30%] text-white pr-[5%] mr-[10%]">
         <div class="w-[6vw] h-[0.3vw] bg-ieee-yellow rounded-full"></div>
-        <div class="flex items-center text-[2vw] font-bold my-[10%]">
+        <div class="flex items-center md:text-[2vw] text-[4vw] font-bold my-[10%]">
             <LiaDotCircle className=" mr-[1vw] text-[2.5vw]" />
             <p>
                 Upcoming <br /> Events
             </p>
         </div>
-        <p class="text-[1.3vw] font-light">
+        <p class="md:text-[1.3vw] text-[2vw] font-light">
             SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE!
         </p>
     </div>

src/components/projects/AP.astro

@@ -4,7 +4,7 @@ import ProjectSection from "./ProjectSection.astro";
 ---
 
 
-<div class="text-white h-[65vh] justify-between mt-[15%] mb-[30%] mx-[10%] relative">
+<div class="text-white mt-[15%] mb-[30%] mx-[10%] relative">
     <div class="flex items-center text-[2.7vw] mb-[7%]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
         <p>

src/components/projects/QP.astro

@@ -6,20 +6,20 @@ import qp from "../../images/qp.png";
 import { IoIosArrowDroprightCircle } from "react-icons/io";
 ---
 
-<div class="text-white flex flex-col items-center my-[7%] relative">
+<div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
-    <div class="flex items-center text-[2.7vw] mb-[4%]">
+    <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
         <p>Quarterly Project</p>
     </div>
     <Image
         src={qp}
         alt="qp showcase photo"
-        class="w-[70vw] aspect-[2.5/1] rounded-full"
+        class="md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full"
     />
     <Link
         data-inview
         href="/quarterly"
-        className="in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
+        className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
     >
         more details
         <IoIosArrowDroprightCircle
@@ -27,9 +27,9 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         />
     </Link>
     <div
-        data-inview class="in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
+        data-inview class="in-view:animate-fade-right md:w-[45%] w-[70%] text-[1.8vw] md:text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute md:-bottom-[6%] -bottom-[15%] md:left-[15%] left-[5%] px-[1.5%] py-[1%] rounded-[1.5vw]"
     >
-        <p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
+        <p class="md:text-[1.4vw] text-[2.2vw] mb-[2%]">Quarterly Project</p>
         <p>
             Getting started on hardware development or want to make your own
             project? Need something to put on your resume? IEEE's Quarterly

src/pages/events.astro

@@ -15,12 +15,12 @@ const EVENT_CALENDAR_ID = import.meta.env.EVENT_CALENDAR_ID;
     <Image
         src={eventborder}
         alt="JOIN US"
-        class="absolute left-[1vw] w-[4vw] top-[60vh]"
+        class="absolute left-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw] -z-10"
     />
     <Image
         src={eventborder}
         alt="JOIN US"
-        class="absolute right-[1vw] w-[4vw] top-[60vh]"
+        class="absolute right-[1vw] md:w-[4vw] w-[10vw] md:top-[60vh] top-[70vw] -z-10"
     />
     <EventTitle />
     <UpcomingEvents />