init...

themes/butterfly/source/css/_layout/pagination.styl

@@ -0,0 +1,83 @@
+#pagination
+  .pagination
+    margin-top: 20px
+    text-align: center
+
+  .page-number
+    &.current
+      background: $theme-paginator-color
+      color: var(--white)
+
+  .pagination-info
+    position: absolute
+    top: 50%
+    padding: 20px 40px
+    width: 100%
+    transform: translate(0, -50%)
+
+  .prev_info,
+  .next_info
+    @extend .limit-one-line
+    color: var(--white)
+    font-weight: 500
+
+  .next-post
+    .pagination-info
+      text-align: right
+
+  .pull-full
+    width: 100% !important
+
+  .prev-post .label,
+  .next-post .label
+    color: var(--light-grey)
+    text-transform: uppercase
+    font-size: 90%
+
+  .prev-post,
+  .next-post
+    @extend .postImgHover
+    width: 50%
+
+    +maxWidth768()
+      width: 100%
+
+    a
+      position: relative
+      display: block
+      overflow: hidden
+      height: 150px
+
+  &.pagination-post
+    overflow: hidden
+    margin-top: 40px
+    width: 100%
+    background: $dark-black
+
+.layout
+  & > .recent-posts
+    .pagination
+      & > *
+        display: inline-block
+        margin: 0 6px
+        width: w = 2.5em
+        height: w
+        line-height: w
+
+      & > *:not(.space)
+        @extend .cardHover
+
+        &:hover
+          background: var(--btn-hover-color)
+          color: var(--btn-color)
+
+  & > div:not(.recent-posts)
+    .pagination
+      .page-number
+        display: inline-block
+        margin: 0 4px
+        min-width: w = 24px
+        height: w
+        text-align: center
+        line-height: w
+        cursor: pointer