update the post layout

Author: liuning0820

_layouts/post.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+{{ content }}
+
+<div class="gh-post-navigation">
+  {% if page.previous %}
+    <a class="gh-post-previous" href="{{ page.previous.url }}">&larr; Previous Post: {{ page.previous.title }}</a>
+  {% endif %}
+  
+  {% if page.next %}
+    <a class="gh-post-next" href="{{ page.next.url }}">Next Post: {{ page.next.title }} &rarr;</a>
+  {% endif %}
+</div>

css/main.css

@@ -352,6 +352,38 @@ p>img{
 }
 
 
+/* Post navigation */
+.gh-post-navigation {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.gh-post-previous,
+.gh-post-next {
+  color: var(--link-color);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.gh-post-previous {
+  margin-right: auto;
+}
+
+.gh-post-next {
+  margin-left: auto;
+}
+
+.gh-post-previous:hover,
+.gh-post-next:hover {
+  text-decoration: underline;
+}
+
+
 /* Search box */
 .search-form {
   display: flex;