Skip to content

Commit 0e7031e

Browse files
AmberLJCAmberLJC
committed
color
1 parent 9443226 commit 0e7031e

26 files changed

+256
-76
lines changed

‎app/blog/BlogPageClient.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,18 @@ interface BlogPageClientProps {
1111
export default function BlogPageClient({ posts }: BlogPageClientProps) {
1212

1313
return (
14-
<div>
15-
<div className='text-center'>
16-
<h1 className="text-4xl font-bold text-white sm:text-5xl mb-8">
14+
<div className="py-16">
15+
<div className='text-center mb-12'>
16+
<h1 className="text-4xl font-bold text-white sm:text-5xl mb-4">
1717
Blog
1818
</h1>
19+
<p className="text-gray-300 text-lg max-w-2xl mx-auto">
20+
Insights, research updates, and technical deep-dives from the Curie team
21+
</p>
1922
</div>
2023

21-
2224
{/* Posts Grid */}
23-
<section className="max-w-7xl mx-auto ">
25+
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2426
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
2527
{posts.map((post) => (
2628
<BlogCard key={post.id} post={post} />

‎app/blog/[slug]/page.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -75,31 +75,31 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
7575
{/* Header */}
7676
<header className="bg-stone-600">
7777
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-16">
78-
<div className="mb-4">
78+
<div className="mb-6">
7979
<Link
8080
href="/"
81-
className="text-orange-400 font-medium"
81+
className="text-orange-400 hover:text-orange-300 font-medium transition-colors duration-200"
8282
>
83-
Home
83+
← Back to Home
8484
</Link>
8585
</div>
8686

87-
<h1 className="text-4xl sm:text-5xl font-bold text-white mb-6">
87+
<h1 className="text-4xl sm:text-5xl font-bold text-white mb-6 leading-tight">
8888
{post.title}
8989
</h1>
9090

91-
<div className="flex items-center gap-4 text-white mb-6">
92-
<time dateTime={post.publishedAt}>
91+
<div className="flex items-center gap-4 text-gray-300 mb-6">
92+
<time dateTime={post.publishedAt} className="text-sm">
9393
{formatDate(post.publishedAt)}
9494
</time>
9595
</div>
9696

9797
{post.tags.length > 0 && (
98-
<div className="flex gap-2 flex-wrap mb-6">
98+
<div className="flex gap-2 flex-wrap mb-8">
9999
{post.tags.map((tag) => (
100100
<span
101101
key={tag}
102-
className="px-3 py-1 bg-gray-200 text-gray-700 hover:bg-gray-300 text-sm rounded-full"
102+
className="px-3 py-1 bg-orange-400/20 text-orange-300 border border-orange-400/30 hover:bg-orange-400/30 text-sm rounded-full transition-colors duration-200"
103103
>
104104
{tag}
105105
</span>
@@ -109,12 +109,15 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
109109
</div>
110110
</header>
111111

112-
113112
{/* Content */}
114-
<div className="prose prose-lg max-w-4xl mx-auto markdown-content">
115-
<div dangerouslySetInnerHTML={{ __html: highlightedContent }} />
113+
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
114+
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
115+
<div
116+
className="prose prose-lg prose-invert max-w-none markdown-content"
117+
dangerouslySetInnerHTML={{ __html: highlightedContent }}
118+
/>
119+
</div>
116120
</div>
117-
118121
</article>
119122
);
120123
}

‎app/globals.css‎

Lines changed: 129 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,143 @@ body {
2525
font-family: Arial, Helvetica, sans-serif;
2626
}
2727

28+
/* Enhanced Markdown Content Styles */
29+
.markdown-content {
30+
color: #e5e7eb;
31+
line-height: 1.7;
32+
}
33+
2834
.markdown-content h1 {
29-
@apply text-3xl font-bold mt-8 mb-4;
35+
@apply text-3xl font-bold mt-8 mb-6 text-white;
36+
border-bottom: 2px solid #f97316;
37+
padding-bottom: 0.5rem;
3038
}
39+
3140
.markdown-content h2 {
32-
@apply text-2xl text-white font-bold mt-6 mb-3;
41+
@apply text-2xl font-bold mt-8 mb-4 text-white;
42+
border-bottom: 1px solid #374151;
43+
padding-bottom: 0.25rem;
3344
}
45+
3446
.markdown-content h3 {
35-
@apply text-xl font-bold mt-4 mb-2;
47+
@apply text-xl font-bold mt-6 mb-3 text-white;
3648
}
49+
50+
.markdown-content h4 {
51+
@apply text-lg font-semibold mt-5 mb-2 text-white;
52+
}
53+
3754
.markdown-content p {
38-
@apply py-2 mb-4 leading-relaxed;
55+
@apply py-3 mb-4 leading-relaxed text-gray-200;
56+
}
57+
58+
.markdown-content ul {
59+
@apply mb-4 pl-6;
60+
}
61+
62+
.markdown-content ol {
63+
@apply mb-4 pl-6;
64+
}
65+
66+
.markdown-content li {
67+
@apply mb-2 text-gray-200;
68+
}
69+
70+
.markdown-content blockquote {
71+
@apply border-l-4 border-orange-400 pl-4 py-2 my-6 bg-orange-400/10 rounded-r-lg;
72+
}
73+
74+
.markdown-content blockquote p {
75+
@apply text-gray-300 italic;
76+
}
77+
78+
.markdown-content a {
79+
@apply text-orange-400 hover:text-orange-300 underline transition-colors duration-200;
80+
}
81+
82+
.markdown-content strong {
83+
@apply font-bold text-white;
84+
}
85+
86+
.markdown-content em {
87+
@apply italic text-gray-300;
88+
}
89+
90+
.markdown-content code {
91+
@apply px-2 py-1 bg-gray-800 text-orange-300 rounded-md text-sm font-mono;
92+
font-family: 'JetBrains Mono', 'Consolas', 'Menlo', Courier, monospace;
93+
}
94+
95+
.markdown-content pre {
96+
@apply bg-gray-900 border border-gray-700 rounded-lg p-4 my-6 overflow-x-auto;
3997
}
4098

99+
.markdown-content pre code {
100+
@apply bg-transparent p-0 text-gray-200;
101+
}
102+
103+
.markdown-content table {
104+
@apply w-full border-collapse border border-gray-600 my-6;
105+
}
106+
107+
.markdown-content th {
108+
@apply bg-gray-800 text-white font-semibold p-3 border border-gray-600;
109+
}
110+
111+
.markdown-content td {
112+
@apply p-3 border border-gray-600 text-gray-200;
113+
}
114+
115+
.markdown-content tr:nth-child(even) {
116+
@apply bg-gray-800/50;
117+
}
118+
119+
.markdown-content img {
120+
@apply max-w-full h-auto rounded-lg my-6 border border-gray-600;
121+
}
122+
123+
.markdown-content hr {
124+
@apply border-gray-600 my-8;
125+
}
126+
127+
/* Inline code styling */
41128
code {
42-
padding: 2px;
43-
border-radius: 12px;
44-
font-family: 'Consolas', 'Menlo', Courier, monospace;
45-
font-size: 85%;
129+
padding: 2px 6px;
130+
border-radius: 6px;
131+
font-family: 'JetBrains Mono', 'Consolas', 'Menlo', Courier, monospace;
132+
font-size: 85%;
133+
background-color: #1f2937;
134+
color: #f97316;
135+
border: 1px solid #374151;
136+
}
137+
138+
/* Additional utility classes for better typography */
139+
.text-balance {
140+
text-wrap: balance;
141+
}
142+
143+
.text-pretty {
144+
text-wrap: pretty;
145+
}
146+
147+
/* Improved focus states for accessibility */
148+
.markdown-content a:focus,
149+
.markdown-content button:focus {
150+
@apply outline-none ring-2 ring-orange-400 ring-offset-2 ring-offset-gray-900;
151+
}
152+
153+
/* Smooth scrolling for better UX */
154+
html {
155+
scroll-behavior: smooth;
156+
}
157+
158+
/* Better selection colors */
159+
::selection {
160+
background-color: #f97316;
161+
color: #ffffff;
162+
}
163+
164+
::-moz-selection {
165+
background-color: #f97316;
166+
color: #ffffff;
46167
}

‎components/BlogCard.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export default function BlogCard({ post }: BlogCardProps) {
1616
};
1717

1818
return (
19-
<article className="bg-white/10 backdrop-blur-lg rounded-2xl p-2 hover:bg-white/20 transition-all duration-300 transform hover:-translate-y-1">
19+
<article className="bg-white/10 backdrop-blur-lg rounded-2xl p-2 hover:bg-white/20 transition-all duration-300 transform hover:-translate-y-1 border border-white/5">
2020
{post.featuredImage && (
21-
<div className="relative h-48 w-full">
21+
<div className="relative h-48 w-full rounded-t-xl overflow-hidden">
2222
<Image
2323
src={post.featuredImage}
2424
alt={post.title}
@@ -28,20 +28,19 @@ export default function BlogCard({ post }: BlogCardProps) {
2828
</div>
2929
)}
3030

31-
<div className="p-5">
32-
<div className="flex items-center gap-2 text-sm text-white mb-2">
33-
<time dateTime={post.publishedAt}>
31+
<div className="p-6">
32+
<div className="flex items-center gap-2 text-sm text-gray-300 mb-3">
33+
<time dateTime={post.publishedAt} className="text-xs">
3434
{formatDate(post.publishedAt)}
3535
</time>
3636
</div>
3737

38-
<h3 className="text-xl font-bold text-white mb-2 hover:text-orange-400 transition-colors">
38+
<h3 className="text-xl font-bold text-white mb-3 hover:text-orange-400 transition-colors duration-200 leading-tight">
3939
<Link href={`/blog/${post.slug}`}>
4040
{post.title}
4141
</Link>
4242
</h3>
4343

44-
4544
<div className="flex items-center justify-between">
4645
<div className="flex items-center gap-2">
4746
</div>
@@ -51,13 +50,13 @@ export default function BlogCard({ post }: BlogCardProps) {
5150
{post.tags.slice(0, 2).map((tag) => (
5251
<span
5352
key={tag}
54-
className="px-2 py-1 bg-white text-gray-700 text-xs rounded-full"
53+
className="px-2 py-1 bg-orange-400/20 text-orange-300 border border-orange-400/30 text-xs rounded-full hover:bg-orange-400/30 transition-colors duration-200"
5554
>
5655
{tag}
5756
</span>
5857
))}
5958
{post.tags.length > 2 && (
60-
<span className="px-2 py-1 bg-white text-gray-600 text-xs rounded-full">
59+
<span className="px-2 py-1 bg-gray-600/50 text-gray-400 text-xs rounded-full">
6160
+{post.tags.length - 2}
6261
</span>
6362
)}

0 commit comments

Comments
 (0)