calibre-web
calibre-web copied to clipboard
Caliblur has squished covers - fix inside
Describe the bug/problem
The CaliBlur theme (which looks great by the way!) squishes the covers of some/most books, e.g.:
To Reproduce Steps to reproduce the behavior:
- Load some books - square covers are a good example
- Use CaliBlur theme
- Observe squashed cover images
Expected behavior
Book covers at full width but height appropriate to the aspect ratio:
Screenshots See above.
Environment (please complete the following information):
- Docker, LinuxServer
- Firefox on Windows (latest)
Fix This CSS fixes it, at least on a desktop view:
.book:not(body) {
height: 295px;
display: flex;
justify-content: end;
flex-direction: column;
}
.container-fluid .book .cover {
height: auto;`
}
Basically this sets div.cover to auto height (not 275px) and sets the parent (div.book) to 295px to compensate. It then uses the three flex properties to align div.cover and div.meta to the bottom of div.book - so that books are aligned at the bottom:
This also maintains hover border and shading alignment with the cover: