From 12ef4ba08458e1e02b9a538f9da873ab75192b08 Mon Sep 17 00:00:00 2001
From: Nathan Long <nlong5@gmail.com>
Date: Wed, 29 Nov 2023 16:58:58 -0500
Subject: [PATCH] Fixing title orphans with text wrap

---
 _includes/layouts/post.njk |  2 +-
 _includes/postslist.njk    |  2 +-
 public/css/styles.css      | 10 ++++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index b7ac204..f562248 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -6,7 +6,7 @@ bodyClass: radial-mid
 
 <div class="mt-content feature text-center mb-2">
   <time class="text-small font-mono" datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
-  <h1 class="mb-0">{{ title }}</h1>
+  <h1 class="mb-0 wrap-balance">{{ title }}</h1>
   <span class="inline-block">
   {%- for tag in tags | filterTagList | sort() %}
   {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
diff --git a/_includes/postslist.njk b/_includes/postslist.njk
index 4854713..a9dfb16 100644
--- a/_includes/postslist.njk
+++ b/_includes/postslist.njk
@@ -1,7 +1,7 @@
 <ul class="postlist p-0 space-y-2">
   {% for post in postslist | reverse %}
   <li class="flex flex-col items-baseline">
-    <h2 class="heading-200 mb-1/4"><a href="{{ post.url | url }}" class="font-thin m-0 font-bold decoration-none leading-1">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a></h2>
+    <h2 class="heading-200 mb-1/4 wrap-pretty"><a href="{{ post.url | url }}" class="font-thin m-0 font-bold decoration-none leading-1">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a></h2>
     <p class="postlist-meta m-0">
     <span class="divide-comma inline-block">
       {% for tag in post.data.tags | filterTagList %}
diff --git a/public/css/styles.css b/public/css/styles.css
index d83fe3d..756ca68 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1850,6 +1850,16 @@ a.color-reduced {
   text-transform: capitalize;
 }
 
+.wrap-balance {
+  text-wrap: balance;
+}
+
+.wrap-pretty {
+  text-wrap: pretty;
+}
+
+/* @util-divide */
+
 .divide-y > * + * {
   border-top: 1px solid var(--color-gray-90);
 }