5b10b3b59c
There are many situations to consider: - Gallery page - Preview modal on gallery page - Item mini displays (timeline page, map page) - Items page - Item page And then, for each of those, additionally: - Demo mode off - Demo mode on (images don't have the actual content image, only the thumbhash) -And then, for each of those, additionally: - Image cached - Image not cached (When an image is cached, no thumbhash is needed because it is immediately available.) It's tricky to get everything looking right everywhere!
88 lines
No EOL
1.3 KiB
CSS
88 lines
No EOL
1.3 KiB
CSS
#filter-column {
|
|
max-width: 350px;
|
|
}
|
|
|
|
#content-column {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
:root {
|
|
--min-card-width: 250px;
|
|
}
|
|
|
|
.filter-results {
|
|
padding: 1em 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width), 1fr));
|
|
gap: .75rem;
|
|
}
|
|
|
|
.filter-results > .card {
|
|
--tblr-card-spacer-x: 0; /* otherwise, tabler adds awkward margins in our case (.card-link + .card-link) */
|
|
min-width: 250px;
|
|
max-width: 500px;
|
|
flex: 1;
|
|
transition: transform .2s ease;
|
|
}
|
|
|
|
.page-body .card .card-img-top,
|
|
.page-body .card .card-img-top > * {
|
|
height: 250px;
|
|
object-fit: cover; /* needed for images when obfuscation mode is enabled, to prevent distortion of the thumbhash */
|
|
}
|
|
|
|
.card-link:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
@media (min-width: 2000px) {
|
|
:root {
|
|
--min-card-width: 350px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#modal-preview {
|
|
--tblr-btn-disabled-border-color: lightgray;
|
|
}
|
|
|
|
#modal-preview-nav {
|
|
gap: 1em;
|
|
}
|
|
|
|
#modal-preview-content {
|
|
max-height: 1000px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/* the spacing around these particular SVG chevrons is a bit odd otherwise */
|
|
#modal-preview-nav .btn svg {
|
|
margin: 0;
|
|
}
|
|
#modal-preview-nav .btn.btn-prev svg {
|
|
margin-left: calc(var(--tblr-btn-padding-x) * -.25);
|
|
}
|
|
#modal-preview-nav .btn.btn-next svg {
|
|
margin-right: calc(var(--tblr-btn-padding-x) * -.25);
|
|
} |