46 lines
956 B
CSS
46 lines
956 B
CSS
|
/*
|
||
|
|
* This stylesheet is meant for the blog and unix notes listing pages. This is
|
||
|
|
* where a collection of posts are shown all at once.
|
||
|
|
*
|
||
|
|
* The parent <main> must have a class called ".post-listing"
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
main.post-listing {
|
||
|
|
width: 960px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
main.post-listing ul {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 2rem;
|
||
|
|
list-style-type: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
main.post-listing ul li {
|
||
|
|
width: calc(50% - 1rem);
|
||
|
|
}
|
||
|
|
main.post-listing img {
|
||
|
|
height: 232px;
|
||
|
|
width: 464px;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
main.post-listing img:hover {
|
||
|
|
filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
|
||
|
|
}
|
||
|
|
@media (max-width: 720px) {
|
||
|
|
main.post-listing ul {
|
||
|
|
gap: 0.5em;
|
||
|
|
}
|
||
|
|
main.post-listing ul li {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
main.post-listing ul li:first-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
main.post-listing ul li:first-child .title {
|
||
|
|
font-size: 1.563em;
|
||
|
|
}
|
||
|
|
}
|