tweaks

layouts/_default/li.html

@@ -8,7 +8,7 @@
   <article class="card-body">
     <h2 class="card-title">{{ .Title }}</h2>
     <p class="card-text">{{ .Description }}</p>
-    <div class="card-subtext">
+    <div class="card-subtext muted-text">
       <p style="margin: 0 1em 0 0;">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
       <p style="margin: 0 1em 0 0;">|</p>
       <p style="margin: 0 1em 0 0;">#Category</p>

layouts/_default/list.html

@@ -13,11 +13,12 @@
       {{ end }}
     </main>
     <div class="pagination-nav side-gutter">
-      <a href="#">&laquo; Older Posts</a>
-      <div>Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</div>
-      <a href="#">Newer Posts &raquo;</a>
+      {{ if .Paginator.HasPrev }}
+      <a href="#" class="pagination-prev button">Newer Posts</a>
+      {{ end }}
+      <p class="pagination-pagenum muted-text">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</p>
+      <a href="#" class="pagination-next button">Older Posts</a>
     </div>
-    {{ partial "footer.html" . }}
     {{ partial "scripts.html" . }}
   </body>
 </html>

static/css/style.css

@@ -126,7 +126,7 @@ img {
     object-fit: cover;
 }
 .card-body {
-    padding: 1.5em 1em;
+    padding: 1em;
 }
 .card-title {
     margin: 0;
@@ -140,22 +140,36 @@ img {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    color: #7A7B7C;
-    font-size: 0.9em;
+    font-size: 0.8em;
 }
 .pagination-nav {
-    margin: 3em 0;
+    margin: 4em 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
     max-width: 42em;
 }
+.pagination-prev {
+}
+.pagination-next {
+}
+.pagination-pagenum {
+}
+.button {
+    padding: 0.5em 0.6em;
+    background-color: #FFF;
+    border-radius: 0.2em;
+    border: 1px solid #FFF;
+}
 .side-gutter {
     padding-left: 0.7em !important;
     padding-right: 0.7em !important;
     box-sizing: border-box !important;
 }
+.muted-text { 
+    color: #7A7B7C;
+}
 blockquote {
     border-left: 0.3em solid #D1D1D1;
     margin: 1.5em 0.8em;
@@ -252,13 +266,13 @@ footer {
     .card-subtext {
         font-size: 0.7em;
     }
+    .post-title {
+        font-size: 2.5em;
+    }
 }
 
 /* Large devices (desktops, ~1025px and up) */
 @media only screen and (min-width: 64.063em) {
-    .post-title {
-        font-size: 2.5em;
-    }
 }
 
 /* Extra large devices (large desktops, ~1441px and up) */