Improve pagination styling

_includes/paginator.html

@@ -6,15 +6,17 @@
     {% comment %} Link for previous page {% endcomment %}
     {% if paginator.previous_page %}
       {% if paginator.previous_page == 1 %}
-        <li><a href="{{ base_path }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
+        <li><a href="{{ base_path }}/">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
       {% else %}
-        <li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
+        <li><a href="{{ base_path }}/page{{ paginator.previous_page }}/">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
       {% endif %}
+    {% else %}
+      <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous }}</span></a></li>
     {% endif %}
 
-    {% comment %}First page{% endcomment %}
+    {% comment %} First page {% endcomment %}
     {% if paginator.page == 1 %}
-      <li><strong class="current">1</strong></li>
+      <li><a href="#" class="disabled current">1</a></li>
     {% else %}
       <li><a href="{{ base_path }}/">1</a></li>
     {% endif %}
@@ -23,7 +25,7 @@
     {% if paginator.page > 4 %}
       {% assign page_start = paginator.page | minus: 2 %}
       {% comment %} Ellipsis for truncated links {% endcomment %}
-      <li>&hellip;</li>
+      <li><a href="#" class="disabled">&hellip;</a></li>
     {% endif %}
 
     {% assign page_end = paginator.total_pages | minus: 1 %}
@@ -34,32 +36,34 @@
 
     {% for index in (page_start..page_end) %}
       {% if index == paginator.page %}
-        <li><strong class="current">{{ index }}</strong></li>
+        <li><a href="{{ base_path }}/page{{ index }}/" class="disabled current">{{ index }}</a></li>
       {% else %}
-        {% comment %}Distance from current page and this link{% endcomment %}
+        {% comment %} Distance from current page and this link {% endcomment %}
         {% assign dist = paginator.page | minus: index %}
         {% if dist < 0 %}
-          {% comment %}Distance must be a positive value{% endcomment %}
+          {% comment %} Distance must be a positive value {% endcomment %}
           {% assign dist = 0 | minus: dist %}
         {% endif %}
         <li><a href="{{ base_path }}/page{{ index }}/">{{ index }}</a></li>
       {% endif %}
     {% endfor %}
 
-    {% comment %}Ellipsis for truncated links{% endcomment %}
+    {% comment %} Ellipsis for truncated links {% endcomment %}
     {% if pages_to_end > 3 %}
-      <li>&hellip;</li>
+      <li><a href="#" class="disabled">&hellip;</a></li>
     {% endif %}
 
     {% if paginator.page == paginator.total_pages %}
-      <li><strong class="current">{{ paginator.page }}</strong></li>
+      <li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
     {% else %}
       <li><a href="{{ base_path }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
     {% endif %}
 
-    {% comment %}Link next page{% endcomment %}
+    {% comment %} Link next page {% endcomment %}
     {% if paginator.next_page %}
-      <li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn btn--inverse btn--small">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
+      <li><a href="{{ base_path }}/page{{ paginator.next_page }}/">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
+    {% else %}
+      <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next }}</span></a></li>
     {% endif %}
   </ul>
 </nav>

_includes/post_pagination.html

@@ -1,8 +1,12 @@
 <nav class="pagination">
   {% if page.previous %}
     <a href="{{ base_path }}{{ page.previous.url }}" class="pagination--pager" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
+  {% else %}
+    <a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
   {% endif %}
   {% if page.next %}
     <a href="{{ base_path }}{{ page.next.url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
+  {% else %}
+    <a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_next }}</a>
   {% endif %}
 </nav>

assets/_scss/_navigation.scss

@@ -55,9 +55,8 @@
 .pagination {
   @include full();
   @include clearfix();
-  margin-top: 2em;
+  margin-top: 1em;
-  padding-top: 2em;
+  padding-top: 1em;
-  border-top: 1px solid $border-color;
 
   ul {
     margin: 0;
@@ -68,16 +67,53 @@
   }
 
   li {
-    display: inline-block;
+    display: block;
-  }
+    float: left;
+    margin-left: -1px;
 
-  li + li:before {
+    a {
-    content: "";
+      margin-bottom: 0.25em;
-    padding-right: 10px;
+      padding: 0.5em 1em;
-  }
+      font-family: $sans-serif;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.5;
+      text-align: center;
+      text-decoration: none;
+      color: mix(#fff, $gray, 25%);
+      border: 1px solid $light-gray;
+      border-radius: 0;
 
-  .current {
+      &:hover {
-    font-weight: bold;
+        color: $gray;
+      }
+
+      &.current {
+        color: $primary-color;
+      }
+
+      &.disabled {
+        color: $light-gray;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+
+      a {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      a {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
   }
 
   /* next/previous buttons */
@@ -95,6 +131,7 @@
     color: mix(#fff, $gray, 25%);
     border: 1px solid $light-gray;
     border-radius: $border-radius;
+
     &:hover {
       color: $gray;
     }
@@ -109,9 +146,24 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
+
+    &.disabled {
+      color: $light-gray;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
   }
 }
 
+.page__content + .pagination,
+.page__meta + .pagination,
+.page__share + .pagination,
+.page__comments + .pagination {
+  margin-top: 2em;
+  padding-top: 2em;
+  border-top: 1px solid $border-color;
+}
+
 
 /*
    Priority plus navigation