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

fixed mobile buggs

Browse source
This commit is contained in:
chark1es 2025-01-23 14:03:05 -08:00
parent 5322ddd422
commit bacf18751d
2 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/components/board/Officer.astro
View file

@ -2,31 +2,53 @@
import { FaGear } from "react-icons/fa6"; import { FaGear } from "react-icons/fa6";
import { MdEmail } from "react-icons/md"; import { MdEmail } from "react-icons/md";
import Link from "next/link"; import Link from "next/link";
const {name, position, picture, email} = Astro.props; const { name, position, picture, email } = Astro.props;
--- ---
<div class = "text-white">
<div class = "text-ieee-yellow"> <div class="text-white">
<Link href={`mailto:${email}`} className = "flex items-center ml-[3%] py-[0.5vh] group"> <div class="text-ieee-yellow">
<MdEmail className = "md:text-[1.5vw] text-[2.5vw] mr-[0.5%] group-hover:scale-110 group-hover:opacity-70 duration-300"/> <Link
<p class = "md:text-[0.8vw] text-[2vw]"> href={`mailto:${email}`}
className="flex items-center ml-[3%] py-[0.5vh] group"
>
<MdEmail
className="md:text-[1.5vw] text-[2.5vw] mr-[0.5%] group-hover:scale-110 group-hover:opacity-70 duration-300"
/>
<p class="md:text-[0.8vw] text-[2vw]">
{email} {email}
</p> </p>
</Link> </Link>
</div> </div>
<div class = "md:w-[20vw] w-[35vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center relative"> <div
<img src ={picture} alt = "officer" class = "md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]" > class="md:w-[20vw] w-[35vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center relative"
<div class = "bg-white w-fit rounded-full aspect-square md:p-[0.4vw] p-[0.8vw] text-ieee-black md:text-[1.8vw] text-[3.5vw] absolute md:right-[1.5vw] md:top-[1.5vw] right-[2.5vw] top-[2.5vw]"> >
<FaGear/> <img
src={picture}
alt="officer"
class="md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]"
/>
<div
class="bg-white w-fit rounded-full aspect-square md:p-[0.4vw] p-[0.8vw] text-ieee-black md:text-[1.8vw] text-[3.5vw] absolute md:right-[1.5vw] md:top-[1.5vw] right-[2.5vw] top-[2.5vw]"
>
<FaGear />
</div> </div>
<div class = "w-full flex justify-between px-[7%]"> <p
<p data-inview class = " in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"> data-inview
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]"
>
<p
data-inview
class="in-view:animate-fade-right text-[2vw] font-light md:leading-[3vh] leading-[1.5vh]"
>
{name} {name}
</p> </p>
<div data-inview class = "md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] md:w-[8vw] w-[15vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"> <div
data-inview
class="md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] w-[20vw] md:w-[10vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center"
>
{position} {position}
</div> </div>
</div> </p>
</div> </div>
</div>
</div>

2
src/data/officers.json
View file

@ -77,7 +77,7 @@
"type": ["Internal"] "type": ["Internal"]
}, },
{ {
"name": "Wan-Rong (Emma) Leung", "name": "Emma Leung",
"position": "Design Chair", "position": "Design Chair",
"picture": "/officers/emma.jpg", "picture": "/officers/emma.jpg",
"email": "waleung@ucsd.edu", "email": "waleung@ucsd.edu",