fix width of the page navigation

layouts/_default/list.html

@@ -16,7 +16,7 @@
         </section>
         <div class="gblog-post__readmore">
             {{ if .Truncated }}
-            <a class="flex-inline align-center" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
+            <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
             {{ end }}
         </div>
 

layouts/partials/pagination.html

@@ -1,15 +1,15 @@
 {{ $pag := $.Paginator }}
 
-<nav class="gblog-paging flex justify-between align-center " role="navigation">
-    <div class="gblog-paging__button is-next">
+<nav class="gblog-paging flex flex-even align-center " role="navigation">
+    <div class="gblog-paging__item gblog-paging__item--next">
     {{ if $pag.HasPrev }}
-        <a class="gblog-paging__link" href="{{ $pag.Prev.URL }}">&larr; Newer posts</a>
+        <a class="flex-inline align-center fake-link" href="{{ $pag.Prev.URL }}">Newer posts</a>
     {{ end }}
     </div>
     <div class="gblog-paging__state">Page {{ $pag.PageNumber }} of {{ $pag.TotalPages }}</div>
-    <div class="gblog-paging__button is-prev">
+    <div class="gblog-paging__item gblog-paging__item--prev">
     {{ if $pag.HasNext }}
-        <a class="gblog-paging__link" href="{{ $pag.Next.URL }}">Older posts &rarr;</a>
+        <a class="flex-inline align-center fake-link" href="{{ $pag.Next.URL }}">Older posts</a>
     {{ end }}
     </div>
 </nav>

src/iconfont/uEA16-arrow_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="-6.67 -6.67 45.33 45.33"><path d="M7.954 17.965v5.988L.001 16l7.953-7.953v5.988H32v3.93H7.954z"/></svg>

src/icons/arrow_left.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow_left</title>
+<path d="M7.954 17.965v5.988l-7.953-7.953 7.953-7.953v5.988h24.046v3.93h-24.046z"></path>
+</svg>

src/sass/_base.scss

@@ -67,6 +67,14 @@ img {
   vertical-align: middle;
 }
 
+.fake-link {
+  background-image: linear-gradient($color-link, $color-link);
+  background-position: 0 100%;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  text-decoration: none;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -209,17 +217,9 @@ img {
   &__readmore {
     margin: 1.5rem 0 $padding-32 0;
 
-    a {
-      background-image: linear-gradient($color-link, $color-link);
-      background-position: 0 100%;
-      background-size: 100% 1px;
-      background-repeat: no-repeat;
-      text-decoration: none;
-
-      &:after {
-        font-family: GeekblogIcons;
-        content: "\ea02";
-      }
+    a:after {
+      font-family: GeekblogIcons;
+      content: "\ea02";
     }
   }
 
@@ -296,6 +296,28 @@ img {
 
 .gblog-paging {
   padding: $padding-16 0;
+
+  &__item {
+    flex: 1 1 0;
+
+    &--prev {
+      text-align: right;
+
+      a:after {
+        font-family: GeekblogIcons;
+        content: "\ea02";
+      }
+    }
+
+    &--next {
+      text-align: left;
+
+      a::before {
+        font-family: GeekblogIcons;
+        content: "\ea16";
+      }
+    }
+  }
 }
 
 .gblog-error {