Change image display method

Grid has been changed to float to allow posts with no images. Float
reset hack has been used to keep bottom margin in articles.
doctorpavel
Emil Miler 3 years ago
parent 9710556740
commit 5378ecca19

@ -14,6 +14,7 @@
font-size: 18px;
line-height: 1.5;
}
header {
box-shadow: 0 0 20px 5px rgba(0,0,0,0.2);
padding: .25em .5em;
@ -34,16 +35,22 @@
content: " ]";
color: #999;
}
main { padding: 0 .5rem }
article {
display: grid;
grid-template-columns: 15rem 1fr;
grid-column-gap: 1rem;
margin-bottom: 3rem;
article { margin-bottom: 3rem }
article:after {
/* reset float and keep bottom margin */
content: "";
display: block;
float: none;
clear: both;
}
article img {
width: 100%;
float: left;
width: 15rem;
max-height: 25rem;
margin-right: 1rem;
}
article .title {
font-weight: bold;
@ -60,11 +67,11 @@
}
@media screen and (max-width: 900px) {
article { grid-template-columns: 10rem 1fr }
article img { width: 10rem }
}
@media screen and (max-width: 700px) {
body { font-size: 16px }
article { grid-template-columns: 6rem 1fr }
article img { width: 6rem }
article .meta { flex-direction: column-reverse }
}
</style>

Loading…
Cancel
Save