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.
This commit is contained in:
parent
e0dc26dc49
commit
25d351add5
@ -13,9 +13,11 @@
|
|||||||
{{ $.Data.Singular | humanize }}: {{ $key }}
|
{{ $.Data.Singular | humanize }}: {{ $key }}
|
||||||
</a>
|
</a>
|
||||||
</h2>
|
</h2>
|
||||||
|
<div class="clearfix w-100">
|
||||||
{{ range $value.Pages }}
|
{{ range $value.Pages }}
|
||||||
{{ partial "summary.html" . }}
|
{{ partial "tag-summary.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
17
blog/layouts/partials/tag-summary.html
Normal file
17
blog/layouts/partials/tag-summary.html
Normal file
@ -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;
|
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…
x
Reference in New Issue
Block a user