on master help sign in
blog: remove pb from paragraph intro on md
0aeb8c0Matilde Park
pages/blog.js+47−41
@@ -31,7 +31,7 @@ export default function Blog({ posts, search }) {
31 <Section>
31 <Section>
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.
37 </p>
37 </p>
@@ -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);
47 return (
47 return (
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">
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>
51
64
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">
71+ {post.extra.author}
72+ </div>
73+ ) : null}
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
59− />
78+ >
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}
81+ </a>
82+ </Link>
83+ ) : null}
84+ </div>
85+ </div>
86+ <div className="text-wall-500 type-sub mt-1">
87+ {formatDate(date)}
62− </div>
88+ </div>
63
89
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>
70− ) : null}
92+ )}
71− {post.extra.ship ? (
93+ </div>
72− <Link
94+ </div>
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>
95+ </Link>
80− ) : null}
81 </div>
96 </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>
91 );
97 );
92 })}
98 })}
93 </Section>
99 </Section>