0997f5595e
* Increase the default thumbnail size from small (150x150) to medium (180x180). * Change the mobile layout to use three posts per row instead of two for small thumbnails. Parent/child posts are still 150x150 to avoid taking up even more space above posts.
55 lines
2.1 KiB
SCSS
55 lines
2.1 KiB
SCSS
.post-gallery-inline {
|
|
.posts-container {
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
article.post-preview {
|
|
display: inline-block;
|
|
padding: 0.5rem;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.post-gallery-grid {
|
|
.posts-container {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.post-preview-container {
|
|
display: flex;
|
|
place-items: end;
|
|
}
|
|
|
|
@media screen and (min-width: 660px) {
|
|
&.post-gallery-150 .post-preview-container { height: 150px; }
|
|
&.post-gallery-180 .post-preview-container { height: 180px; }
|
|
&.post-gallery-225 .post-preview-container { height: 225px; }
|
|
&.post-gallery-270 .post-preview-container { height: 270px; }
|
|
&.post-gallery-360 .post-preview-container { height: 360px; }
|
|
}
|
|
|
|
&.post-gallery-150 .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
|
|
&.post-gallery-180 .posts-container { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
|
|
&.post-gallery-225 .posts-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
|
|
&.post-gallery-225w .posts-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
|
|
&.post-gallery-270 .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
|
|
&.post-gallery-270w .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
|
|
&.post-gallery-360 .posts-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
|
|
|
|
@media screen and (max-width: 660px) {
|
|
.posts-container {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
&.post-gallery-150 .posts-container { grid-template-columns: repeat(3, minmax(0, 150px)); }
|
|
&.post-gallery-180 .posts-container { grid-template-columns: repeat(2, auto); }
|
|
&.post-gallery-225 .posts-container { grid-template-columns: repeat(2, auto); }
|
|
&.post-gallery-225w .posts-container { grid-template-columns: repeat(2, auto); }
|
|
&.post-gallery-270 .posts-container { grid-template-columns: repeat(2, auto); }
|
|
&.post-gallery-270w .posts-container { grid-template-columns: repeat(2, auto); }
|
|
&.post-gallery-360 .posts-container { grid-template-columns: repeat(1, auto); }
|
|
}
|
|
}
|