feat(docs): Add preview image to blog list, fix pagination styles

docs/assets/styles/_blog.scss

@@ -15,6 +15,9 @@
     h5 {
         margin-top: -24px;
     }
+    .featured-image {
+        max-width: 100%;
+    }
     p {
         line-height: 1.4em;
     }

docs/assets/styles/main.scss

@@ -1,17 +1,17 @@
-@import "variables";
-@import "markdown";
-@import "utils";
-@import "article";
-@import "landing-page";
-@import "top-bar";
-@import "menu";
-@import "shortcodes";
-@import "syntax";
-@import "search-widget";
-@import "graphql-playground-widget";
-@import "breadcrumbs";
-@import "blog";
-@import "toc";
+@import 'variables';
+@import 'markdown';
+@import 'utils';
+@import 'article';
+@import 'landing-page';
+@import 'top-bar';
+@import 'menu';
+@import 'shortcodes';
+@import 'syntax';
+@import 'search-widget';
+@import 'graphql-playground-widget';
+@import 'breadcrumbs';
+@import 'blog';
+@import 'toc';
 
 html {
     font-size: $font-size-base;
@@ -64,9 +64,21 @@ img {
 ul.pagination {
     display: flex;
     justify-content: center;
+    list-style-type: none;
 
     .page-item a {
-        padding: $padding-16;
+        padding: $padding-8 $padding-16;
+        border: 1px solid $gray-200;
+        border-radius: 3px;
+    }
+    .page-item.active a {
+        background-color: $gray-200;
+    }
+    .page-item.disabled a {
+        color: $gray-500;
+    }
+    li + li {
+        margin-left: $padding-4;
     }
 }
 
@@ -217,13 +229,13 @@ ul.contents-list {
             height: 24px;
             margin-right: 6px;
         }
-
     }
     .copyright {
         font-size: 12px;
         text-align: center;
     }
-    a:link, a:visited {
+    a:link,
+    a:visited {
         color: $gray-500;
         transition: color 0.2s;
     }

docs/layouts/blog/list.html

@@ -10,6 +10,10 @@
         <h5>
             <strong>{{ .Date.Format "January 2, 2006" }}</strong>
         </h5>
+        {{$featured_image := index (.Params.images) 0}}
+        {{ with $featured_image }}
+            <img src="{{ $featured_image }}" class="featured-image">
+        {{ end }}
         <p>
             {{- .Summary -}}
             {{ if .Truncated }}