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

Fixed height issues relating to navbar

Browse source
This commit is contained in:
chark1es 2025-01-27 10:22:09 -08:00
parent 43fb2f37d8
commit 9c114fb1db
5 changed files with 121 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/components/board/Officers.astro
View file

@ -15,51 +15,50 @@ const currentFilter = "All";
--- ---
<div <div
class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]" class="text-white flex flex-col items-center md:mt-[5vw] mt-[10vw] mb-[10vh]"
> >
<div <div
data-inview data-inview
class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down" class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
> >
<Image src={about} alt="About background image" /> <Image src={about} alt="About background image" />
<Image <Image
src={neko} src={neko}
alt="About image" alt="About image"
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]" class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
/> />
</div> </div>
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]"> <div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]">
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
<p>MEET THE BOARD</p> <p>MEET THE BOARD</p>
</div> </div>
<p <p
class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center" class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center"
> >
Our board comprises 31 students of varying majors, colleges, and Our board comprises 31 students of varying majors, colleges, and interests!
interests! Feel free to reach out for any questions about our position Feel free to reach out for any questions about our position or experiences.
or experiences. </p>
</p>
<Filter filters={types} currentFilter={currentFilter} /> <Filter filters={types} currentFilter={currentFilter} />
<div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]"> <div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]">
{ {
officers.map((officer) => ( officers.map((officer) => (
<div <div
data-officer data-officer
data-types={JSON.stringify(officer.type)} data-types={JSON.stringify(officer.type)}
style="opacity: 0; visibility: hidden" style="opacity: 0; visibility: hidden"
> >
<Officer <Officer
name={officer.name} name={officer.name}
position={officer.position} position={officer.position}
picture={officer.picture} picture={officer.picture}
email={officer.email} email={officer.email}
/> />
</div> </div>
)) ))
} }
</div> </div>
</div> </div>

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

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

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

@ -4,16 +4,16 @@ import eventbg from "../../images/eventbg.webp";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="w-full md:pt-[13vw] pt-[16vw] flex justify-center relative"> <div class="w-full md:pt-[5vw] pt-[10vw] flex justify-center relative">
<Image <Image
src={eventbg} src={eventbg}
alt="Event Page Background" alt="Event Page Background"
class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover" class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover"
/> />
<div <div
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]" 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%]" /> <LiaDotCircle className=" mr-[2vw] pt-[0.5%]" />
<p>EVENTS</p> <p>EVENTS</p>
</div> </div>
</div> </div>

43
src/components/find/FindTitle.astro
View file

@ -3,21 +3,32 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="md:pt-[10vw] pt-[15vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]"> <div
<div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col"> class="md:pt-[5vw] pt-[10vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]"
<div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]"> >
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
<p> <div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
Contact Us <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
</p> <p>Contact Us</p>
</div>
<p class="md:text-[1.25vw] text-[2vw]">
The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
</p>
<div class="flex justify-end">
<Link data-inview href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 md:text-[1.2vw] text-[2vw]">
DISCORD
</Link>
</div>
</div> </div>
<p class="md:text-[1.25vw] text-[2vw]">
The <a
class="text-ieee-yellow underline"
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank">IEEE Project Space</a
> is an open-access, collaborative space located at EBU1-4710. Students can
do homework or get access to basic electronic tools such as soldering stations,
breadboard components, and Arduino and Raspberry PI parts!
</p>
<div class="flex justify-end">
<Link
data-inview
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank"
className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 md:text-[1.2vw] text-[2vw]"
>
DISCORD
</Link>
</div>
</div>
</div> </div>

47
src/components/join/JoinTitle.astro
View file

@ -3,22 +3,35 @@ import Link from "next/link";
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="md:pt-[7vw] pt-[15vw] text-white w-full flex justify-center mb-[10vw]"> <div class="text-white w-full flex justify-center mb-[10vw]">
<div class="w-3/4 md:h-[20vw] h-[40vw] flex justify-between flex-col"> <div class="w-3/4 md:h-[20vw] h-[40vw] flex justify-between flex-col">
<div data-inview class=" animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right"> <div
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> data-inview
<p> class="animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right"
Join Us >
</p> <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
</div> <p>Join Us</p>
<p class="text-[2.2vw] md:text-[1.25vw]">
The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
</p>
<div data-inview class="animate-ease-in-out flex justify-end in-view:animate-fade-up">
<Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="text-[2.5vw] md:text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300">
JOIN
</Link>
</div>
</div> </div>
<p class="text-[2.2vw] md:text-[1.25vw]">
The <a
class="text-ieee-yellow underline"
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank">IEEE Project Space</a
> is an open-access, collaborative space located at EBU1-4710. Students can
do homework or get access to basic electronic tools such as soldering stations,
breadboard components, and Arduino and Raspberry PI parts!
</p>
<div
data-inview
class="animate-ease-in-out flex justify-end in-view:animate-fade-up"
>
<Link
href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
target="_blank"
className="text-[2.5vw] md:text-[1.2vw] border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300"
>
JOIN
</Link>
</div>
</div>
</div> </div>