Chosto
/
blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use column flexbox in cards ; reduce wasted space

master
Quentin Duchemin 2023-08-21 17:31:43 +02:00
parent aa57109fab
commit 5fd952cc72
Signed by: Chosto
GPG Key ID: 96AB8AE7DFEA3D74
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/chosto/layouts/_default/list.html
View File

@ -14,7 +14,7 @@
".Params.incoming" "!=" true)
}}
{{ range $paginator.Pages }}
<div class="column is-variable is-one-third">
<div class="column is-variable is-one-third py-0 my-3">
{{ .Render "summary" }}
</div>
{{ end }}

17
themes/chosto/layouts/_default/summary.html
View File

@ -1,4 +1,4 @@
<div class="card has-equal-height mt-5">
<div class="card has-equal-height">
<div class="card-image">
<figure class="image is-3by2">
{{ $imageURL := "https://bulma.io/images/placeholders/480x320.png" }}
@ -9,9 +9,9 @@
<a href="{{ .Permalink }}"><img src="{{ $imageURL }}" alt="Placeholder image"></a>
</figure>
</div>
<div class="card-content" style="height:100%;">
<div class="has-text-centered">
<a class="title is-4" href="{{.Permalink}}">
<div class="columns is-flex-direction-column card-content pb-0" style="height:100%;">
<div class="column is-flex-grow-0 has-text-centered pb-0">
<a class="title is-4 mb-0" href="{{.Permalink}}">
{{/*
Well, I am a beginner with Hugo so this is probably like crushing a banana with a rocket.
When a post belongs to a "case" (i.e. a section with a code, I'd like to have [INDEX/TOTAL] printed in title.
@ -36,7 +36,10 @@
{{ .Title }}
</a>
</div>
<hr style="margin: 1rem 0;">
<div class="column is-flex-grow-0 py-2">
<hr class="my-0">
</div>
<div class="column py-0">
{{/* If a special summary (before ToC) have been defined,
prefer using it because it has more chances to be a better summary */}}
{{ if (isset .Params "summary" )}}
@ -45,6 +48,7 @@
{{ .Content | plainify | safeHTML | truncate 300 "..." }}
{{ end }}
</div>
</div>
<footer class="card-footer has-text-centered">
{{ with .Params.categories }}
<div class="card-footer-item is-centered is-rounded">
@ -58,7 +62,8 @@
<div class="level-right">
<div class="level-item">
<time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
{{ .Date.Day }} {{ slicestr (index $.Site.Data.months_fr (printf "%d" .Date.Month)) 0 3 }} {{ .Date.Year }}
{{ .Date.Day }} {{ slicestr (index $.Site.Data.months_fr (printf "%d" .Date.Month)) 0 3 }}
{{ .Date.Year }}
</div>
</div>
<div class="level-left">