pagination wip

assets/sass/_theme/design-system/pagination.sass

+.pagination
+    // font-family: $font-family-sans-serif
+    font-size: px2rem(14)
+    justify-content: center
+    margin: #{$grid-gutter * 2.5} 0 0
+    li
+        // @extend .page-item
+    a
+        // @extend .page-link
+
+    .disabled
+        a::before
+            opacity: .3
+
+    &:not(&-between-pages)
+        li
+            &:first-child,
+            &:nth-child(2),
+            &:nth-last-child(2),
+            &:last-child
+                a
+                    // @extend .icon
+            &:first-child
+                a
+                    // @extend .icon-arrow-first
+            &:nth-child(2)
+                a
+                    // @extend .icon-arrow-left
+            &:nth-last-child(2)
+                a
+                    // @extend .icon-arrow-right
+            &:last-child
+                a
+                    // @extend .icon-arrow-last
+            a::before
+                font-size: px2rem(12)
+
+    &-between-pages
+        justify-content: space-between
+        // margin-left: -$pagination-padding-x
+        // margin-right: -$pagination-padding-x
+        // margin-top: map-get($spacers, 5)
+        li
+            flex: 1
+
+        a
+            background-color: transparent
+            border: 0
+            &:hover
+                background-color: transparent
+                text-decoration: underline
+                span
+                    text-decoration: none
+
+        span
+            // color: $gray-600
+
+        .previous
+            padding-left: 0
+            span
+                // @extend .icon
+                // @extend .icon-arrow-left
+                &::before
+                    font-size: px2rem(12)
+                    margin-right: px2rem(5)
+        .next
+            padding-right: 0
+            text-align: right
+            span
+                &::after
+                    // @include icon
+                    // content: map-get($icons, "arrow-right")
+                    font-size: px2rem(12)
+                    margin-left: px2rem(5)
+
+        @include media-breakpoint-down(md)
+            flex-direction: column-reverse
+            margin-left: 0
+            margin-right: 0
+            li.previous,
+            li.next
+                // border-top: 1px solid $gray-500
+                text-align: left
+                a
+                    padding: px2rem(20) px2rem(40) px2rem(20) 0
+                    &::after
+                        @include icon
+                        font-size: px2rem(12)
+                        opacity: 0.5
+                        position: absolute
+                        right: 0
+                        top: 50%
+                        transform: translateY(-50%)
+                span
+                    &::after,
+                    &::before
+                        content: none
+
+            li.previous
+                // border-bottom: 1px solid $gray-500
+                a::after
+                    // content: map-get($icons, "arrow-left")
+            li.next
+                a::after
+                    // content: map-get($icons, "arrow-right")

assets/sass/_theme/hugo-osuny.sass

@@ -20,6 +20,7 @@
 @import "design-system/grid"
 @import "design-system/header"
 @import "design-system/hero"
+@import "design-system/pagination"
 @import "design-system/nav"
 @import "design-system/table"
 @import "design-system/table_of_content"