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

Resources