Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

more mobile

Browse source
This commit is contained in:
Shing Hung 2025-01-26 17:22:27 -08:00
parent 5322ddd422
commit fe78684b97
8 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/core/Title.astro
View file

@ -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}

2
src/components/events/Calendar.jsx
View file

@ -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 */}

10
src/components/events/EventList.jsx
View file

@ -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>
);

6
src/components/events/EventTitle.astro
View file

@ -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>

9
src/components/events/UpcomingEvents.astro
View file

@ -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="w-1/4 text-white pr-[5%] mr-[10%]">
<div class="flex ml-[15%] md:my-[10%] my-[20%]">
<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>

2
src/components/projects/AP.astro
View file

@ -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>

12
src/components/projects/QP.astro
View file

@ -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="flex items-center text-[2.7vw] mb-[4%]">
<div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
<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

4
src/pages/events.astro
View file

@ -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 />