From 5378ecca192577702fbdc9296976e2e4a6b0ec05 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Tue, 8 Mar 2022 10:03:39 +0100
Subject: [PATCH] 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.
---
 src/www/index.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

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