Improve rendering of pagination pagers (#893)

Merge pull request 893

Author: ashmaroli

_layouts/home.html

@@ -42,20 +42,26 @@ <h3>
       <div class="pager">
         <ul class="pagination">
         {%- if paginator.previous_page %}
-          <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">{{ paginator.previous_page }}</a></li>
+          <li>
+            <a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page" title="Go to Page {{ paginator.previous_page }}">
+              {{ paginator.previous_page }}
+            </a>
+          </li>
         {%- else %}
           <li><div class="pager-edge">•</div></li>
         {%- endif %}
           <li><div class="current-page">{{ paginator.page }}</div></li>
         {%- if paginator.next_page %}
-          <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">{{ paginator.next_page }}</a></li>
+          <li>
+            <a href="{{ paginator.next_page_path | relative_url }}" class="next-page" title="Go to Page {{ paginator.next_page }}">
+              {{ paginator.next_page }}
+            </a>
+          </li>
         {%- else %}
           <li><div class="pager-edge">•</div></li>
         {%- endif %}
         </ul>
       </div>
     {%- endif %}
-
   {%- endif -%}
-
 </div>

_sass/minima/_layout.scss

@@ -335,23 +335,36 @@
  * Pagination navbar
  */
 .pagination {
-  margin-bottom: $spacing-unit;
-  @extend .social-media-list;
+  display: table;
+  margin: 0 auto;
+  list-style-type: none;
   li {
+    float: left;
+    margin: 0 3px;
+    min-width: 45px;
+    min-height: 45px;
+    text-align: center;
+    a {
+      display: block;
+      text-decoration: none;
+      border: 1px solid $border-color-01;
+      &:hover { border-color: $border-color-02 }
+    }
     a, div {
       min-width: 41px;
+      padding: 10px 12px;
       text-align: center;
       box-sizing: border-box;
     }
     div {
-      display: block;
-      padding: $spacing-unit * .25;
       border: 1px solid transparent;
-
       &.pager-edge {
         color: $border-color-01;
         border: 1px dashed;
       }
+      &.current-page {
+        font-weight: bold;
+      }
     }
   }
 }