diff --git a/src/www/index.html b/src/www/index.html
index fc348f4..ad3ed47 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -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 }
}