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 and btn-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%)
    )
  )
);

Resources