From 5fd952cc72ca8221b05d2f522757f433161e425c Mon Sep 17 00:00:00 2001
From: Quentin Duchemin <quentinduchemin@tuta.io>
Date: Mon, 21 Aug 2023 17:31:43 +0200
Subject: [PATCH] Use column flexbox in cards ; reduce wasted space

---
 themes/chosto/layouts/_default/list.html    |  2 +-
 themes/chosto/layouts/_default/summary.html | 29 ++++++++++++---------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/themes/chosto/layouts/_default/list.html b/themes/chosto/layouts/_default/list.html
index 7364cc7..a1af520 100644
--- a/themes/chosto/layouts/_default/list.html
+++ b/themes/chosto/layouts/_default/list.html
@@ -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 }}
diff --git a/themes/chosto/layouts/_default/summary.html b/themes/chosto/layouts/_default/summary.html
index 6f891e1..61e48ef 100644
--- a/themes/chosto/layouts/_default/summary.html
+++ b/themes/chosto/layouts/_default/summary.html
@@ -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,14 +36,18 @@
         {{ .Title }}
       </a>
     </div>
-    <hr style="margin: 1rem 0;">
-    {{/* If a special summary (before ToC) have been defined,
+    <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" )}}
-    {{ .Params.summary }}
-    {{ else }}
-    {{ .Content | plainify | safeHTML | truncate 300 "..." }}
-    {{ end }}
+      {{ if (isset .Params "summary" )}}
+      {{ .Params.summary }}
+      {{ else }}
+      {{ .Content | plainify | safeHTML | truncate 300 "..." }}
+      {{ end }}
+    </div>
   </div>
   <footer class="card-footer has-text-centered">
     {{ with .Params.categories }}
@@ -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">