feat: new style and faster

assets/css/_partial/pagination.scss

@@ -0,0 +1,94 @@
+  /** pagination **/
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  list-style: none;
+  white-space: nowrap;
+  width: 100%;
+  padding-top: 2em;
+
+  a {
+    -webkit-font-smoothing: antialiased;
+    font-size: 12px;
+    color: #bfbfbf;
+    letter-spacing: 0.1em;
+    font-weight: 700;
+    padding: 5px 5px;
+    text-decoration: none;
+    transition: 0.3s;
+  }
+
+  li {
+    padding-bottom: 3px;
+    margin: 0 20px;
+    box-sizing: border-box;
+    position: relative;
+    display: inline;
+
+    &.disabled {
+      display: none;
+    }
+
+    &:hover a {
+      color: $light-pagination-link-active-color;
+    }
+
+    .dark-theme &:hover a {
+      color: $dark-pagination-link-active-color;
+    }
+
+    &:before,
+    &:after {
+      position: absolute;
+      content: "";
+      width: 0;
+      height: 3px;
+      background: $light-pagination-link-active-color;
+      transition: 0.3s;
+      bottom: 0px;
+    }
+
+    .dark-theme &:before,
+    .dark-theme &:after {
+      background: $dark-pagination-link-active-color;
+    }
+
+    &:before .active,
+    &:after .active {
+      width: 100%;
+    }
+
+    &:before {
+      left: 50%;
+    }
+
+    &:after {
+      right: 50%;
+    }
+
+    &:hover {
+
+      &:before,
+      &:after {
+        width: 50%;
+      }
+    }
+
+    &.active {
+      a {
+        color: $light-pagination-link-active-color;
+      }
+
+      .dark-theme & a {
+        color: $dark-pagination-link-active-color;
+      }
+
+      &:before,
+      &:after {
+        width: 60%;
+      }
+    }
+  }
+}