Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wip: our-story #434

Merged
merged 9 commits into from
Nov 4, 2024
Prev Previous commit
Next Next commit
feat: improve responsive of about us page
  • Loading branch information
kaizendae committed Nov 1, 2024
commit f6eece59bc0f9c9a7814dd746f2da9ca9a51e6c7
6 changes: 3 additions & 3 deletions src/components/about/our-story.astro
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ const timelineItems: Array<TimelineItemType & { description: string }> = [
];
---

<section id="history">
<div class="container mx-auto">
<section id="history" class="bg-neutral-light-20">
<div class="container mx-auto !px-0">
<h2
class="mb-6 text-center text-heading-lg font-bold text-neutral-dark-10 md:text-left"
class="mb-6 text-center text-heading-lg font-bold text-neutral-dark-10 sm:text-left"
>
About Us
</h2>
Expand Down
20 changes: 10 additions & 10 deletions src/components/about/timeline-item.astro
Original file line number Diff line number Diff line change
Expand Up @@ -13,48 +13,48 @@ const { title, date, image } = Astro.props as Props;
---

<div
class="group relative flex flex-col bg-white py-12 md:flex-row-reverse even:md:flex-row"
class="group relative flex flex-col px-4 py-8 md:flex-row-reverse md:p-0 md:py-20 even:md:flex-row"
>
{/* Horizontal line spanning 70% of width, positioned 15% from left */}
<div
class="absolute bottom-0 left-[calc(15%+5px)] h-[1px] w-[calc(70%-10px)] bg-neutral-dark-10 group-last:hidden"
class="absolute bottom-0 left-[calc(10%+5px)] hidden h-[1px] w-[calc(80%-10px)] bg-neutral-dark-30 group-last:hidden md:block"
>
</div>

{
/* Vertical line positioned either 15% from left or right depending on odd/even */
}
<div
class="absolute bottom-0 top-[5px] z-10 h-[calc(100%-10px)] w-[1px] rounded-full bg-neutral-dark-10 group-odd:right-[15%] group-even:left-[15%]"
class="absolute bottom-0 top-[5px] z-10 hidden h-[calc(100%-10px)] w-[1px] rounded-full bg-neutral-dark-30 group-last:h-full group-odd:right-[10%] group-even:left-[10%] md:block"
>
</div>

{/* Right corner piece - rotates -90deg on even items */}
<div
class="absolute bottom-0 right-[calc(15%)] z-10 h-[10px] w-[10px] rounded-br-md border-b border-r border-neutral-dark-10 group-last:hidden group-even:-bottom-[9px] group-even:-rotate-90"
class="absolute bottom-0 right-[calc(10%)] z-10 hidden h-[10px] w-[10px] rounded-br-md border-b border-r border-neutral-dark-30 group-last:hidden group-even:-bottom-[9px] group-even:-rotate-90 md:block"
>
</div>

{/* Left corner piece - rotates 90deg on odd items */}
<div
class="absolute bottom-0 left-[calc(15%)] z-10 h-[10px] w-[10px] rounded-bl-md border-b border-l border-neutral-dark-10 group-last:hidden group-odd:-bottom-[9px] group-odd:rotate-90"
class="absolute bottom-0 left-[calc(10%)] z-10 hidden h-[10px] w-[10px] rounded-bl-md border-b border-l border-neutral-dark-30 group-last:hidden group-odd:-bottom-[9px] group-odd:rotate-90 md:block"
>
</div>
<div class="z-20 flex w-1/2 items-center justify-center">
<div
class="z-20 flex w-full items-center justify-center group-odd:bg-neutral-light-50 md:w-1/2 md:group-odd:bg-transparent"
>
<Image
class="mx-auto overflow-hidden rounded-t-[4px]"
src={image}
loading="lazy"
alt="DevC Casa illustration"
/>
</div>

<div class="w-1/2 p-8">
<div class="w-full py-8 md:w-1/2 md:px-8">
<div class="flex items-start justify-between">
<h2 class="text-heading-sm text-neutral-dark-30">{title}</h2>
<p class="text-label-xs whitespace-nowrap">{date}</p>
</div>
<div>
<div class="pt-8">
<slot />
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/pages/about.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import OurStory from "@/components/about/our-story.astro";
---

<Layout title="About">
<Header />
<section class="relative overflow-hidden bg-neutral-light-20">
<Header />
</section>
<OurStory />
<Team />
</Layout>