fix: improve blog typography (#5169)

Use black page titles, level-specific article heading styles, and remove the redundant article ending.

Author: ComputelessComputer

apps/web/content/articles/char-is-now-anarlog.mdx

@@ -69,12 +69,3 @@ It's an anagram of *granola*. The product everyone keeps comparing us to — and
 It also reads as **anar + log** — anar for autonomy, log for the artifact. Your stack, your keys, your files. A log you keep, not one we host.
 
 Both readings are true. Take whichever you like.
-
-### tl;dr
-
-- **Anarlog** = the meeting notetaker you've been using. OSS, free forever, MIT. [anarlog.so](https://anarlog.so) · [github.com/fastrepl/anarlog](https://github.com/fastrepl/anarlog)
-- **Char** = a new product. AI notepad that finishes your todos. Private alpha. [char.com](https://char.com)
-- Same team, same company (`fastrepl`, YC S25), same conviction.
-- Old `char.com/blog/*` links now redirect here. Your bookmarks still work.
-
-— John

apps/web/src/routes/blog/$slug.tsx

@@ -60,7 +60,7 @@ function Component() {
         </Link>
 
         <header className="pt-10 pb-12">
-          <h1 className="font-hand text-5xl leading-[1.02] font-semibold tracking-normal text-balance md:text-7xl">
+          <h1 className="font-hand text-5xl leading-[1.02] font-semibold tracking-normal text-balance text-black md:text-7xl">
             {article.title}
           </h1>
           <div className="mt-6 flex items-center gap-2 text-sm text-[#756b5d]">
@@ -81,14 +81,16 @@ function Component() {
             aria-label="TLDR"
             className="mb-12 border-y border-[#eee8df] py-5"
           >
-            <p className="font-mono text-xs font-medium tracking-[0.14em] text-[#756b5d] uppercase">
+            <p className="font-hand text-xl font-semibold tracking-normal text-[#756b5d]">
               TL;DR
             </p>
-            <p className="mt-3 text-lg leading-8 text-[#363029]">{tldr}</p>
+            <p className="font-hand mt-3 text-2xl leading-8 font-semibold text-[#363029]">
+              {tldr}
+            </p>
           </aside>
         )}
 
-        <article className="prose prose-stone prose-headings:font-hand prose-headings:font-semibold prose-headings:text-[#181613] prose-p:text-[#363029] prose-a:text-[#181613] prose-a:underline hover:prose-a:text-[#4f4940] prose-strong:text-[#181613] prose-li:text-[#363029] prose-img:rounded-md prose-img:border prose-img:border-[#eee8df] max-w-none">
+        <article className="blog-prose prose prose-stone prose-headings:font-hand prose-headings:font-semibold prose-headings:text-[#756b5d] prose-p:text-[#363029] prose-a:text-[#181613] prose-a:underline hover:prose-a:text-[#4f4940] prose-strong:text-[#181613] prose-li:text-[#363029] prose-img:rounded-md prose-img:border prose-img:border-[#eee8df] max-w-none">
           <MDXContent code={article.mdx} components={mdxComponents} />
         </article>
       </div>

apps/web/src/routes/blog/index.tsx

@@ -36,7 +36,7 @@ function Component() {
         </header>
 
         <section className="pt-24 pb-16 md:pt-32">
-          <h1 className="font-hand text-6xl leading-[0.98] font-semibold tracking-normal text-balance md:text-8xl">
+          <h1 className="font-hand text-6xl leading-[0.98] font-semibold tracking-normal text-balance text-black md:text-8xl">
             Blog
           </h1>
           <p className="mt-6 max-w-2xl text-xl leading-9 text-[#363029]">
@@ -54,7 +54,7 @@ function Component() {
                 className="group block"
               >
                 <article className="grid gap-3 border-t border-[#eee8df] pt-6">
-                  <h2 className="text-xl leading-7 font-medium text-[#181613] group-hover:text-[#4f4940]">
+                  <h2 className="font-hand text-3xl leading-[1.05] font-semibold tracking-normal text-balance text-[#756b5d] group-hover:text-[#4f4940]">
                     {article.title}
                   </h2>
                   {article.meta_description && (

apps/web/src/styles.css

@@ -497,6 +497,70 @@
   content: none;
 }
 
+.blog-prose
+  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 4rem;
+  margin-bottom: 1.25rem;
+  font-family: var(--font-hand);
+  font-size: 2.25rem;
+  font-weight: 600;
+  line-height: 1.05 !important;
+  letter-spacing: 0;
+  color: #756b5d;
+}
+
+.blog-prose
+  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 3.5rem;
+  margin-bottom: 1rem;
+  font-family: var(--font-hand);
+  font-size: 1.875rem;
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: 0;
+  color: #756b5d;
+}
+
+.blog-prose
+  :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+  font-family: var(--font-hand);
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: 0;
+  color: #756b5d;
+}
+
+.blog-prose
+  :where(h2, h3, h4):not(:where([class~="not-prose"], [class~="not-prose"] *))
+  :where(a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.blog-prose
+  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *))
+  + :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.blog-prose
+  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *))
+  + :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .blog-prose
+    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 2.75rem;
+  }
+
+  .blog-prose
+    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    font-size: 2.25rem;
+  }
+}
+
 .border-around {
   box-shadow: var(--shadow-ring);
 }