From a1da0d7f7cecc6b4595eabf3636b10c96f7b0325 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 15 Jun 2024 12:38:32 +0800
Subject: [PATCH] Turn blog's next and previous posts into a grid container

---
 src/_includes/main/blogpost.njk | 55 +++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/_includes/main/blogpost.njk b/src/_includes/main/blogpost.njk
index 4fe8aac5..f12cd926 100644
--- a/src/_includes/main/blogpost.njk
+++ b/src/_includes/main/blogpost.njk
@@ -5,23 +5,52 @@ isArticle: true
 
 {{ content | safe }}
 
-{%- if collections.posts %}
-    {%- set previousPost = collections.posts | getPreviousCollectionItem %}
-    {%- set nextPost = collections.posts | getNextCollectionItem %}
-    {%- if nextPost or previousPost %}
-        <ul class="blog__post--nextprev">
-            {%- if previousPost %}<li>Previous Post: <a href="{{ previousPost.url }}">{{ previousPost.data.articleTitle }}</a></li>{% endif %}
-            {%- if nextPost %}<li>Next Post: <a href="{{ nextPost.url }}">{{ nextPost.data.articleTitle }}</a></li>{% endif %}
-        </ul>
+<nav class="blog__post--pagination" aria-labelledby="blog-pagination">
+    <h2 class="visually-hidden">Next and Previous Blog Posts</h2>
+    {%- if collections.posts %}
+        {%- set previousPost = collections.posts | getPreviousCollectionItem %}
+        {%- set nextPost = collections.posts | getNextCollectionItem %}
+        {%- if nextPost or previousPost %}
+            <ul class="blog__post--nextprev">
+            {%- if previousPost %}
+                <li class="blog__post--prev">
+                    <p>Previous Post:</p>
+                    <a href="{{ previousPost.url }}">{{ previousPost.data.articleTitle }}</a>
+                </li>
+            {% endif %}
+            {%- if nextPost %}
+                <li class="blog__post--next">
+                    <p>Next Post:</p>
+                    <a href="{{ nextPost.url }}">{{ nextPost.data.articleTitle }}</a>
+                </li>
+            {% endif %}
+            </ul>
+        {%- endif %}
     {%- endif %}
-{%- endif %}
+</nav>
 
 <style>
-    .blog__post--nextprev {
-        list-style: none;
-        padding-left: 0;
-        padding-top: 0.8em;
+    .blog__post--pagination {
+        padding-top: 1em;
         margin-top: 2.5em;
         border-top: 0.1em solid var(--clr-title-border);
     }
+
+    .blog__post--nextprev {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: grid;
+        gap: 0.7em;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-areas: 'prev next';
+    }
+
+    .blog__post--prev {
+        grid-area: prev;
+    }
+
+    .blog__post--next {
+        grid-area: next;
+    }
 </style>
\ No newline at end of file