Skip to content

Commit fbad428

Browse files
kevinjosethomaskevinjosethomas
committed
style: redesign blog page
1 parent 3165afa commit fbad428

2 files changed

Lines changed: 74 additions & 56 deletions

File tree

‎src/pages/blog/[id].tsx‎

Lines changed: 61 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const BlogPost = ({ post }: BlogPostProps) => {
1919
}
2020

2121
return (
22-
<div className="flex h-full flex-col items-center justify-center gap-5 py-[10%] md:py-[2%]">
22+
<>
2323
<Head>
2424
<title>{post.title} – Maia Chess</title>
2525
<meta name="description" content={post.excerpt} />
@@ -59,61 +59,70 @@ const BlogPost = ({ post }: BlogPostProps) => {
5959
<meta name="robots" content="index, follow" />
6060
<link rel="canonical" href={`https://maiachess.com/blog/${post.id}`} />
6161
</Head>
62-
<div className="flex max-w-[90%] flex-col items-center justify-center overflow-x-hidden md:max-w-[80ch]">
63-
<div className="mb-8 flex w-full flex-col gap-2">
64-
<Link href="/blog">
65-
<p className="hover:opacity-75">← Go back</p>
66-
</Link>
67-
<h1 className="text-2xl font-bold md:text-4xl">{post.title}</h1>
68-
<div className="flex flex-wrap items-center gap-2 md:gap-4">
69-
<p>
70-
{new Date(post.date).toLocaleDateString('en-US', {
71-
month: 'short',
72-
day: 'numeric',
73-
year: 'numeric',
74-
})}
75-
</p>
76-
{post.github && (
77-
<a
78-
href={post.github}
79-
target="_blank"
80-
rel="noreferrer"
81-
className="underline"
82-
>
83-
GitHub
84-
</a>
85-
)}
86-
{post.arxiv && (
87-
<a
88-
href={post.arxiv}
89-
target="_blank"
90-
rel="noreferrer"
91-
className="underline"
92-
>
93-
arXiv
94-
</a>
95-
)}
96-
{post.journal && <p>{post.journal}</p>}
62+
<div
63+
className="pointer-events-none absolute inset-0"
64+
style={{
65+
background:
66+
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
67+
}}
68+
/>
69+
<div className="relative flex h-full flex-col items-center justify-center gap-5 py-[10%] md:py-[2%]">
70+
<div className="flex max-w-[90%] flex-col items-center justify-center overflow-x-hidden md:max-w-[80ch]">
71+
<div className="mb-8 flex w-full flex-col gap-2">
72+
<Link href="/blog">
73+
<p className="hover:opacity-75">← Go back</p>
74+
</Link>
75+
<h1 className="text-2xl font-bold md:text-4xl">{post.title}</h1>
76+
<div className="flex flex-wrap items-center gap-2 md:gap-4">
77+
<p>
78+
{new Date(post.date).toLocaleDateString('en-US', {
79+
month: 'short',
80+
day: 'numeric',
81+
year: 'numeric',
82+
})}
83+
</p>
84+
{post.github && (
85+
<a
86+
href={post.github}
87+
target="_blank"
88+
rel="noreferrer"
89+
className="underline"
90+
>
91+
GitHub
92+
</a>
93+
)}
94+
{post.arxiv && (
95+
<a
96+
href={post.arxiv}
97+
target="_blank"
98+
rel="noreferrer"
99+
className="underline"
100+
>
101+
arXiv
102+
</a>
103+
)}
104+
{post.journal && <p>{post.journal}</p>}
105+
</div>
106+
<div className="no-scrollbar mt-1 flex items-center gap-2 overflow-x-scroll">
107+
{post.tags.map((tag, index) => (
108+
<div
109+
key={index}
110+
className="flex items-center justify-center gap-2 rounded-sm bg-background-1 px-3 py-1"
111+
>
112+
<div className="h-2 w-2 rounded-full bg-human-3" />
113+
<p className="whitespace-nowrap text-sm text-secondary">
114+
{tag}
115+
</p>
116+
</div>
117+
))}
118+
</div>
97119
</div>
98-
<div className="no-scrollbar mt-1 flex items-center gap-2 overflow-x-scroll">
99-
{post.tags.map((tag, index) => (
100-
<div
101-
key={index}
102-
className="flex items-center justify-center gap-2 rounded-sm bg-background-1 px-3 py-1"
103-
>
104-
<div className="h-2 w-2 rounded-full bg-human-3" />
105-
<p className="whitespace-nowrap text-sm text-secondary">
106-
{tag}
107-
</p>
108-
</div>
109-
))}
120+
<div className="prose prose-sm prose-invert w-full max-w-none leading-relaxed md:prose-lg lg:prose-xl prose-headings:mb-2 prose-a:text-human-2 hover:prose-a:underline prose-ul:list-inside prose-ul:list-disc prose-li:text-sm prose-img:mb-2 prose-hr:my-8 prose-hr:opacity-20 lg:max-w-[80ch]">
121+
<Markdown>{post.content}</Markdown>
110122
</div>
111123
</div>
112-
<div className="prose prose-sm prose-invert w-full max-w-none leading-relaxed md:prose-lg lg:prose-xl prose-headings:mb-2 prose-a:text-human-2 hover:prose-a:underline prose-ul:list-inside prose-ul:list-disc prose-li:text-sm prose-img:mb-2 prose-hr:my-8 prose-hr:opacity-20 lg:max-w-[80ch]">
113-
<Markdown>{post.content}</Markdown>
114-
</div>
115124
</div>
116-
</div>
125+
</>
117126
)
118127
}
119128

‎src/pages/blog/index.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { getSortedPostsData } from 'src/lib/blog/posts'
55

66
export default function Blog({ posts }: { posts: Post[] }) {
77
return (
8-
<div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
8+
<>
99
<Head>
1010
<title>Blog – Maia Chess</title>
1111
<meta
@@ -44,8 +44,16 @@ export default function Blog({ posts }: { posts: Post[] }) {
4444
<meta name="robots" content="index, follow" />
4545
<link rel="canonical" href="https://maiachess.com/blog" />
4646
</Head>
47-
<h1 className="text-4xl font-bold">Blog</h1>
48-
<div className="flex w-full flex-col gap-6 overflow-x-hidden">
47+
<div
48+
className="pointer-events-none absolute inset-0"
49+
style={{
50+
background:
51+
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
52+
}}
53+
/>
54+
<div className="relative mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
55+
<h1 className="text-4xl font-bold">Blog</h1>
56+
<div className="flex w-full flex-col gap-6 overflow-x-hidden">
4957
{posts.map((post, index) => (
5058
<Link href={`/blog/${post.id}`} key={index}>
5159
<div className="flex w-full cursor-pointer flex-col gap-2 overflow-hidden hover:opacity-80 md:w-auto md:max-w-2xl">
@@ -76,8 +84,9 @@ export default function Blog({ posts }: { posts: Post[] }) {
7684
</div>
7785
</Link>
7886
))}
87+
</div>
7988
</div>
80-
</div>
89+
</>
8190
)
8291
}
8392

0 commit comments

Comments
 (0)