From d69cc8eec2b4322a933eb0b12c42911b31bc64c3 Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bradleytaunt@gmail.com>
Date: Fri, 30 Aug 2019 09:00:21 -0400
Subject: [PATCH] style: update homepage post list to use flexbox for better
 mobile support

---
 _includes/head.html | 2 +-
 index.html          | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 8a91da0..f375c67 100755
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -14,5 +14,5 @@
   {% endif %}
   <link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/atom.xml">
-  <style>html,body{background:#fffaf7;color:#2d2d2d;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}a,a:visited{color:darkred;text-decoration:none;}a:hover{text-decoration:underline;}main{margin:auto;max-width:38rem;padding:0.8rem;}pre{background:white;overflow:scroll;padding:1rem;}td{border:1px solid #2d2d2d;padding:10px;}img{max-width:100%;}</style>
+  <style>html,body{background:#fffaf7;color:#2d2d2d;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}a,a:visited{color:darkred;text-decoration:none;}a:hover{text-decoration:underline;}main{margin:auto;max-width:38rem;padding:0.8rem;}pre{background:white;overflow:scroll;padding:1rem;}td{border:1px solid #2d2d2d;padding:10px;}img{max-width:100%;}@media(max-width:38rem){.homepage-list li a{width:100%;}}</style>
 </head>
diff --git a/index.html b/index.html
index 006917b..dea768f 100755
--- a/index.html
+++ b/index.html
@@ -4,11 +4,11 @@ title: Home
 description: The personal blog of designer and developer Bradley Taunt
 ---
 
-<ul style="list-style:none;padding:1rem 0;">
+<ul class="homepage-list" style="list-style:none;padding:1rem 0;">
 {% for post in site.posts %}
-  <li>
-    <a style="display:inline-block;width:60%;" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
-    <time style="float:right;font-size:90%;" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
+  <li style="align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:10px;">
+    <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
+    <time style="font-size:90%;" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
   </li>
 {% endfor %}
 </ul>