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(261deg 52% 59%), 'pagination-foreground': hsl(0deg 0% 100%), 'pagination-foreground-hover': hsl(0deg 0% 100%), 'pagination-focus-ring': hsl(261deg 52% 59%), ), ),);