Fixed height issues relating to navbar
This commit is contained in:
chark1es
parent
43fb2f37d8
commit
9c114fb1db
5 changed files with 121 additions and 96 deletions
|
|
@ -15,51 +15,50 @@ const currentFilter = "All";
|
|||
---
|
||||
|
||||
<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
|
||||
data-inview
|
||||
class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
|
||||
>
|
||||
<Image src={about} alt="About background image" />
|
||||
<Image
|
||||
src={neko}
|
||||
alt="About image"
|
||||
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-inview
|
||||
class="relative w-[40vw] md:w-[21vw] mb-[10vh] in-view:animate-fade-down"
|
||||
>
|
||||
<Image src={about} alt="About background image" />
|
||||
<Image
|
||||
src={neko}
|
||||
alt="About image"
|
||||
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]">
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
|
||||
<p>MEET THE BOARD</p>
|
||||
</div>
|
||||
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[1vw]">
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
|
||||
<p>MEET THE BOARD</p>
|
||||
</div>
|
||||
|
||||
<p
|
||||
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
|
||||
interests! Feel free to reach out for any questions about our position
|
||||
or experiences.
|
||||
</p>
|
||||
<p
|
||||
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 interests!
|
||||
Feel free to reach out for any questions about our position or experiences.
|
||||
</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]">
|
||||
{
|
||||
officers.map((officer) => (
|
||||
<div
|
||||
data-officer
|
||||
data-types={JSON.stringify(officer.type)}
|
||||
style="opacity: 0; visibility: hidden"
|
||||
>
|
||||
<Officer
|
||||
name={officer.name}
|
||||
position={officer.position}
|
||||
picture={officer.picture}
|
||||
email={officer.email}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[2vh]">
|
||||
{
|
||||
officers.map((officer) => (
|
||||
<div
|
||||
data-officer
|
||||
data-types={JSON.stringify(officer.type)}
|
||||
style="opacity: 0; visibility: hidden"
|
||||
>
|
||||
<Officer
|
||||
name={officer.name}
|
||||
position={officer.position}
|
||||
picture={officer.picture}
|
||||
email={officer.email}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
---
|
||||
const {title} = Astro.props;
|
||||
const { title } = Astro.props;
|
||||
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">
|
||||
<LiaDotCircle className=" mr-[1vw] text-[2.7vw]"/>
|
||||
<p>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center md:text-[3vw] text-[4.5vw] ml-[10%] md:pt-[5%] pt-[10%] text-white font-semibold"
|
||||
>
|
||||
<LiaDotCircle className=" mr-[1vw] text-[2.7vw]" />
|
||||
<p>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ import eventbg from "../../images/eventbg.webp";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="w-full md:pt-[13vw] pt-[16vw] flex justify-center relative">
|
||||
<Image
|
||||
src={eventbg}
|
||||
alt="Event Page Background"
|
||||
class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover"
|
||||
/>
|
||||
<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]"
|
||||
>
|
||||
<LiaDotCircle className=" mr-[2vw] pt-[0.5%]" />
|
||||
<p>EVENTS</p>
|
||||
</div>
|
||||
<div class="w-full md:pt-[5vw] pt-[10vw] flex justify-center relative">
|
||||
<Image
|
||||
src={eventbg}
|
||||
alt="Event Page Background"
|
||||
class="md:w-[45%] w-[80%] rounded-[2vw] aspect-[2/1] object-cover"
|
||||
/>
|
||||
<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]"
|
||||
>
|
||||
<LiaDotCircle className=" mr-[2vw] pt-[0.5%]" />
|
||||
<p>EVENTS</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,32 @@ import Link from "next/link";
|
|||
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 class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
|
||||
<div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<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
|
||||
class="md:pt-[5vw] pt-[10vw] text-white w-full flex justify-center md:mb-[8vw] mb-[15vw]"
|
||||
>
|
||||
<div class="w-3/4 md:h-[25vw] h-[35vw] flex justify-between flex-col">
|
||||
<div class="flex items-center md:text-[3vw] text-[4.5vw] pl-[5%] pt-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
||||
<p>Contact Us</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,35 @@ import Link from "next/link";
|
|||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="md:pt-[7vw] pt-[15vw] 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 data-inview class=" animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
Join Us
|
||||
</p>
|
||||
</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 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
|
||||
data-inview
|
||||
class="animate-ease-in-out flex items-center text-[6vw] md:text-[3vw] pl-[5%] pt-[5%] in-view:animate-fade-right"
|
||||
>
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
||||
<p>Join Us</p>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue