From be83722dea97e8e430ddded48ff9a2b9ede00969 Mon Sep 17 00:00:00 2001
From: Ariejan de Vroom <ariejan@devroom.io>
Date: Tue, 28 Feb 2023 10:11:27 +0100
Subject: [PATCH] Improve mobile layout

---
 themes/devroom-2020/assets/scss/devroom.scss  | 29 +++++++++++--------
 .../devroom-2020/layouts/partials/home.html   |  4 +--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/themes/devroom-2020/assets/scss/devroom.scss b/themes/devroom-2020/assets/scss/devroom.scss
index 52fa5b0..846a271 100644
--- a/themes/devroom-2020/assets/scss/devroom.scss
+++ b/themes/devroom-2020/assets/scss/devroom.scss
@@ -71,7 +71,7 @@ h1, h2, h3, h4, h5 {
     font-size: $header_size;
     font-weight: bold;
     font-variant: small-caps;
-    line-height: $header_size * 1.1;
+    line-height: $header_size * 1.7;
     color: $header;
     margin: 0.67rem 0;
 }
@@ -212,17 +212,22 @@ table td, table th {
     padding: 0.2rem 1rem;
 }
 
-.flex-columns {
-    display: flex; 
-    flex-direction: row;
-}
-
-.flex-column {
-    &#popular_posts {
-        order: 1;
+@media(min-width:768px) {
+    .flex-columns {
+        display: flex; 
+        // flex-direction: row;
+        flex-flow: row wrap;
     }
-    &#recent_posts {
-        order: 2;
+
+    .flex-column {
+        width: 50%;
+
+        &#popular_posts {
+            order: 1;
+        }
+        &#recent_posts {
+            order: 2;
+        }
     }
 }
 
@@ -252,4 +257,4 @@ img.about-avatar {
     color: $links;
   }
   
-  
\ No newline at end of file
+  
diff --git a/themes/devroom-2020/layouts/partials/home.html b/themes/devroom-2020/layouts/partials/home.html
index 73bf97d..d027467 100644
--- a/themes/devroom-2020/layouts/partials/home.html
+++ b/themes/devroom-2020/layouts/partials/home.html
@@ -33,5 +33,5 @@
             {{ end }}
             </ul>
         {{ end }}
-    </div>    
-</div>
\ No newline at end of file
+    </div>
+</div>