Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fixed CSS for post thumbnail
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Cyper
2025-08-22 23:29:28 -04:00
parent b7822c8080
commit c25f32592b
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/posts.css
View File

@ -11,10 +11,9 @@
} }
.post-layout main .thumbnail { .post-layout main .thumbnail {
width: 100%; width: 100%;
height: 375px; height: 300px;
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
margin: 2rem 0;
} }
.post-layout main > div { .post-layout main > div {
background-color: rgba(255, 255, 255, .71); background-color: rgba(255, 255, 255, .71);
@ -41,6 +40,7 @@
border-radius: 1rem; border-radius: 1rem;
box-shadow: 0 2px 4px rgba(var(--black), .21); box-shadow: 0 2px 4px rgba(var(--black), .21);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0 1rem;
} }
.post-card:hover { .post-card:hover {
transform: translate(-4px, -4px); /* Up and left by 4px */ transform: translate(-4px, -4px); /* Up and left by 4px */
@ -57,8 +57,21 @@
padding: 2rem; padding: 2rem;
} }
@media (min-width: 768px) {
.post-layout main .thumbnail {
height: 375px;
margin: 1rem 0;
}
}
@media (min-width: 992px) { @media (min-width: 992px) {
.posts { .posts {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.post-card {
margin: 0;
}
.post-layout main .thumbnail {
height: 375px;
margin: 2rem 0;
}
} }