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) ".Params.incoming" "!=" true)
}} }}
{{ range $paginator.Pages }} {{ 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" }} {{ .Render "summary" }}
</div> </div>
{{ end }} {{ end }}

29
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"> <div class="card-image">
<figure class="image is-3by2"> <figure class="image is-3by2">
{{ $imageURL := "https://bulma.io/images/placeholders/480x320.png" }} {{ $imageURL := "https://bulma.io/images/placeholders/480x320.png" }}
@ -9,9 +9,9 @@
<a href="{{ .Permalink }}"><img src="{{ $imageURL }}" alt="Placeholder image"></a> <a href="{{ .Permalink }}"><img src="{{ $imageURL }}" alt="Placeholder image"></a>
</figure> </figure>
</div> </div>
<div class="card-content" style="height:100%;"> <div class="columns is-flex-direction-column card-content pb-0" style="height:100%;">
<div class="has-text-centered"> <div class="column is-flex-grow-0 has-text-centered pb-0">
<a class="title is-4" href="{{.Permalink}}"> <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. 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. 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,14 +36,18 @@
{{ .Title }} {{ .Title }}
</a> </a>
</div> </div>
<hr style="margin: 1rem 0;"> <div class="column is-flex-grow-0 py-2">
{{/* If a special summary (before ToC) have been defined, <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 */}} prefer using it because it has more chances to be a better summary */}}
{{ if (isset .Params "summary" )}} {{ if (isset .Params "summary" )}}
{{ .Params.summary }} {{ .Params.summary }}
{{ else }} {{ else }}
{{ .Content | plainify | safeHTML | truncate 300 "..." }} {{ .Content | plainify | safeHTML | truncate 300 "..." }}
{{ end }} {{ end }}
</div>
</div> </div>
<footer class="card-footer has-text-centered"> <footer class="card-footer has-text-centered">
{{ with .Params.categories }} {{ with .Params.categories }}
@ -58,7 +62,8 @@
<div class="level-right"> <div class="level-right">
<div class="level-item"> <div class="level-item">
<time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}"> <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> </div>
<div class="level-left"> <div class="level-left">