edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

Reapply "[Posts] Add support for folding displays (#763)"

Browse Source 
This reverts commit b0e263d36e.
This commit is contained in:
edshot99 2024-12-08 02:38:56 -06:00
parent b62770fa3d
commit e87ce043da
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/javascript/src/styles/common/z_responsive.scss
View File

@ -199,8 +199,9 @@
#posts #posts-container { #posts #posts-container {
width: 100%; width: 100%;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(3, 1fr);
gap: 1vw;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
@ -211,7 +212,8 @@
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
width: 31vw; width: 100%;
container-type: inline-size;
a { a {
margin: 0 auto; margin: 0 auto;
@ -219,7 +221,7 @@
img { img {
max-height: 150px; max-height: 150px;
max-width: 31vw; max-width: 100cqw;
} }
.desc { .desc {
@ -229,13 +231,11 @@
.user-disable-cropped-false { .user-disable-cropped-false {
article.post-preview { article.post-preview {
width: 31vw;
img { img {
height: auto; height: auto;
max-height: none; max-height: none;
max-width: none; max-width: none;
width: 31vw; width: 100cqw;
&.has-cropped-false { &.has-cropped-false {
object-fit: cover; object-fit: cover;
@ -314,6 +314,13 @@
} }
} }
} }
@media screen and (max-width: 800px) and (horizontal-viewport-segments: 2) {
body.resp {
#posts #posts-container {
grid-template-columns: repeat(4, 1fr);
}
}
}
@media screen and (max-width: 660px) { @media screen and (max-width: 660px) {
body.resp { body.resp {