prev/next post links tweaked on small screens

foodgy · May 21, 2024 · 1b989ba · 1b989ba
1 parent c2e93b5
commit 1b989ba
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
 
+[![Jekyll Themes Shield](https://img.shields.io/badge/featured%20on-JT-red.svg)](https://jekyll-themes.com/foodgy/jekyll-overreacted)
+
 # Overreacted Theme
 
 [Overreacted](https://github.com/foodgy/jekyll-overreacted) is a theme for [Jekyll](http://jekyllrb.com), the static site generator. It's inspired by [Dan Abramov's](https://overreacted.io/) blog design.
 
 <div align="center">
-  <p><a href="https://romakoch.com">Theme preview</a></p>
-  <p><img src="/screenshot.png"/></p>
+  <h3><a href="https://romakoch.com">Theme preview</a></h3>
+  <p><img src="https://raw.githubusercontent.com/foodgy/jekyll-overreacted/main/screenshot.png"/></p>
 </div>
 
 ## Features

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -9,21 +9,21 @@
         </a>
     </div>
     <nav>
-        <ul class="flex mt-14">
+        <ul class="flex flex-wrap place-content-between mt-14">
+            <li class="mb-3.5 mr-5">
             {%- if page.previous.url -%}
-            <li class="mr-auto">
-                <a class="text-pink-500 dark:text-pink-300 border-b border-pink-500 dark:border-pink-300 hover:border-0" href="{{page.previous.url}}">
+                <a class="text-pink-500 dark:text-pink-300 border-b border-pink-500 dark:border-pink-300 hover:border-0" href="{{page.previous.url}}" rel="prev">
                     &#8592; {{page.previous.title}}
                 </a>
-            </li>
             {%- endif -%}
+            </li>
+            <li class="mb-3.5"></li>
             {%- if page.next.url -%}
-            <li class="ml-auto">
-                <a class="text-pink-500 dark:text-pink-300 border-b border-pink-500 dark:border-pink-300 hover:border-0" href="{{page.next.url}}">
+                <a class="text-pink-500 dark:text-pink-300 border-b border-pink-500 dark:border-pink-300 hover:border-0" href="{{page.next.url}}" rel="next">
                     {{page.next.title}} &#8594;
                 </a>
-            </li>
             {%- endif -%}
+            </li>
         </ul>
     </nav>
 </footer>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -31,7 +31,7 @@
   h2,
   h3 {
     margin-top: 0.5rem;
-    padding-bottom: 2rem;
+    margin-bottom: 2rem;
     font-weight: 700;
   }
 
@@ -47,14 +47,14 @@
 
   h4 {
     margin-top: 0.5rem;
-    padding-bottom: 2rem;
+    margin-bottom: 2rem;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 700;
   }
 
   p {
-    padding-bottom: 2rem;
+    margin-bottom: 2rem;
   }
 
   a {