Fixing title orphans with text wrap

nathanlong · Nov 29, 2023 · 12ef4ba · 12ef4ba
1 parent 803f64b
commit 12ef4ba
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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);
 }