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

114 blogs home page design #120

Merged
merged 8 commits into from
Jan 14, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update the blogs timeline design
UmairJibran committed Jan 14, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit b924028ca2f0b8c3cb4c59f42699821275684827
10 changes: 5 additions & 5 deletions src/components/MoreStories.tsx
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export function MoreStories({ stories }: Props) {
const lastSectionHeight = lastMonthStoriesCount * 96 + 24; // height per story + padding

return (
<section className="py-12 max-w-5xl mx-auto">
<section className="py-12 max-w-4xl mx-auto">
<div className="relative">
{/* Main continuous timeline */}
<div
@@ -59,23 +59,23 @@ export function MoreStories({ stories }: Props) {
}}
/>

<div className="space-y-20">
<div className="space-y-24">
{sortedKeys.map((key, groupIndex) => (
<div key={key} className="relative">
{/* Month marker */}
<div className="relative flex items-center mb-12">
<div className="relative flex items-center mb-16">
<div className="w-28 flex-shrink-0" />
{/* Month bullet */}
<div className="absolute left-32 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-500 z-10" />
{/* Month label */}
<div className="pl-12">
<h3 className="text-4xl font-mono">
<h3 className="text-3xl font-mono font-bold text-gray-800">
{groupedStories[key].month} {groupedStories[key].year}
</h3>
</div>
</div>

<div className="space-y-16">
<div className="space-y-20">
{groupedStories[key].stories.map((story) => (
<div key={story.slug} className="relative">
<StoryPreview
37 changes: 18 additions & 19 deletions src/components/StoryPreview.tsx
Original file line number Diff line number Diff line change
@@ -30,8 +30,8 @@ export function StoryPreview({
return (
<div className="group relative flex items-start">
{/* Left side - metadata */}
<div className="w-28 flex-shrink-0 text-gray-900 text-right -rotate-90 pr-8">
<span className="text-6xl font-mono font-bold tabular-nums">{day}</span>
<div className="w-28 flex-shrink-0 text-gray-900 text-right pr-8">
<span className="text-6xl font-mono font-bold tabular-nums leading-none">{day}</span>
</div>

{/* Timeline dot */}
@@ -42,27 +42,26 @@ export function StoryPreview({
{/* Right side - content */}
<Link
href={[root, slug].join("/")}
className="flex-grow hover:no-underline group-hover:opacity-75 transition-opacity pl-12"
className="flex-grow hover:no-underline group-hover:opacity-90 transition-opacity pl-12"
>
<div className="bg-white rounded-lg border border-gray-200 p-6 hover:border-blue-500 transition-colors">
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-gray-500 mb-3">
<span className="capitalize">{type.replace("-", " ")}</span>
{tags.length > 0 && (
<>
<span>•</span>
{tags.map((tag, index) => (
<span key={tag} className="text-gray-400">
{tag}
{index < tags.length - 1 && ", "}
</span>
))}
</>
)}
<div className="rounded-lg p-6 hover:bg-gray-50/50 transition-colors">
<div className="flex flex-wrap items-center gap-2 mb-3">
<span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
{type.replace("-", " ")}
</span>
{tags.map((tag) => (
<span
key={tag}
className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
>
{tag}
</span>
))}
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">
<h3 className="text-xl font-semibold mb-2 text-gray-900 group-hover:text-blue-600 transition-colors">
{title}
</h3>
<p className="text-gray-600">
<p className="text-gray-600 leading-relaxed">
{excerpt}
</p>
</div>