Fix list layout style on medium screen size

This commit is contained in:
Sodbileg Gansukh 2021-12-16 12:53:45 +08:00
parent 8ff91f709e
commit 0f9a3c79c1
3 changed files with 32 additions and 16 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -556,6 +556,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
word-break: break-word; word-break: break-word;
} }
@media (max-width: 700px) {
.post-card {
min-height: auto;
}
}
.post-card-image-link { .post-card-image-link {
position: relative; position: relative;
display: block; display: block;
@ -750,6 +756,30 @@ make sure this only happens on large viewports / desktop-ish devices.
*/ */
@media (min-width: 701px) {
.post-feed.list .post-card-large {
grid-column: 1 / span 3;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 3fr 5fr;
min-height: auto;
border-top: 0;
}
.post-feed.list .post-card-large.no-image {
grid-template-columns: 1fr;
}
.post-feed.list .post-card-large:not(.no-image) .post-card-header {
margin-top: 0;
}
.post-feed.list .post-card-large .post-card-content {
justify-content: flex-start;
margin-top: -6px;
}
}
@media (min-width: 1001px) { @media (min-width: 1001px) {
.post-card-large { .post-card-large {
grid-column: 1 / span 3; grid-column: 1 / span 3;
@ -760,15 +790,6 @@ make sure this only happens on large viewports / desktop-ish devices.
border-top: 0; border-top: 0;
} }
.post-feed.list .post-card-large {
grid-template-columns: 3fr 5fr;
min-height: auto;
}
.post-feed.list .post-card-large.no-image {
grid-template-columns: 1fr;
}
.post-card-large:not(.no-image) .post-card-header { .post-card-large:not(.no-image) .post-card-header {
margin-top: 0; margin-top: 0;
} }
@ -802,11 +823,6 @@ make sure this only happens on large viewports / desktop-ish devices.
justify-content: center; justify-content: center;
} }
.post-feed.list .post-card-large .post-card-content {
justify-content: flex-start;
margin-top: -6px;
}
.post-card-large .post-card-title { .post-card-large .post-card-title {
margin-top: 0; margin-top: 0;
font-size: 3.2rem; font-size: 3.2rem;