50 lines
1.7 KiB
Text
50 lines
1.7 KiB
Text
---
|
|
const {timeline} = Astro.props;
|
|
import Subtitle from "../core/Subtitle.astro";
|
|
---
|
|
|
|
<div class="flex flex-col items-center md:mt-[10%] mt-[25%] md:mb-[15%] mb-[35%]">
|
|
<Subtitle title="Timeline" />
|
|
|
|
<div
|
|
class="relative flex items-center justify-between w-full md:max-w-[75vw] max-w-[85vw] py-[10%] md:mt-[7%] mt-[10%]"
|
|
>
|
|
<div
|
|
class="absolute top-1/2 w-full h-[0.1vw] bg-gray-200 transform -translate-y-1/2"
|
|
/>
|
|
|
|
{timeline.map((event, index) => (
|
|
<div
|
|
class="relative flex flex-col items-center"
|
|
style={`flex: 1`}
|
|
>
|
|
<div
|
|
class={`absolute ${
|
|
index % 2 === 0 ? "bottom-0 mb-[70%]" : "top-0 mt-[70%]"
|
|
} flex flex-col items-center`}
|
|
>
|
|
<div class="text-center">
|
|
<div class="font-bold text-ieee-yellow md:text-[1.4vw] text-[2vw]">
|
|
{event.week}
|
|
</div>
|
|
<div class="md:text-[1.1vw] text-[1.5vw] text-gray-300 md:max-w-[10vw] max-w-[15vw]">
|
|
{event.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class={`absolute ${
|
|
index % 2 === 1
|
|
? "h-[5vw] top-1/2"
|
|
: "h-[5vw] bottom-1/2"
|
|
} w-[0.1vw] bg-white`}
|
|
/>
|
|
|
|
<div class="absolute top-1/2 transform -translate-y-1/2">
|
|
<div class="w-[1.2vw] h-[1.2vw] bg-white border-2 rounded-full" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|