Switch to left-alignment on small screens to prevent ugly gaps.

themes/vanilla/assets/scss/style.scss

@@ -7,6 +7,10 @@ body {
   line-height: 1.5;
   margin-bottom: 1rem;
   text-align: justify;
+
+  @include below-container-width {
+    text-align: left;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -171,10 +175,9 @@ hr.header-divider {
     border-radius: 0.15rem;
 }
 
-ul.page-list {
+ul.post-list {
     list-style: none;
     padding: 0;
-    text-align: left;
 
     li {
         @include bordered-block;
@@ -182,16 +185,22 @@ ul.page-list {
         padding: 0.5rem;
     }
 
-    a {
+    p {
+        margin: 0;
+    }
+
+    a.post-title {
         border-bottom: none;
         font-size: 1.3rem;
         font-weight: bold;
         font-family: $font-heading;
+        text-align: center;
+        display: block;
     }
-    
-    p {
-        margin-bottom: 0;
-        margin-top: 0.2rem;
+
+    p.post-wordcount {
+        text-align: center;
+        margin-bottom: 0.6rem;
     }
 }
 

themes/vanilla/layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <h2>{{ .Title }}</h2>
 
-<ul class="page-list">
+<ul class="post-list">
     {{ range .Pages.ByDate.Reverse }}
     {{ partial "post.html" . }}
     {{ end }}

themes/vanilla/layouts/index.html

@@ -2,9 +2,9 @@
 {{ .Content }}
 
 Recent posts:
-<ul class="page-list">
-{{ range first 10 (where (where .Site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") }}
-{{ partial "post.html" . }}
-{{ end }}
+<ul class="post-list">
+    {{ range first 10 (where (where .Site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") }}
+    {{ partial "post.html" . }}
+    {{ end }}
 </ul>
 {{ end }}

themes/vanilla/layouts/partials/post.html

@@ -1,5 +1,5 @@
 <li>
-    <a href="{{ .Permalink }}">{{ .Title }}</a>
-    <p>{{ .WordCount }} words, about {{ .ReadingTime }} minutes to read.</p>
-    <p>{{ .Summary }} . . .</p>
+    <a href="{{ .Permalink }}" class="post-title">{{ .Title }}</a>
+    <p class="post-wordcount">{{ .WordCount }} words, about {{ .ReadingTime }} minutes to read.</p>
+    <p class="post-preview">{{ .Summary }} . . .</p>
 </li>

themes/vanilla/layouts/tags/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <h2>Tagged "{{ .Title }}"</h2>
 
-<ul class="page-list">
+<ul class="post-list">
     {{ range .Pages.ByDate.Reverse }}
     {{ partial "post.html" . }}
     {{ end }}