From ad17aefc9ca28d596f227ed7ecc59bbda8d49e8d Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Mon, 24 Jan 2022 18:41:57 -0600
Subject: [PATCH] Change to list so it still reads ok on text-only browsers

---
 assets/sass/_home.scss | 18 ++++++++++++++----
 layouts/home.html      |  8 ++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/assets/sass/_home.scss b/assets/sass/_home.scss
index 69c8358..5874aa8 100644
--- a/assets/sass/_home.scss
+++ b/assets/sass/_home.scss
@@ -63,20 +63,30 @@
 
       @media screen and (max-width: 520px) {
         flex-wrap: wrap;
+        gap: 6px;
       }
       @media screen and (min-width: 520px) {
         flex-wrap: no-wrap;
+        gap: 20px;
       }
 
-      gap: 20px;
+      list-style-type: none;
+      padding: 0;
 
-      .blog-post-link {
-        flex-grow: 1;
-        flex-basis: 100%;
+      > li {
+        display: block;
+        width: 100%;
         padding: 8px;
         background-color: $faded-background-color;
         text-decoration: none;
 
+        flex-grow: 1;
+        flex-basis: 100%;
+      }
+
+      .blog-post-link {
+        text-decoration: none;
+
         .blog-post {
           display: flex;
           width: 100%;
diff --git a/layouts/home.html b/layouts/home.html
index 71b11bc..6ae2e74 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -7,19 +7,19 @@
         <div id="about">{{ .Content }}</div>
 
         <h2 id="blog-posts-title"><a href="/posts">recent blog posts &raquo;</a></h2>
-        <div id="blog-posts">
+        <ul id="blog-posts">
             {{ $posts := .GetPage "/posts" }}
             {{- range first 3 $posts.Pages -}}
-            <a href="{{ .RelPermalink }}" class="blog-post-link">
+            <li><a href="{{ .RelPermalink }}" class="blog-post-link">
                 <span class="blog-post">
                     <span class="title">{{ .Title }}</span>
                     <small class="details">
                         {{ .Date.Format "Mon Jan 02, 2006" }}
                     </small>
                 </span>
-            </a>
+            </a></li>
             {{- end -}}
-        </div>
+        </ul>
     </div>
 </div>