You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.0 KiB
Plaintext
80 lines
2.0 KiB
Plaintext
.isekai-masonry {
|
|
display: block;
|
|
width: 100%;
|
|
--masonry-col-width: 50%;
|
|
|
|
.isekai-masonry-gutter-sizer {
|
|
width: 0;
|
|
width: ~"var(--masonry-gutter)";
|
|
}
|
|
|
|
.isekai-masonry-sizer {
|
|
width: 100%;
|
|
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
|
|
}
|
|
|
|
.isekai-masonry-item {
|
|
margin-bottom: ~"var(--masonry-gutter)";
|
|
}
|
|
|
|
// Column width tools
|
|
.col-1 {
|
|
width: 100%; // Fallback
|
|
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
|
|
}
|
|
|
|
.col-2 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-3 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-4 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-5 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-6 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-7 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-8 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-9 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-10 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-11 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
|
|
.col-12 {
|
|
width: 100%;
|
|
width: ~"min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px))";
|
|
}
|
|
} |