@@ -28,10 +28,10 @@ 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>
34− <p className="pb-6">
31+ <Section>
32+ <h1 className="pb-16">Blog</h1>
33+ <div className="md:columns-2 gap-x-8">
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>
@@ -41,39 +41,55 @@ 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 (
4848 <div key={post.slug} className="mb-20 cursor-pointer">
4949 <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}
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+ }
7463 </div>
75− <div className="text-wall-500 type-sub">
76− {formatDate(date)}
64+
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>
89+
90+ {post?.description && (
91+ <p className="mt-6">{post.description}</p>
92+ )}
7793 </div>
7894 </div>
7995 </Link>