gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update navigation layout and assets

Browse Source
This commit is contained in:
Gbanyan
2025-11-21 14:51:24 +08:00
parent 7cdfb90b1b
commit 1f3323834e
9 changed files with 289 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/timeline-wrapper.tsx
View File

@@ -9,20 +9,20 @@ interface TimelineWrapperProps {
export function TimelineWrapper({ children, className }: TimelineWrapperProps) {
const items = Children.toArray(children);
return (
<div className={clsx('relative pl-8', className)}>
<div className={clsx('relative pl-6 md:pl-8', className)}>
<span
className="pointer-events-none absolute left-3 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300"
className="pointer-events-none absolute left-2 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300 md:left-3"
aria-hidden="true"
/>
<span
className="pointer-events-none absolute left-3 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px]"
className="pointer-events-none absolute left-2 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px] md:left-3"
aria-hidden="true"
/>
<div className="space-y-4">
{items.map((child, index) => (
<div key={index} className="relative pl-6 sm:pl-8">
<span className="pointer-events-none absolute left-0 top-1/2 h-px w-8 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80" aria-hidden="true" />
<div key={index} className="relative pl-5 sm:pl-8">
<span className="pointer-events-none absolute left-0 top-1/2 h-px w-5 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80 sm:w-8" aria-hidden="true" />
{child}
</div>
))}