caperren/caperren-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Timeline svg draws making window too wide, adjusted navbar to perform responsive transition at a larger screen size, removed more obsolete attrs
Some checks failed
Build and Test - Staging / test (pull_request) Failing after 3m29s
Details
Build and Test - Staging / build_and_push (pull_request) Has been skipped
Details
Build and Test - Staging / deploy_staging (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Corwin Perren
2025-11-11 22:53:05 -08:00
parent 68b6d7f785
commit ba948e4181
6 changed files with 74 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Timeline/Timeline.astro
View File

@@ -5,28 +5,31 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
---
<custom-timeline>
<div class="relative z-10 grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
data-timeline>
{timeline.map((entry, index) => (
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
data-timeline-node-index={index}
>
<h3 class="text-lg font-bold">
{entry.event}
</h3>
<h4 class="font-semibold leading-none">
{entry.eventDetail}
</h4>
<time class="mb-2 mt-1 text-sm italic leading-none">
{entry.date}
</time>
{entry.description && (
<p class="text-sm font-normal">
{entry.description}
</p>
)}
</div>
))}
<div class="flex flex-col w-full">
<div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
data-timeline>
{timeline.map((entry, index) => (
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
data-timeline-node-index={index}
>
<h3 class="text-lg font-bold">
{entry.event}
</h3>
<h4 class="font-semibold leading-none">
{entry.eventDetail}
</h4>
<time class="mb-2 mt-1 text-sm italic leading-none">
{entry.date}
</time>
{entry.description && (
<p class="text-sm font-normal">
{entry.description}
</p>
)}
</div>
))}
</div>
<div class="z-0 h-10 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
</div>
</custom-timeline>