@@ -31,7 +31,7 @@ export default function Blog({ posts, search }) {
3131 <Section>
3232 <h1 className="pb-16">Blog</h1>
3333 <div className="md:columns-2 gap-x-8">
34− <p className="pb-6">
34+ <p className="pb-6 md:pb-0">
3535 Stories from the broader Urbit community, the Urbit Foundation,
3636 and the many people contributing to Urbit.
3737 </p>
@@ -45,49 +45,55 @@ export default function Blog({ posts, search }) {
4545 {posts.map((post) => {
4646 const date = generateDisplayDate(post.date);
4747 return (
48− <div key={post.slug} className="mb-20 cursor-pointer">
49− <Link href={`/blog/${post.slug}`}>
50− <div class="flex items-center md:flex-row flex-col">
48+ <div key={post.slug} className="mb-20 cursor-pointer">
49+ <Link href={`/blog/${post.slug}`}>
50+ <div class="flex items-center md:flex-row flex-col">
51+ <div class="flex w-full rounded-lg aspect-h-4 w-full">
52+ {
53+ // Not all blog posts have images
54+ post.extra.image ? (
55+ <BackgroundImage
56+ src={post.extra.image}
57+ className="rounded-lg aspect-w-5 aspect-h-4 w-full"
58+ />
59+ ) : (
60+ <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100" />
61+ )
62+ }
63+ </div>
5164
52− <div class="flex w-full rounded-lg aspect-h-4 w-full">
53− {
54− // Not all blog posts have images
55− post.extra.image ? (
56− <BackgroundImage
57− src={post.extra.image}
58− className="rounded-lg aspect-w-5 aspect-h-4 w-full"
59− />
60− ) : <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100"/>
61− }
62− </div>
65+ <div class="w-full md:pl-6 ">
66+ <h3 className="mt-6 md:mt-0">{post.title}</h3>
67+ <div className="flex items-center justify-between mt-2">
68+ <div className="flex items-baseline">
69+ {post.extra.author ? (
70+ <div className="type-sub-bold mr-2">
71+ {post.extra.author}
72+ </div>
73+ ) : null}
74+ {post.extra.ship ? (
75+ <Link
76+ href={`https://urbit.org/ids/${post.extra.ship}`}
77+ passHref
78+ >
79+ <a className="type-sub-bold text-wall-500 font-mono">
80+ {post.extra.ship}
81+ </a>
82+ </Link>
83+ ) : null}
84+ </div>
85+ </div>
86+ <div className="text-wall-500 type-sub mt-1">
87+ {formatDate(date)}
88+ </div>
6389
64− <div class="w-full md:pl-6 ">
65− <h3 className="mt-6 md:mt-0">{post.title}</h3>
66− <div className="flex items-center justify-between mt-2">
67− <div className="flex items-baseline">
68− {post.extra.author ? (
69− <div className="type-sub-bold mr-2">{post.extra.author}</div>
70− ) : null}
71− {post.extra.ship ? (
72− <Link
73− href={`https://urbit.org/ids/${post.extra.ship}`}
74− passHref
75− >
76− <a className="type-sub-bold text-wall-500 font-mono">
77− {post.extra.ship}
78− </a>
79− </Link>
80− ) : null}
90+ {post?.description && (
91+ <p className="mt-6">{post.description}</p>
92+ )}
93+ </div>
94+ </div>
95+ </Link>
8196 </div>
82− </div>
83− <div className="text-wall-500 type-sub mt-1">{formatDate(date)}</div>
84−
85− {post?.description && <p className="mt-6">{post.description}</p>}
86−
87− </div>
88− </div>
89− </Link>
90− </div>
9197 );
9298 })}
9399 </Section>