From c3d017418c1bc2b5adf9563195b6f69c722b2b00 Mon Sep 17 00:00:00 2001
From: anoopkini <anoopkini@users.noreply.github.com>
Date: Thu, 21 Mar 2024 03:31:25 +0000
Subject: [PATCH] updates

---
 _includes/post-nav.html | 38 ++++++++++++++++++++++++++++++++++++++
 _layouts/post.html      |  9 +--------
 2 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 _includes/post-nav.html

diff --git a/_includes/post-nav.html b/_includes/post-nav.html
new file mode 100644
index 0000000..552545a
--- /dev/null
+++ b/_includes/post-nav.html
@@ -0,0 +1,38 @@
+  <!-- post navigation -->
+  <style>
+    .post-nav-button {
+        border: 1px solid #333;
+        box-sizing: border-box;
+        padding:5px;
+        border-radius: 2px;
+        border-bottom: 5px solid #333;
+        max-width: 50%;
+    }
+
+    .post-nav-button.prev{
+        float:left;
+        border-right: 5px solid #333;
+        text-align: left;
+    }
+
+    .post-nav-button.next{
+        float: right;
+        border-left: 5px solid #333;
+        text-align: right;
+    }  
+    @media screen and (max-width: 600px) {
+        .post-nav-button {
+            max-width: 100%;
+            width: 100%;
+            margin:2px;
+            border:1px solid #333;
+        }
+}
+  </style>
+  {% if page.previous %}
+    <span class="post-nav-button prev">&lharu;<span class="desc">Previous:</span> <a href="{{page.previous.url}}">{{page.previous.title}}</a></span>
+  {% endif %}
+  {% if page.next %}
+    <span class="post-nav-button next"><span class="desc">Next:</span> <a href="{{page.next.url}}">{{page.next.title}}</a>&rharu;</span>
+  {% endif %}
+  <!-- end post navigation -->
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index bd33a4b..a494112 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -30,14 +30,7 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
     {{ content }}
   </div>
 
-  <!-- post navigation -->
-  {% if page.previous %}
-    <span style="float:left;border:1px solid #333; padding:5px;border-radius: 2px;margin-bottom: 5px;">&lharu; Previous: <a href="{{page.previous.url}}">{{page.previous.title}}</a></span>
-  {% endif %}
-  {% if page.next %}
-    <span style="float:right;border:1px solid #333; padding:5px;border-radius: 2px;">Next: <a href="{{page.next.url}}">{{page.next.title}}</a>&rharu;</span>
-  {% endif %}
-  <!-- end post navigation -->
+  {% include post-nav.html %}
 
   {%- if site.disqus.shortname -%}
     {%- include disqus_comments.html -%}