Make a config option for "Latest Posts" on content pages

assets/css/bobastyle.css

@@ -76,8 +76,7 @@
 }
 
 .page-list li,
-.series-taxonomy li,
-.related-posts .post {
+.series-taxonomy li {
   padding-top: 8px;
   padding-left: 24px;
   padding-right: 24px;
@@ -252,25 +251,56 @@
 
 
 /* Related posts */
-.related hr {
+.full-width-page-list {
+  /* make left/right 0 margin so it takes up full width */
   margin: 25px 0;
 }
 
-@media (min-width: 720px) {
-  .related {
-    /* this makes it full width -- 720px max-width on body
-     * add an extra 40px to give a 20px margin on left and right */
-    margin-left: calc(-100vw / 2 + 760px / 2);
-    margin-right: calc(-100vw / 2 + 760px / 2);
+.full-width-page-list > hr,
+.full-width-page-list > h1 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.full-width-page-list li {
+  min-width: 300px;
+  max-width: 300px;
+
+}
+
+.full-width-page-list li:first-child {
+  margin-left: 20px;
+}
+.full-width-page-list li:last-child {
+  margin-right: 20px;
+}
+
+@media (max-width: 720px) {
+  /* when the screen is smaller than max size, make sure that the .related div
+   * still reaches the screen edge. then if the posts overflow and require
+   * scrolling, you can see it cut off on the side of your phone screen
+   */
+  .full-width-page-list {
+    margin-left: -20px;
+    margin-right: -20px;
   }
 }
 
-.related-posts {
-  display: grid;
+@media (min-width: 720px) {
+  .full-width-page-list {
+    /* this makes it full width -- 720px max-width on body it is exactly 720px
+     * so .related takes up full width
+     */
+    margin-left: calc(-100vw / 2 + 720px / 2);
+    margin-right: calc(-100vw / 2 + 720px / 2);
+  }
+}
+
+.full-width-page-list .page-list ul {
+  display: flex;
+  flex-direction: row;
   gap: 20px;
-  grid-auto-flow: column;
-  grid-auto-columns: 300px;
-  overflow-x: auto;
+  overflow-x: scroll;
 }
 
 
@@ -403,7 +433,6 @@
 /* Basic elements */
 html {
   scroll-behavior: smooth;
-  margin: 0 20px;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -416,11 +445,17 @@ body {
   background-color: var(--background);
   color: var(--text-normal);
   font-family: "Open Sans", "Noto Sans", sans-serif;
-  margin: 0 auto 20px;
+  margin: 20px;
   max-width: 720px;
   overflow-wrap: break-word;
 }
 
+@media (min-width: 760px) {
+  body {
+    margin: 20px auto;
+  }
+}
+
 footer {
   text-align: center;
 }

exampleSite/config.yaml

@@ -42,6 +42,9 @@ params:
   #   reddit: true
   #   telegram: true
 
+  # show "Latest Posts" section at bottom of content pages
+  # latestPostsOnContent: true
+
   # footer: >-
   #   Some example text for the footer.
 

i18n/en.yaml

@@ -11,6 +11,9 @@ browser_no_video_support:
 latest_posts:
   other: "Latest Posts"
 
+see_also:
+  other: "SEE ALSO:"
+
 
 # Meta items
 long_date:
@@ -39,7 +42,7 @@ read_more:
   other: "Read more"
 
 related_posts:
-  other: "Related posts"
+  other: "Related Posts"
 
 older_post:
   other: "Older"

i18n/es.yaml

@@ -8,6 +8,9 @@ table_of_contents:
 browser_no_video_support:
   other: "Tu navegador de internet no admite video."
 
+see_also:
+  other: "Véase también:"
+
 
 # Meta items
 long_date:

layouts/_default/single.html

@@ -68,23 +68,28 @@
         {{ partial "share.html" . }}
     {{ end }}
 
-    {{ $related := .Site.RegularPages.Related . | first 10 }}
-    {{ with $related }}
-        <div class="related">
-            <hr>
-            <h2>{{ i18n "related_posts" }}</h2>
-            <div class="related-posts">
-                {{ range . }}
-                    {{ .Render "summary/post" }}
-                {{ end }}
-            </div>
-            <hr>
-        </div>
-    {{ end }}
-
     {{ if .Params.comments }}
         <div class="comments">
             {{ partial "comments.html" . }}
         </div>
     {{ end }}
+
+    {{ $related := .Site.RegularPages.Related . | first 10 }}
+    {{ with $related }}
+        <div class="related-posts full-width-page-list">
+            <hr>
+            <h1>{{ i18n "related_posts" }}</h1>
+            <div class="page-list">
+                <ul>
+                    {{ range . }}
+                        <li>{{ .Render "summary/post" }}</li>
+                    {{ end }}
+                </ul>
+            </div>
+        </div>
+    {{ end }}
+
+    {{ if .Site.Params.latestPostsOnContent }}
+        {{ partialCached "latest-posts.html" . }}
+    {{ end }}
 {{ end }}

layouts/index.html

@@ -6,7 +6,7 @@
     {{ end }}
 
     {{ if .Site.Params.homepageLatestPosts }}
-        <div class="hompage-latest-posts">
+        <div class="homepage-latest-posts">
             <hr>
             <h1>
                 {{ i18n "latest_posts" }}

layouts/partials/latest-posts.html

@@ -0,0 +1,21 @@
+<div class="latest-posts full-width-page-list">
+    <hr>
+    <h1>
+        {{ i18n "latest_posts" }}
+        {{ partial "rss-link.html" .Site.Home }}
+    </h1>
+
+    {{ with .Site.RegularPages | first 5 }}
+        <div class="page-list">
+            <ul>
+                {{ range . }}
+                    <li>{{ .Render "summary/post" }}</li>
+                {{ end }}
+            </ul>
+        </div>
+    {{ else }}
+        <div>
+            {{ i18n "no_posts" }}
+        </div>
+    {{ end }}
+</div>

layouts/shortcodes/see-also.html

@@ -1,6 +1,6 @@
 <div class="see-also">
     {{ with .Site.GetPage (.Get 0) }}
-        <p>SEE ALSO: <a href="{{ .Permalink }}">{{ .Title }}</a></p>
+        <p>{{ i18n "see_also" }} <a href="{{ .Permalink }}">{{ .Title }}</a></p>
     {{ else }}
         {{ errorf "Page could not be found for see-also shortcode: %s" .Position }}
     {{ end }}