A simple button-like pagination section to display navigation for the post listings.
Variations
- --sm: smaller display version.
- --lg: larger display version.
Technical Details
- We style and mark the current page with
aria-current='page'
. - We use
<nav>
element to mark the navigation. - We use the
generate-btn
andbtn-variant
mixin to create a similar appearance to the standard button. - You should add the colors to your config file.
Dark Colors
scss@use 'sprucecss/scss/spruce' with ( $dark-colors: ( btn: ( pagination-background: hsl(207deg 97% 12%), pagination-background-hover: hsl(261 52% 59%), pagination-foreground: hsl(0 0% 100%), pagination-foreground-hover: hsl(0 0% 100%), pagination-focus-ring: hsl(261 52% 59%) ) ));