feat: improve pagination

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

@@ -109,98 +109,3 @@
         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,9 +169,19 @@
         align-items: center;
         justify-content: center;
 
-        a {
+        ul, ol {
+            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;
         }
     }
 }
@@ -190,6 +200,14 @@
     cursor: pointer;
     appearance: none;
 
+    &:disabled, &[disabled], &.disabled {
+        pointer-events: none;
+    }
+
+    &.active {
+        background: darken($light-background-secondary, 25%);
+    }
+
     .dark-theme & {
         background: $dark-background-secondary;
     }
@@ -198,7 +216,7 @@
         margin-left: 10px;
     }
 
-    a {
+    > * {
         display: flex;
         padding: 8px 16px;
         text-decoration: none;
@@ -207,6 +225,10 @@
         overflow: hidden;
     }
 
+    a {
+        text-decoration: none;
+    }
+
     &__text {
         text-overflow: ellipsis;
         white-space: nowrap;