style improvements

_scss/_forms.scss

@@ -2,6 +2,7 @@
   border: 1px solid $accent-color;
   padding: 6px;
   width: 100%;
+  border-radius: $radius;
   &:focus {
       outline: none;
   }

_scss/_globals.scss

@@ -14,6 +14,7 @@ $bg-contrast: #efefef;
 // Dimensions
 $footer-height: 100px;
 $max-width: 600px;
+$radius: 4px;
 
 // Grid
 $small-grid: (

_scss/_layout.scss

@@ -68,6 +68,7 @@ article {
   p code, li code {
     border: 1px #e0e0e0 solid;
     padding: 4px;
+    border-radius: $radius;
   }
 
   blockquote {
@@ -94,8 +95,6 @@ article {
   display: block;
   text-align: center;
   margin-bottom: 120px;
-  height: 1px;
-  line-height: 1px;
 }
 
 .search {
@@ -163,7 +162,7 @@ img {
 footer {
   @include grid-container;
   height: $footer-height;
-  background-color: #414141;
+  background-color: $body-font-color;
   padding-top: 16px;
   p, ul {
     @include page-box;

_scss/_pagination.scss

@@ -1,33 +1,26 @@
 .pager {
   @include grid-container;
-  margin-bottom: 20px;
-  li {
-    list-style: none;
+  margin-bottom: 80px;
+  ul {
+    @include page-box;
+    padding-left: 10px;
+    padding-right: 10px;
+    li {
+      list-style: none;
+      a {
+        background: $body-font-color;
+        padding: 14px;
+        margin: 0;
+        border-radius: $radius;
+      }
+    }
   }
 }
 
-.pager li > a {
-  background: mix(#fafafa, $accent-color, 94%);
-  border: 1px solid $accent-color;
-  padding: 0;
-  margin: 0;
-  height: 40px;
-}
-
 .pager li > a.previous-link {
-  border-left: 0;
   float: left;
-  i {
-    padding-right: 8px;
-    padding-left: 30px;
-  }
 }
 
 .pager li > a.next-link {
-  border-right: 0;
   float: right;
-  i {
-    padding-left: 8px;
-    padding-right: 30px;
-  }
 }

_scss/_typography.scss

@@ -137,6 +137,10 @@ h1{
   }
 }
 
+.article-divider {
+  color: $bg-contrast;
+}
+
 pre {
   white-space: pre-wrap;
 }
@@ -196,26 +200,18 @@ kbd {
 }
 
 .pager li > a {
-  color: $accent-color;
-  line-height: 40px;
-  i {
-    line-height: inherit;
-    vertical-align: middle;
-  }
+  color: $body-bg-color;
+  font-family: $font-stack;
+  font-size: 1rem;
+  line-height: 1rem;
+  text-decoration: none;
+  font-weight: 600;
   &:hover {
-    color: $body-font-color;
-    background: $bg-contrast;
+    color: $body-bg-color;
+    background: $accent-color;
   }
 }
 
-.pager li > a.previous-link {
-  text-align: right;
-}
-
-.pager li > a.next-link {
-  text-align: left;
-}
-
 footer {
   i {
     color: $accent-color;

index.html

@@ -18,27 +18,27 @@ <h4><a href="{{ post.link }}" class="link-item">{{ post.title | no_widows }}</a>
   </article>
   {% if post.type == 'post' %}
     <div class="article-divider">
-      <svg height="1" width="300">
-        <line x1="0" y1="0" x2="300" y2="0" style="stroke:#f135a6;stroke-width:1" />
-      </svg>
+      &#9830;&#9830;&#9830;
     </div>
   {% endif %}
 {% endfor %}
 
-<ul class="pager">
-  {% if paginator.previous_page %}
-    <li class="previous">
-      {% if paginator.previous_page == 1 %}
-        <a href="/" class="previous-link"><i class="icon ion-chevron-left"></i></a>
-      {% else %}
-        <a href="{{ paginator.previous_page_path }}/" class="previous-link"><i class="icon ion-chevron-left"></i></a>
-      {% endif %}
-    </li>
-  {% endif %}
+<div class="pager">
+  <ul>
+    {% if paginator.previous_page %}
+      <li class="previous">
+        {% if paginator.previous_page == 1 %}
+          <a href="/" class="previous-link">Prev</a>
+        {% else %}
+          <a href="{{ paginator.previous_page_path }}/" class="previous-link">Prev</a>
+        {% endif %}
+      </li>
+    {% endif %}
 
-  {% if paginator.next_page %}
-    <li class="next">
-      <a href="{{ paginator.next_page_path }}/" class="next-link"><i class="icon ion-chevron-right"></i></a>
-    </li>
-  {% endif %}
-</ul>
+    {% if paginator.next_page %}
+      <li class="next">
+        <a href="{{ paginator.next_page_path }}/" class="next-link">Next</a>
+      </li>
+    {% endif %}
+  </ul>
+</div>