pagination: change arrows to fontawesome and dont show text on small …

…screens
skulshreshtha · Oct 23, 2023 · d8e099d · d8e099d
1 parent d35d275
commit d8e099d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -101,12 +101,18 @@ <h3 class="post-subtitle">
 <ul class="pagination main-pager">
   {% if paginator.previous_page %}
   <li class="page-item previous">
-    <a class="page-link" href="{{ paginator.previous_page_path | absolute_url }}">&larr; Newer Posts</a>
+    <a class="page-link" href="{{ paginator.previous_page_path | absolute_url }}">
+	  <i class="fas fa-arrow-left" alt="Newer Posts"></i>
+	  <span class="d-none d-sm-inline-block">Newer Posts</span>
+	</a>
   </li>
   {% endif %}
   {% if paginator.next_page %}
   <li class="page-item next">
-    <a class="page-link" href="{{ paginator.next_page_path | absolute_url }}">Older Posts &rarr;</a>
+    <a class="page-link" href="{{ paginator.next_page_path | absolute_url }}">
+      <i class="fas fa-arrow-right" alt="Older Posts"></i>
+	  <span class="d-none d-sm-inline-block">Older Posts</span>
+	</a>
   </li>
   {% endif %}
 </ul>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -67,12 +67,18 @@
       <ul class="pagination blog-pager">
         {% if page.previous.url %}
         <li class="page-item previous">
-          <a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title | strip_html | xml_escape}}">&larr; Previous Post</a>
+          <a class="page-link" href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title | strip_html | xml_escape}}">
+		    <i class="fas fa-arrow-left" alt="Previous Post"></i>
+			<span class="d-none d-sm-inline-block">Previous Post</span>
+		  </a>
         </li>
         {% endif %}
         {% if page.next.url %}
         <li class="page-item next">
-          <a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title | strip_html | xml_escape}}">Next Post &rarr;</a>
+          <a class="page-link" href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title | strip_html | xml_escape}}">
+		    <i class="fas fa-arrow-right" alt="Next Post"></i>
+			<span class="d-none d-sm-inline-block">Next Post</span>
+		  </a>
         </li>
         {% endif %}
       </ul>

diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
@@ -811,6 +811,7 @@ nav.top-nav-short-permanent ~ header > .intro-header.big-img {
   background-color: #FFF;
   border-radius: 0;
   color: {{ site.text-col | default: "#404040" }};
+  padding: 0.75rem 1rem;
 }
 @media (min-width: 768px) {
   .pagination .page-item .page-link {