Clean up styling

app/[slug]/page.tsx

@@ -53,26 +53,27 @@ export default async function BlogPost({ params }: Props) {
   const content = await fetchPostContent(slug);
 
   return (
-    <main className="">
+    <main>
       <Script src="https://platform.twitter.com/widgets.js" />
       <BlogPostHeader />
       <time dateTime={post.date.toISOString()} className="text-sm lg:text-base">
         {format(post.date, "MMMM dd, yyyy")}
       </time>
       <h1 className="mt-1 mb-4 text-4xl font-bold">{post.title}</h1>
-      <article
+      <div
         className={`font-serif prose md:prose-lg
-        lg:prose-xl prose-a:font-semibold prose-a:underline-offset-4
-        prose-a:text-amber-600 prose-a:hover:text-amber-700
-        prose-pre:border
-        prose-pre:bg-[#ffffff]
-        dark:prose-pre:bg-[#011627]
-        prose-headings:prose-a:no-underline
-        prose-headings:prose-a:text-gray-950
-        prose-headings:prose-a:hover:text-gray-950`}
-        dangerouslySetInnerHTML={{ __html: content }}
-      ></article>
-      <hr className="mt-8 mb-6" />
+    lg:prose-xl prose-a:font-semibold prose-a:underline-offset-4
+    prose-a:text-amber-600 prose-a:hover:text-amber-700
+    prose-pre:border
+    prose-pre:bg-[#ffffff]
+    dark:prose-pre:bg-[#011627]
+    prose-headings:prose-a:no-underline
+    prose-headings:prose-a:text-gray-950
+    prose-headings:prose-a:hover:text-gray-950`}
+      >
+        <article dangerouslySetInnerHTML={{ __html: content }} />
+        <hr className="border-gray-200 md:-mr-4 lg:-mr-14 mt-8 mb-6" />
+      </div>
       <Bio />
       <Comments />
     </main>

app/layout.tsx

@@ -45,7 +45,7 @@ export const metadata: Metadata = {
 
 function Footer() {
   return (
-    <footer className="text-center text-gray-500 text-sm mt-12 space-y-2">
+    <footer className="flex flex-col items-center text-center text-gray-500 text-sm mt-12 gap-y-2">
       <RSSLink size="small" />
       <p>
         &copy; {new Date().getFullYear()}{" "}

components/rss-link.tsx

@@ -10,7 +10,7 @@ export default function RSSLink(props: RSSLinkProps) {
     return (
       <Link
         href="/rss.xml"
-        className="border px-2 py-1 rounded-sm hover:text-gray-800 hover:shadow-xs hover:border-gray-300"
+        className="border border-gray-300 px-2 py-1 rounded-sm hover:text-gray-800 hover:shadow-xs hover:border-gray-300"
       >
         <RssIcon className="mr-1 inline" />
         RSS
@@ -20,7 +20,7 @@ export default function RSSLink(props: RSSLinkProps) {
     return (
       <Link
         href="/rss.xml"
-        className="transition-all flex h-10 group border px-3 py-2 rounded-sm text-gray-400 hover:text-gray-800 hover:shadow-xs hover:border-gray-300 mb-4"
+        className="transition-all flex h-10 group border border-gray-200 px-3 py-2 rounded-sm text-gray-400 hover:text-gray-800 hover:shadow-xs hover:border-gray-300 mb-4"
       >
         <RssIcon
           size={20}

posts/great-contributions-to-a-codebase/index.md

@@ -74,13 +74,13 @@ To keep code review as focused as possible, break up your large pull request int
 
 Instead of one PR like:
 
-- **Add XYZ feature**<br /><span class="font-mono text-sm"><span class="text-green-700">+1,029</span>/<span class="text-red-700">-1,390</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-xyz-feature</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">main</span>
+- **Add XYZ feature**<br /><span class="font-mono text-sm"><span class="text-green-700">+1,029</span>/<span class="text-red-700">-1,390</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-xyz-feature</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">main</span>
 
 Prefer breaking up the PR into a series of pull requests like:
 
-1. **[1/3] Add GraphQL module for XYZ**<br /><span class="font-mono text-sm"><span class="text-green-700">+400</span>/<span class="text-red-700">-90</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-xyz-graphql</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">main</span>
-2. **[2/3] Create XYZ view controller**<br /><span class="font-mono text-sm"><span class="text-green-700">+215</span>/<span class="text-red-700">-33</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/create-xyz-viewcontroller</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-xyz-graphql</span>
-3. **[3/3] Use custom XYZ control throughout the app**<br /><span class="font-mono text-sm"><span class="text-green-700">+325</span>/<span class="text-red-700">-333</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/custom-xyz-control</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/create-xyz-viewcontroller</span>
+1. **[1/3] Add GraphQL module for XYZ**<br /><span class="font-mono text-sm"><span class="text-green-700">+400</span>/<span class="text-red-700">-90</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-xyz-graphql</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">main</span>
+2. **[2/3] Create XYZ view controller**<br /><span class="font-mono text-sm"><span class="text-green-700">+215</span>/<span class="text-red-700">-33</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/create-xyz-viewcontroller</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-xyz-graphql</span>
+3. **[3/3] Use custom XYZ control throughout the app**<br /><span class="font-mono text-sm"><span class="text-green-700">+325</span>/<span class="text-red-700">-333</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/custom-xyz-control</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/create-xyz-viewcontroller</span>
 
 This will create three discrete pull requests for your teammates to focus on, allowing for a better review of the code you wrote and for better code to be landed in piecemeal.
 

posts/stackless-stacked-prs/index.md

@@ -33,17 +33,17 @@ Let's look at a contrived example. Say I'm working on a feature that requires:
 
 In a stacked PR model, I'd have three PRs, each dependent on the one before it. So something like:
 
-1. **[1/3] Add a new `isFeatureXYZEnabled` property**<br /><span class="font-mono text-sm"><span class="text-green-700">+400</span>/<span class="text-red-700">-90</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-xyz-feature</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">main</span> • 1 commit
-2. **[2/3] Add `ModernXYZController` for the new feature**<br /><span class="font-mono text-sm"><span class="text-green-700">+215</span>/<span class="text-red-700">-33</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-modern-xyzcontroller</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-xyz-feature</span> • 1 commit
-3. **[3/3] Use `ModernXYZController` if enabled**<br /><span class="font-mono text-sm"><span class="text-green-700">+10</span>/<span class="text-red-700">-30</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/enable-xyz</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-modern-xyzcontroller</span> • 1 commit
+1. **[1/3] Add a new `isFeatureXYZEnabled` property**<br /><span class="font-mono text-sm"><span class="text-green-700">+400</span>/<span class="text-red-700">-90</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-xyz-feature</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">main</span> • 1 commit
+2. **[2/3] Add `ModernXYZController` for the new feature**<br /><span class="font-mono text-sm"><span class="text-green-700">+215</span>/<span class="text-red-700">-33</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-modern-xyzcontroller</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-xyz-feature</span> • 1 commit
+3. **[3/3] Use `ModernXYZController` if enabled**<br /><span class="font-mono text-sm"><span class="text-green-700">+10</span>/<span class="text-red-700">-30</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/enable-xyz</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-modern-xyzcontroller</span> • 1 commit
 
 ![git branches showing the daisy-chained pull requests visually](/images/daisy-chained-prs.png)
 
 However, with a "stackless" stacked PR model with `git-pile`, I can break this down into two PRs that are idempotent where PR #1 and #2 can be merged in any order ([or even simulatenously with a merge queue](https://github.blog/news-insights/product-news/github-merge-queue-is-generally-available/)), and where the third PR can either be stacked on the first two, or wait until I've gotten feedback on the first two and have them merged into `main`. So something like:
 
-1. **Add a new `isFeatureXYZEnabled` property**<br /><span class="font-mono text-sm"><span class="text-green-700">+400</span>/<span class="text-red-700">-90</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-xyz-feature</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">main</span> • 1 commit
-2. **Add `ModernXYZController` for the new feature**<br /><span class="font-mono text-sm"><span class="text-green-700">+215</span>/<span class="text-red-700">-33</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/add-modern-xyzcontroller</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">main</span> • 1 commit
-3. **[Draft] Use `ModernXYZController` if enabled**<br /><span class="font-mono text-sm"><span class="text-green-700">+625</span>/<span class="text-red-700">-123</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">ep/enable-xyz</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border px-1 rounded-md">main</span> • 3 commits
+1. **Add a new `isFeatureXYZEnabled` property**<br /><span class="font-mono text-sm"><span class="text-green-700">+400</span>/<span class="text-red-700">-90</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-xyz-feature</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">main</span> • 1 commit
+2. **Add `ModernXYZController` for the new feature**<br /><span class="font-mono text-sm"><span class="text-green-700">+215</span>/<span class="text-red-700">-33</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/add-modern-xyzcontroller</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">main</span> • 1 commit
+3. **[Draft] Use `ModernXYZController` if enabled**<br /><span class="font-mono text-sm"><span class="text-green-700">+625</span>/<span class="text-red-700">-123</span></span> merging <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">ep/enable-xyz</span> into <span class="font-mono text-sm bg-sky-50 text-sky-800 border border-sky-800/24 px-1 rounded-md">main</span> • 3 commits
 
 ![git branches showing the stackless stacked pull requests visually](/images/stackless-stacked-prs.png)