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.
attemptAtTagsRenovation
Jack Jackson 12 months ago
parent e0dc26dc49
commit 25d351add5
  1. 4
      blog/layouts/_default/terms.html
  2. 17
      blog/layouts/partials/tag-summary.html
  3. 16
      blog/static/css/custom.css

@ -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>

@ -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>

@ -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;
}
Loading…
Cancel
Save