Adjusted mobile pagination styles (fixes #18)

README.md

@@ -2,7 +2,7 @@
 
 Personal website of Maximilian Boll. Feel free to look around.
 
-![](https://img.shields.io/badge/version-v1.2.2-brightgreen?style=for-the-badge)
+![](https://img.shields.io/badge/version-v1.2.3-brightgreen?style=for-the-badge)
 ![](https://img.shields.io/github/last-commit/MyXoToD/makkusu.dev?style=for-the-badge)
 ![](https://img.shields.io/github/actions/workflow/status/MyXoToD/makkusu.dev/deploy.yml?style=for-the-badge)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "makkusu.dev",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Private website of Maximilian Boll",
   "main": "index.js",
   "scripts": {

src/_includes/pagination.njk

@@ -1,11 +1,11 @@
 {% if pagination.pages | length > 1 %}
   <div class="pagination">
-    <a href="{{ pagination.href.first }}" class="pagination__link{% if pagination.pageNumber < 2 %} pagination__link--hidden{% endif %}">First page</a>
-    <a href="{{ pagination.href.previous }}" class="pagination__link pagination__link--highlight{% if pagination.pageNumber == 0 %} pagination__link--hidden{% endif %}">Newer posts</a>
+    <a href="{{ pagination.href.first }}" class="pagination__link pagination__link--newest{% if pagination.pageNumber < 2 %} pagination__link--hidden{% endif %}">First page</a>
+    <a href="{{ pagination.href.previous }}" class="pagination__link pagination__link--newer pagination__link--highlight{% if pagination.pageNumber == 0 %} pagination__link--hidden{% endif %}">Newer posts</a>
 
     <div>{{ pagination.pageNumber + 1 }} of {{ pagination.pages | length }}</div>
 
-    <a href="{{ pagination.href.next }}" class="pagination__link pagination__link--highlight{% if pagination.pageNumber == pagination.pages | length - 1 %} pagination__link--hidden{% endif %}">Older posts</a>
-    <a href="{{ pagination.href.last }}" class="pagination__link{% if pagination.pageNumber >= pagination.pages | length - 2 %} pagination__link--hidden{% endif %}">Last page</a>
+    <a href="{{ pagination.href.next }}" class="pagination__link pagination__link--older pagination__link--highlight{% if pagination.pageNumber == pagination.pages | length - 1 %} pagination__link--hidden{% endif %}">Older posts</a>
+    <a href="{{ pagination.href.last }}" class="pagination__link pagination__link--oldest{% if pagination.pageNumber >= pagination.pages | length - 2 %} pagination__link--hidden{% endif %}">Last page</a>
   </div>
 {% endif %}

src/assets/stylesheets/_pagination.scss

@@ -30,4 +30,46 @@
   &__link--highlight {
     opacity: 1;
   }
+}
+
+@media screen and (max-width: 680px) {
+  .pagination {
+    display: grid;
+    grid-template-areas: "page page"
+      "lefttop righttop"
+      "leftbottom rightbottom";
+    gap: 1rem;
+
+    >*+* {
+      margin: unset;
+    }
+
+    > div {
+      text-align: center;
+      grid-area: page;
+
+      &:before {
+        content: "Page ";
+      }
+    }
+
+    &__link {
+      &--newest {
+        grid-area: leftbottom;
+        text-align: left;
+      }
+      &--newer {
+        grid-area: lefttop;
+        text-align: left;
+      }
+      &--older {
+        grid-area: righttop;
+        text-align: right;
+      }
+      &--oldest {
+        grid-area: rightbottom;
+        text-align: right;
+      }
+    }
+  }
 }

src/blog.njk

@@ -16,5 +16,7 @@ canonical: /blog/
     {% for post in posts %}
       {% include 'post.njk' %}
     {% endfor %}
+
+    {% include 'pagination.njk' %}
   </div>
 </div>