Recent posts

assets/css/screen.css

@@ -186,6 +186,10 @@ a:hover {
     width: 100%;
 }
 
+.gh-main {
+    flex-grow: 1;
+}
+
 .gh-canvas,
 .kg-width-full.kg-content-wide {
     --main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
@@ -1094,6 +1098,7 @@ Search                         LOGO                    Login Subscribe
 /* 8. Container */
 
 .gh-container {
+    flex-grow: 1;
     margin-top: 64px;
 }
 
@@ -1640,6 +1645,25 @@ figcaption a {
     margin-top: 48px;
 }
 
+/* 12. Recent posts */
+
+.post-template .gh-container {
+    padding-top: 64px;
+    background-color: var(--color-lighter-gray);
+}
+
+.post-template .gh-container-inner {
+    display: block;
+}
+
+.post-template .gh-container.is-list .gh-card-image {
+    width: 220px;
+}
+
+.post-template .gh-container.is-list .gh-card-excerpt {
+    -webkit-line-clamp: 2;
+}
+
 /* 11. Footer */
 
 .gh-footer {
@@ -1664,7 +1688,15 @@ figcaption a {
     color: #15171a;
 }
 
-/* 11.2. Footer bar */
+/* 11.2. Recent posts on top */
+
+.post-template .gh-container + .gh-footer {
+    margin-top: 0;
+    padding-top: 120px;
+    background-color: var(--color-lighter-gray);
+}
+
+/* 11.3. Footer bar */
 
 .gh-footer-bar {
     display: grid;
@@ -1698,7 +1730,7 @@ figcaption a {
     text-align: right;
 }
 
-/* 11.3. Footer signup */
+/* 11.4. Footer signup */
 
 .gh-footer-signup {
     display: flex;
@@ -1709,6 +1741,7 @@ figcaption a {
 
 .gh-footer-signup-header {
     font-size: clamp(3.2rem, 2.5vw + 2.2rem, 5.4rem);
+    font-weight: 750;
     letter-spacing: -0.03em;
 }
 

partials/recent-posts.hbs

@@ -0,0 +1,12 @@
+<section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}} gh-canvas">
+    <div class="gh-container-inner">
+        <h2 class="gh-container-title">Read more</h2>
+        <div class="gh-feed">
+            {{#get "posts" include="authors" filter="id:-{{post.id}}" limit="2" as |next|}}
+                {{#foreach next}}
+                    {{> "loop"}}
+                {{/foreach}}
+            {{/get}}
+        </div>
+    </div>
+</section>

post.hbs

@@ -33,3 +33,5 @@
 </main>
 
 {{/post}}
+
+{{> "recent-posts"}}