@@ -31,7 +31,7 @@ export default function Blog({ posts, search }) {
32 <h1 className="pb-16">Blog</h1>
32 <h1 className="pb-16">Blog</h1>
33 <div className="md:columns-2 gap-x-8">
33 <div className="md:columns-2 gap-x-8">
34− <p className="pb-6">
34+ <p className="pb-6 md:pb-0">
35 Stories from the broader Urbit community, the Urbit Foundation,
35 Stories from the broader Urbit community, the Urbit Foundation,
36 and the many people contributing to Urbit.
36 and the many people contributing to Urbit.
@@ -45,49 +45,55 @@ export default function Blog({ posts, search }) {
45 {posts.map((post) => {
45 {posts.map((post) => {
46 const date = generateDisplayDate(post.date);
46 const date = generateDisplayDate(post.date);
48− <div key={post.slug} className="mb-20 cursor-pointer">
48+ <div key={post.slug} className="mb-20 cursor-pointer">
49− <Link href={`/blog/${post.slug}`}>
49+ <Link href={`/blog/${post.slug}`}>
50− <div class="flex items-center md:flex-row flex-col">
50+ <div class="flex items-center md:flex-row flex-col">
51+ <div class="flex w-full rounded-lg aspect-h-4 w-full">
53+ // Not all blog posts have images
56+ src={post.extra.image}
57+ className="rounded-lg aspect-w-5 aspect-h-4 w-full"
60+ <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100" />
52− <div class="flex w-full rounded-lg aspect-h-4 w-full">
65+ <div class="w-full md:pl-6 ">
53− {
66+ <h3 className="mt-6 md:mt-0">{post.title}</h3>
54− // Not all blog posts have images
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">
55− post.extra.image ? (
74+ {post.extra.ship ? (
56− <BackgroundImage
75+ <Link
57− src={post.extra.image}
76+ href={`https://urbit.org/ids/${post.extra.ship}`}
58− className="rounded-lg aspect-w-5 aspect-h-4 w-full"
77+ passHref
60− ) : <div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100"/>
79+ <a className="type-sub-bold text-wall-500 font-mono">
61− }
80+ {post.extra.ship}
86+ <div className="text-wall-500 type-sub mt-1">
64− <div class="w-full md:pl-6 ">
90+ {post?.description && (
65− <h3 className="mt-6 md:mt-0">{post.title}</h3>
91+ <p className="mt-6">{post.description}</p>
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>
71− {post.extra.ship ? (
93+ </div>
73− href={`https://urbit.org/ids/${post.extra.ship}`}
76− <a className="type-sub-bold text-wall-500 font-mono">
83− <div className="text-wall-500 type-sub mt-1">{formatDate(date)}</div>
85− {post?.description && <p className="mt-6">{post.description}</p>}
93 </Section>
99 </Section>