Files
danbooru/app/components/post_gallery_component/post_gallery_component.scss
evazion 908a0bf3e0 posts: show 2 thumbnails per row on mobile instead of 3.
Fix regression in e8f9e3ab2 after adding adjustable thumbnail sizes.
2021-12-08 20:30:13 -06:00

41 lines
1.7 KiB
SCSS

.post-gallery-inline {
.posts-container {
overflow-x: auto;
white-space: nowrap;
}
article.post-preview {
width: auto;
height: auto;
margin: 0 0 0.5rem 0;
padding: 0.5rem;
overflow: hidden;
vertical-align: top;
}
}
.post-gallery-grid {
.posts-container {
display: grid;
gap: 0.5rem;
}
&.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) {
&.post-gallery-150 .posts-container { grid-template-columns: repeat(2, auto); }
&.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); }
}
}