style: 💄 Use white on dark background for next/previous page (#125)

Author: mattboll

site/layouts/blog/single.html

@@ -64,7 +64,7 @@ <h2>{{ .Title }}</h2>
 
 
                     <div class="back">
-                        <div class="pagination">
+                        <div class="pagination black">
                             {{ if .NextInSection }}
                             <a href="{{ .NextInSection.Permalink }}" class="previous-page">
                                 <div class="arrow">{{ partial "arrow_left.html" . }}</div>

src/css/_pagination.scss

@@ -1,23 +1,33 @@
 @import 'variables';
 
-.pagination{
+.pagination {
   padding-top: 1rem;
   padding-bottom: 3rem;
-  @include arrows($grey, -0.33rem, 3px);
+  @include arrows($white, -0.33rem, 3px);
+  &.black {
+    @include arrows($black, -0.33rem, 3px);
+  }
   font-family: "Montserrat Light", "Helvetica Neue", Arial, sans-serif;
   .next-page{
     float: right;
   }
   a{
-    font-size: 0.8rem;
+    font-size: 0.9rem;
+    color: $white;
+    .black {
+      color: $black;
+    }
     transition: width 1s, margin-left 1s, margin-right 1s;
     .arrow{
       transition: inherit;
       display: inline-block;
       width: 24px;
     }
     &:hover, &:visited{
-      color: $grey;
+      color: $white;
+      .black {
+        color: $black;
+      }
       .arrow{
         width: 32px;
       }