Replace See also with a nicer looking Related posts section

assets/css/bobastyle.css

@@ -70,7 +70,8 @@
 }
 
 .page-list li,
-.series-taxonomy li {
+.series-taxonomy li,
+.related-posts .post {
   padding-top: 8px;
   padding-left: 24px;
   padding-right: 24px;
@@ -239,6 +240,19 @@
   padding: 8px 15px;
 }
 
+.related-posts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  gap: 10px;
+  align-items: stretch; /* this is default anyways */
+}
+
+.related-posts .post {
+  min-width: 10%;
+  flex: 1 1 49%;
+}
+
 #back-to-top {
   position: fixed;
   float: right;

i18n/en.yaml

@@ -35,8 +35,8 @@ post_count:
 read_more:
   other: "Read more"
 
-see_also:
-  other: "See also"
+related_posts:
+  other: "Related posts"
 
 older_post:
   other: "Older"

i18n/es.yaml

@@ -35,8 +35,8 @@ no_posts:
 read_more:
   other: "Leer más"
 
-see_also:
-  other: "Véase también"
+related_posts:
+  other: "Publicaciones similares"
 
 older_post:
   other: "Más antiguo"

layouts/_default/single.html

@@ -52,17 +52,11 @@
 
     {{ $related := .Site.RegularPages.Related . | first 5 }}
     {{ with $related }}
-        <div class="see-also">
-            <h2>{{ i18n "see_also" }}</h2>
-
-            <ul>
+        <h2>{{ i18n "related_posts" }}</h2>
+        <div class="related-posts">
             {{ range . }}
-                    <li>
-                        {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
-                        <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
-                    </li>
+                {{ .Render "summary/post" }}
             {{ end }}
-            </ul>
         </div>
     {{ end }}