Footer and pagination styles

fmatrixch · Oct 6, 2017 · 45eb6fd · 45eb6fd
1 parent 576b438
commit 45eb6fd
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -47,6 +47,11 @@ $footnote-link-background-over-color: $oc-gray-1;
 $selection-color: $oc-black;
 $selection-background-color: $oc-gray-1;
 
+$pagination-color: $oc-gray-6;
+$pagination-over-color: $oc-gray-7;
+
+$footer-border-color: $oc-gray-2;
+$footer-background-color: $oc-gray-1;
 
 // List
 $li-bottom-space: 0.4em;

diff --git a/index.html b/index.html
@@ -29,18 +29,18 @@ <h1>
 </div>
 
 <div class="pagination">
-  <span class="pagination-prev">
-    {% if paginator.previous_page %}
+  {% if paginator.previous_page %}
+    <span class="prev">
       <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="prev">
-       Previous
+        &#xE000; PREVIOUS
       </a>
-    {% endif %}
-  </span>
-  <span class="pagination-next">
-    {% if paginator.next_page %}
+    </span>
+  {% endif %}
+  {% if paginator.next_page %}
+    <span class="next">
       <a href="{{ site.baseurl}}{{ paginator.next_page_path }}" class="next">
-        Next
+        NEXT &#xE001;
       </a>
-    {% endif %}
-  </span>
+    </span>
+  {% endif %}
 </div>
diff --git a/style.scss b/style.scss
@@ -77,7 +77,7 @@ p {
 a {
   color: $link-color;
   text-decoration: none;
-	cursor: pointer;
+  cursor: pointer;
   &:hover, &:active {
     color: $link-color;
   }
@@ -429,11 +429,36 @@ nav {
   }
 }
 
+.pagination {
+  font-weight: 300;
+  padding: 2em 0;
+
+  > .prev {
+    float: left;
+    a {
+      color: $pagination-color;
+      &:hover, &:focus {
+        color: $pagination-over-color;
+      }
+    }
+  }
+
+  > .next {
+    float: right;
+    a {
+      color: $pagination-color;
+      &:hover, &:focus {
+        color: $pagination-over-color;
+      }
+    }
+  }
+}
+
 .wrapper-footer {
   margin-top: 50px;
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  background-color: $lightGray;
+  border-top: 1px solid $footer-border-color;
+  border-bottom: 1px solid $footer-border-color;
+  background-color: $footer-background-color;
 }
 
 footer {