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 } }