From 25d351add5e3b81256d71f9f574fc1129b5e5798 Mon Sep 17 00:00:00 2001
From: Jack Jackson <scubbojj@gmail.com>
Date: Wed, 17 May 2023 21:06:34 -0700
Subject: [PATCH] First attempt

Not great - text overruns the boxes unless a limited height is set, but
varying heights of headers leads to uneven lengths of content.
---
 blog/layouts/_default/terms.html       |  4 +++-
 blog/layouts/partials/tag-summary.html | 17 +++++++++++++++++
 blog/static/css/custom.css             | 16 ++++++++++++++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 blog/layouts/partials/tag-summary.html

diff --git a/blog/layouts/_default/terms.html b/blog/layouts/_default/terms.html
index e448fca..f69ec33 100644
--- a/blog/layouts/_default/terms.html
+++ b/blog/layouts/_default/terms.html
@@ -13,9 +13,11 @@
             {{ $.Data.Singular | humanize }}: {{ $key }}
           </a>
         </h2>
+        <div class="clearfix w-100">
         {{ range $value.Pages }}
-          {{ partial "summary.html" . }}
+          {{ partial "tag-summary.html" . }}
         {{ end }}
+        </div>
       {{ end }}
     </section>
   </div>
diff --git a/blog/layouts/partials/tag-summary.html b/blog/layouts/partials/tag-summary.html
new file mode 100644
index 0000000..ffd41ce
--- /dev/null
+++ b/blog/layouts/partials/tag-summary.html
@@ -0,0 +1,17 @@
+{{/*
+    I don't want to _fully_ override the "summary.html" partial that exists in the theme, in case it's used anywhere else -
+    but this different summary allows me to make the summaries of articles in the tags page a bit more compact.
+*/}}
+<div class="relative w-30 mb4 bg-white nested-copy-line-height" style="float:left; margin-right: 5px; height: 250px;">
+    <div class="bg-white mb3 pa4 gray overflow-hidden;" style="height:250px;">
+    <span class="f6 db">{{ humanize .Section }}</span>
+    <h1 class="f3 near-black">
+        <a href="{{ .RelPermalink }}" class="link black dim">
+        {{ .Title }}
+        </a>
+    </h1>
+    <div class="nested-links f5 lh-copy nested-copy-line-height restrict-inner-p-to-250" style="height:250px">
+        {{ .Summary  }}
+    </div>
+    </div>
+</div>
diff --git a/blog/static/css/custom.css b/blog/static/css/custom.css
index ba53d84..83adbb0 100644
--- a/blog/static/css/custom.css
+++ b/blog/static/css/custom.css
@@ -72,3 +72,19 @@ figcaption {
     border-bottom: 2px solid #009879;
 }
 
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/**
+ Hacky hack hack...but I can't find where the `<p>` inside the Summary is created
+
+ Unforunately, setting a static height doesn't work, because if the header of the summary runs to two lines then this pushes
+ the `<p>` down further.
+ */
+.restrict-inner-p-to-250 > p {
+  height: 96px;
+  overflow: hidden;
+}
\ No newline at end of file