Style - Low width move text underneath image

1 files changed, 24 insertions, 1 deletions

diff --git a/blog.node5.net/static/folder.css b/blog.node5.net/static/folder.css
index a66bfb7..4c628e0 100644
--- a/blog.node5.net/static/folder.css
+++ b/blog.node5.net/static/folder.css
@@ -1,10 +1,11 @@
 .entry {
 	display: flex;
-	margin-bottom: 1em;
+  flex-wrap: wrap; /* Allow title to flow to next line, in case of space constraints */
 }
 
 .entry > a {
 	text-decoration: none;
+  width: fix-content;
 }
 
 .entry-text {
@@ -27,3 +28,25 @@ ol {
 	text-align: center;
 }
 
+.entries > hr {
+  color: #4443;
+  margin:1em;
+}
+
+h4 {
+  margin: 0;
+}
+
+h4 > p {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 50rem) {
+  .entry > * {
+    width: 100%;
+  }
+  .entry > a > img {
+    width: 100%;
+    margin-bottom: 0.5em;
+  }
+}