From 4a3448c7c9f300a4304f5b6962bb306bce0ab5b5 Mon Sep 17 00:00:00 2001
From: Tony Jackson <tony.aaj.jackson@gmail.com>
Date: Thu, 12 Nov 2020 20:32:20 -0800
Subject: [PATCH] Fix mid-word line breaks & right-side whitespace

Line breaking in paragraphs in cards was set to "break-all" and would
break lines in the middle of words, making reading difficult. Changing
to "break-word" tries to break between words or at hyphens, which makes
reading cards much easier.

In addition, the headers and paragraphs in cards had a maximum width set
using the mw5 class tag, which is set as 16rem in ./src/static/app.css.
However, this maximum width only spans around 3/4 of width of the
card, so there was a column of whitespace on the right hand side of the
card. Removing the "class=mw5" constraint from the headers, paragraphs,
images, and hashes in cards allows the bounding boxes for these items to
expand to the right-side margin of the card. The title, text, and image
now fill the card and dynamically adjust width if the overall window
changes width.
---
 src/layouts/partials/list.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/layouts/partials/list.html b/src/layouts/partials/list.html
index 3ed40b2..a5321a7 100644
--- a/src/layouts/partials/list.html
+++ b/src/layouts/partials/list.html
@@ -1,5 +1,5 @@
 {{ define "text" }}
-<p class="f6 lh-copy mw5 mt2 mb0 mid-gray" style="word-break: break-all">
+<p class="f6 lh-copy mt2 mb0 mid-gray" style="word-break: break-word">
   {{- markdownify . -}}
 </p>
 {{ end }}
@@ -31,7 +31,7 @@
       <div class="dt w-100 mt1">
         <div class="dtc">
           <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
-            <h1 class="f5 mw5 f4-ns mv0">{{- .title -}}</h1>
+            <h1 class="f5 f4-ns mv0">{{- .title -}}</h1>
           </a>
         </div>
       </div>
@@ -49,13 +49,13 @@
       {{- end -}}
 
       {{- if isset . "hash" -}}
-        <div class="mt2 mw5">
+        <div class="mt2">
           {{ template  "hash" .hash }}
         </div>
       {{- end -}}
 
       {{- if isset . "picture" -}}
-      <div class="mt2 mw5">
+      <div class="mt2">
         <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
           <img class="br2" src="{{ .picture | relURL }}" >
         </a>