onweru/compose

[BUG] Long page names shrink previous/next arrows

blakegearin opened this issue · 1 comments

blakegearin commented

I have checked all the prerequisites below and I'm yet experiencing a problem

  • Read the README.md
  • Have the extended version of Hugo installed
  • Used the exampleSite's config.toml as a reference

Describe the bug

As the length of a page name increases, the next/previous arrow icons for that page shrink. They also change height, with the previous page arrow going downward and the next page arrow going upward.

This can be observed on the live example site.

image

image

Desktop (please complete the following information):

  • OS: macOS 12.2.1
  • Browser: Firefox 99.0b5
blakegearin commented

I think this solves the problem, but is not very elegant, specifically the height part.

.prev .pager_label
  padding-left: 1.5rem

.next .pager_label
  padding-right: 1.5rem

&::before, &::after
  background-image: var(--nextIcon)
  position: absolute
  width: 1rem
  height: 40%
  background-size: 100%
  background-repeat: no-repeat
  transform-origin: 50% 50%
  &::before
    left: 1rem
  &::after
    right: 1rem

This also changes the position of the arrows from beside the text to the far sides.

Before:
image

After:
image