@@ -28,9 +28,9 @@ export default function Blog({ posts, search }) {
2828 <IntraNav ourSite="https://urbit.org" search={search} />
2929 <SingleColumn>
3030 <Header />
31− <Section narrow>
32− <div className="measure">
33− <h1 className="pb-16">Blog</h1>
31+ <Section>
32+ <h1 className="pb-16">Blog</h1>
33+ <div className="md:columns-2 gap-x-8">
3434 <p className="pb-6">
3535 Stories from the broader Urbit community, the Urbit Foundation,
3636 and the many people contributing to Urbit.
@@ -41,43 +41,53 @@ export default function Blog({ posts, search }) {
4141 </p>
4242 </div>
4343 </Section>
44− <Section narrow>
44+ <Section>
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>
51− {
52− // Not all blog posts have images
53− post.extra.image ? (
54− <BackgroundImage
55− src={post.extra.image}
56− className="rounded-lg aspect-w-5 aspect-h-4"
57− />
58− ) : null
59− }
60− <h3 className="mt-4">{post.title}</h3>
61− <div className="flex items-baseline mt-2">
62− {post.extra.author ? (
63− <div className="type-sub-bold mr-2">
64− {post.extra.author}
65− </div>
66− ) : null}
67− {post.extra.ship ? (
68− <Link href={`/ids/${post.extra.ship}`} passHref>
69− <a className="type-sub-bold text-wall-500 font-mono">
70− {post.extra.ship}
71− </a>
72− </Link>
73− ) : null}
74− </div>
75− <div className="text-wall-500 type-sub">
76− {formatDate(date)}
77− </div>
78− </div>
79− </Link>
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+
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>
63+
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}
8081 </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>
8191 );
8292 })}
8393 </Section>