themes/maik-blog/assets/scss/_portfolio.scss

@@ -109,3 +109,98 @@
         margin: 0 5px;
     }
 }
+
+.pagination {
+    margin-top: 20px;
+
+    &__title {
+        display: flex;
+        text-align: center;
+        position: relative;
+        margin: 20px 0;
+
+        &-h {
+            text-align: center;
+            margin: 0 auto;
+            padding: 5px 10px;
+            background: $light-background;
+            color: $light-color-secondary;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            text-decoration: none;
+            letter-spacing: 0.1em;
+            z-index: 1;
+
+            .dark-theme & {
+                background: $dark-background;
+                color: $dark-color-secondary;
+            }
+        }
+
+        hr {
+            position: absolute;
+            left: 0;
+            right: 0;
+            width: 100%;
+            margin-top: 15px;
+            z-index: 0;
+        }
+    }
+
+    &__buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        a {
+            text-decoration: none;
+            font-weight: bold;
+        }
+    }
+}
+
+.button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: $light-background-secondary;
+    font-size: 1rem;
+    font-weight: 600;
+    border-radius: 8px;
+    max-width: 40%;
+    padding: 0;
+    cursor: pointer;
+    appearance: none;
+
+    .dark-theme & {
+        background: $dark-background-secondary;
+    }
+
+    + .button {
+        margin-left: 10px;
+    }
+
+    a {
+        display: flex;
+        padding: 8px 16px;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    &__text {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    &.next .button__icon {
+        margin-left: 8px;
+    }
+
+    &.previous .button__icon {
+        margin-right: 8px;
+    }
+}

themes/maik-blog/assets/scss/_post.scss

@@ -169,19 +169,9 @@
         align-items: center;
         justify-content: center;
 
-        ul, ol {
+        a {
-            list-style-type: none;
-            margin: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 10px;
-        }
-
-        .button a {
             text-decoration: none;
             font-weight: bold;
-            overflow: visible;
         }
     }
 }
@@ -200,27 +190,15 @@
     cursor: pointer;
     appearance: none;
 
-    &:disabled, &[disabled], &.disabled {
-        pointer-events: none;
-    }
-
-    &.active {
-        background: darken($light-background-secondary, 20%);
-    }
-
     .dark-theme & {
         background: $dark-background-secondary;
-
-        &.active {
-            background: lighten($dark-background-secondary, 22%);
-        }
     }
 
     + .button {
         margin-left: 10px;
     }
 
-    > * {
+    a {
         display: flex;
         padding: 8px 16px;
         text-decoration: none;
@@ -229,10 +207,6 @@
         overflow: hidden;
     }
 
-    a {
-        text-decoration: none;
-    }
-
     &__text {
         text-overflow: ellipsis;
         white-space: nowrap;

themes/maik-blog/layouts/_default/list.html

@@ -10,6 +10,10 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
+    {{- if .Paginator.HasPrev }}
+    {{ partial "pagination.html" . }}
+    {{- end }}
+
     <div class="posts-list">
         {{ range $paginator.Pages }}
         <div class="post">

themes/maik-blog/layouts/partials/pagination.html

@@ -1,46 +1,20 @@
 <div class="pagination">
     <div class="pagination__buttons">
-        {{- if .Paginator.HasPrev }}
+        {{ if .Paginator.HasPrev }}
         <span class="button previous">
             <a href="{{ .Paginator.Prev.URL }}">
                 <span class="button__icon">←</span>
-                <span class="button__text">Previous</span>
+                <span class="button__text">Newer posts</span>
             </a>
         </span>
-        {{- end }}
+        {{ end }}
-        {{- with .Paginator }}
+        {{ if .Paginator.HasNext }}
-        {{- $currentPage := .PageNumber }}
-        {{- $totalPages := .TotalPages }}
-        {{- if gt $totalPages 1 }}
-        <ol>
-        {{- range .Pagers }}
-            {{- $isFirst := eq .PageNumber 1 }}
-            {{- $isLast := eq .PageNumber $totalPages }}
-            {{- $inWindow := and (ge .PageNumber (sub $currentPage 2)) (le .PageNumber (add $currentPage 2)) }}
-            {{- $showPrevEllipsis := and (gt $currentPage 4) (eq .PageNumber 2) }}
-            {{- $showNextEllipsis := and (lt $currentPage (sub $totalPages 3)) (eq .PageNumber (sub $totalPages 1)) }}
-            {{- if or $showPrevEllipsis $showNextEllipsis }}
-            <li class="button disabled">
-                <span class="button__text">&hellip;</span>
-            </li>
-             {{- else if or $isFirst $isLast $inWindow }}
-            <li class="button {{- if eq $currentPage .PageNumber }} disabled active{{ end }}">
-                <a href="{{ .URL }}">
-                <span class="button__text">{{ .PageNumber }}</span>
-                </a>
-            </li>
-            {{- end }}
-            {{- end }}
-        </ol>
-        {{- end }}
-        {{- end }}
-        {{- if .Paginator.HasNext }}
         <span class="button next">
             <a href="{{ .Paginator.Next.URL }}">
-                <span class="button__text">Next</span>
+                <span class="button__text">Older posts</span>
                 <span class="button__icon">→</span>
             </a>
         </span>
-        {{- end }}
+        {{ end }}
     </div>
 </div>

themes/maik-blog/layouts/writeups/list.html

@@ -10,6 +10,10 @@
     <div class="content content-list">{{ .Content }}</div>
     {{- end }}
 
+    {{- if .Paginator.HasPrev }}
+    {{ partial "pagination.html" . }}
+    {{- end }}
+
     <div class="posts-list masonry">
         {{ range $paginator.Pages }}
         <div class="post">