Move pagination to separate partial and style it a bit.

4 files changed, 45 insertions, 15 deletions

diff --git a/blog/_assets/stylesheets/_pagination.scss b/blog/_assets/stylesheets/_pagination.scss
new file mode 100644
index 0000000..7d08dfc
--- /dev/null
+++ b/blog/_assets/stylesheets/_pagination.scss
@@ -0,0 +1,31 @@
+.pagination {
+    padding: {
+        top: 0.5cm;
+        bottom: 0.5cm;
+    }
+
+    .page_number {
+        padding: {
+            top: 1.5mm;
+            bottom: 1.5mm;
+            left: 2mm;
+            right: 2mm;
+        }
+        background-color: $nav-link-hover-bg;
+        color: $nav-link-hover-color;
+    }
+    a {
+        text-decoration: none;
+        color: $link-color;
+        padding: {
+            top: 1.5mm;
+            bottom: 1.5mm;
+            left: 2mm;
+            right: 2mm;
+        }
+        &:hover {
+            background-color: $nav-link-hover-bg;
+            color: $nav-link-hover-color;
+        }
+    }
+}
diff --git a/blog/_assets/stylesheets/main.scss b/blog/_assets/stylesheets/main.scss
index af5d134..23a1fe8 100644
--- a/blog/_assets/stylesheets/main.scss
+++ b/blog/_assets/stylesheets/main.scss
@@ -2,6 +2,7 @@
 @import "common";
 @import "header";
 @import "navbar";
+@import "pagination";
 
 body {
     background-color: black;
diff --git a/blog/_includes/pagination.html b/blog/_includes/pagination.html
new file mode 100644
index 0000000..061b03f
--- /dev/null
+++ b/blog/_includes/pagination.html
@@ -0,0 +1,10 @@
+<!-- Pagination links -->
+<section class="pagination">
+  <span class="page_number ">{% t home.page_no %} {{ paginator.page }} / {{ paginator.total_pages }}</span>
+  {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="previous">{% t home.prev_page %}</a>
+  {% endif %}
+  {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="next">{% t home.next_page %}</a>
+  {% endif %}
+</section>
diff --git a/blog/index.html b/blog/index.html
index 2ccbbb0..3ed591a 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -19,6 +19,9 @@ layout: default
       </section>
     </article>
   {% endfor %}
+
+  {% include pagination.html %}
+
 </section>
 
 {% if site.links %}
@@ -26,18 +29,3 @@ layout: default
     <h2>{% t home.links %}</h2>
   </section>
 {% endif %}
-
-<!-- Pagination links -->
-<div class="pagination">
-  {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="previous">{% t home.prev_page %}</a>
-  {% else %}
-    <span class="previous">{% t home.prev_page %}</span>
-  {% endif %}
-  <span class="page_number ">{% t home.page_no %} {{ paginator.page }} / {{ paginator.total_pages }}</span>
-  {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="next">{% t home.next_page %}</a>
-  {% else %}
-    <span class="next ">{% t home.next_page %}</span>
-  {% endif %}
-</div>