assets/css/bobastyle.css

@@ -76,7 +76,8 @@
 }
 
 .page-list li,
-.series-taxonomy li {
+.series-taxonomy li,
+.related-posts .post {
   padding-top: 8px;
   padding-left: 24px;
   padding-right: 24px;
@@ -251,56 +252,25 @@
 
 
 /* Related posts */
-.full-width-page-list {
+.related hr {
-  /* make left/right 0 margin so it takes up full width */
   margin: 25px 0;
 }
 
-.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;
-  }
-}
-
 @media (min-width: 720px) {
-  .full-width-page-list {
+  .related {
-    /* this makes it full width -- 720px max-width on body it is exactly 720px
+    /* this makes it full width -- 720px max-width on body
-     * so .related takes up full width
+     * add an extra 40px to give a 20px margin on left and right */
-     */
+    margin-left: calc(-100vw / 2 + 760px / 2);
-    margin-left: calc(-100vw / 2 + 720px / 2);
+    margin-right: calc(-100vw / 2 + 760px / 2);
-    margin-right: calc(-100vw / 2 + 720px / 2);
   }
 }
 
-.full-width-page-list .page-list ul {
+.related-posts {
-  display: flex;
+  display: grid;
-  flex-direction: row;
   gap: 20px;
-  overflow-x: scroll;
+  grid-auto-flow: column;
+  grid-auto-columns: 300px;
+  overflow-x: auto;
 }
 
 
@@ -433,6 +403,7 @@
 /* Basic elements */
 html {
   scroll-behavior: smooth;
+  margin: 0 20px;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -445,17 +416,11 @@ body {
   background-color: var(--background);
   color: var(--text-normal);
   font-family: "Open Sans", "Noto Sans", sans-serif;
-  margin: 20px;
+  margin: 0 auto 20px;
   max-width: 720px;
   overflow-wrap: break-word;
 }
 
-@media (min-width: 760px) {
-  body {
-    margin: 20px auto;
-  }
-}
-
 footer {
   text-align: center;
 }

exampleSite/config.yaml

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

i18n/es.yaml

@@ -8,9 +8,6 @@ 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,28 +68,23 @@
         {{ 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="homepage-latest-posts">
+        <div class="hompage-latest-posts">
             <hr>
             <h1>
                 {{ i18n "latest_posts" }}

layouts/partials/latest-posts.html

@@ -1,21 +0,0 @@
-<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>{{ i18n "see_also" }} <a href="{{ .Permalink }}">{{ .Title }}</a></p>
+        <p>SEE ALSO: <a href="{{ .Permalink }}">{{ .Title }}</a></p>
     {{ else }}
         {{ errorf "Page could not be found for see-also shortcode: %s" .Position }}
     {{ end }}