Finally uses container queries for defining masonry columns. #872.
This commit is contained in:
parent
21075e1e29
commit
6238589c69
|
@ -14,31 +14,61 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
animation-name: appear;
|
animation-name: appear;
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
|
|
||||||
|
@supports (contain: inline-size) {
|
||||||
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.tainacan-masonry-container--legacy){
|
&:not(.tainacan-masonry-container--legacy){
|
||||||
&>li,
|
&>li,
|
||||||
&>.tainacan-masonry-grid-sizer {
|
&>.tainacan-masonry-grid-sizer {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
width: calc(14.285% - 25px);
|
width: calc(12.5% - 25px);
|
||||||
|
|
||||||
@media screen and (max-width: 2560px) {
|
@container (max-width: 2380px) {
|
||||||
|
width: calc(14.285% - 25px);
|
||||||
|
}
|
||||||
|
@container (max-width: 1980px) {
|
||||||
width: calc(16.666% - 25px);
|
width: calc(16.666% - 25px);
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1920px) {
|
@container (max-width: 1480px) {
|
||||||
width: calc(20% - 25px);
|
width: calc(20% - 25px);
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1740px) {
|
@container (max-width: 1240px) {
|
||||||
width: calc(25% - 25px);
|
width: calc(25% - 25px);
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1440px) {
|
@container (max-width: 940px) {
|
||||||
width: calc(33.333% - 25px);
|
width: calc(33.333% - 25px);
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1024px) {
|
@container (max-width: 720px) {
|
||||||
width: calc(50% - 25px);
|
width: calc(50% - 25px);
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 620px) {
|
@container (max-width: 380px) {
|
||||||
width: calc(100% - 25px);
|
width: calc(100% - 25px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@supports not (contain: inline-size) {
|
||||||
|
width: calc(14.285% - 25px);
|
||||||
|
|
||||||
|
@media screen and (max-width: 2560px) {
|
||||||
|
width: calc(16.666% - 25px);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1920px) {
|
||||||
|
width: calc(20% - 25px);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1740px) {
|
||||||
|
width: calc(25% - 25px);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1440px) {
|
||||||
|
width: calc(33.333% - 25px);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
width: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 620px) {
|
||||||
|
width: calc(100% - 25px);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.tainacan-masonry-container--legacy {
|
&.tainacan-masonry-container--legacy {
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
}
|
}
|
||||||
.tainacan-records-container {
|
.tainacan-records-container {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
margin-left: 30px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -12,42 +13,48 @@
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
animation-name: appear;
|
animation-name: appear;
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
container-type: inline-size;
|
|
||||||
|
@supports (contain: inline-size) {
|
||||||
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
&>li,
|
&>li,
|
||||||
.tainacan-records-grid-sizer {
|
.tainacan-records-grid-sizer {
|
||||||
width: calc(20% - 30px);
|
width: calc(16.666% - 30px);
|
||||||
|
|
||||||
@container (max-width: 2560px) {
|
@container (max-width: 2560px) {
|
||||||
width: calc(25% - 30px);
|
width: calc(20% - 30px);
|
||||||
}
|
}
|
||||||
@container (max-width: 1920px) {
|
@container (max-width: 1920px) {
|
||||||
width: calc(33.333% - 30px);
|
width: calc(25% - 30px);
|
||||||
}
|
}
|
||||||
@container (max-width: 1360px) {
|
@container (max-width: 1360px) {
|
||||||
width: calc(50% - 30px);
|
width: calc(33.333% - 30px);
|
||||||
}
|
}
|
||||||
@container (max-width: 1024px) {
|
@container (max-width: 1024px) {
|
||||||
|
width: calc(50% - 30px);
|
||||||
|
}
|
||||||
|
@container (max-width: 768px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// &>li,
|
|
||||||
// .tainacan-records-grid-sizer {
|
|
||||||
// width: calc(20% - 30px);
|
|
||||||
|
|
||||||
// @media screen and (max-width: 2560px) {
|
@supports not (contain: inline-size) {
|
||||||
// width: calc(25% - 30px);
|
width: calc(20% - 30px);
|
||||||
// }
|
|
||||||
// @media screen and (max-width: 1920px) {
|
@media screen and (max-width: 2560px) {
|
||||||
// width: calc(33.333% - 30px);
|
width: calc(25% - 30px);
|
||||||
// }
|
}
|
||||||
// @media screen and (max-width: 1360px) {
|
@media screen and (max-width: 1920px) {
|
||||||
// width: calc(50% - 30px);
|
width: calc(33.333% - 30px);
|
||||||
// }
|
}
|
||||||
// @media screen and (max-width: 1024px) {
|
@media screen and (max-width: 1360px) {
|
||||||
// width: 100%;
|
width: calc(50% - 30px);
|
||||||
// }
|
}
|
||||||
// }
|
@media screen and (max-width: 1024px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.tainacan-record {
|
.tainacan-record {
|
||||||
background-color: rgba(126, 126, 126, 0.05);
|
background-color: rgba(126, 126, 126, 0.05);
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
Loading…
Reference in New Issue