Make pagination look nice

_includes/pagination.html

-<nav aria-label="Page navigation">
-  <ul class="pagination">
+{% comment %}
+    Renders a pagination element. 
+    Expects the default jekyll 'paginator' as argument. 
+{% endcomment %}
+
+<ul class="pagination">
+    
+    <!-- The previous page -->
     {% if paginator.previous_page %}
-    <li>
-      <a href="{{ site.baseurl }}{{paginator.previous_page_path}}" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
-      </a>
-    </li>
+        <li class="waves-effect">
+            <a href="{{ site.baseurl }}{{paginator.previous_page_path}}">
+                <i class="material-icons">chevron_left</i>
+            </a>
+        </li>
     {% else %}
-    <li class="disabled" >
-        <a href="#" aria-label="Previous">
-        <span aria-hidden="true">&laquo;</span>
-      </a>
-    </li>
-    {% endif %}
-    {% if paginator.page > 4 %}
-        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: 'page:num/', '' }}">1</a></li>
-        {% if paginator.page > 5 %}
-        <li class="disabled" ><a href="#" >...</a></li>
-        {% endif %}
+        <li class="disabled">
+            <a href="#!">
+                <i class="material-icons">chevron_left</i>
+            </a>
+        </li>
     {% endif %}
-    {% assign min_index = paginator.page | minus:3 %}
-    {% assign max_index = paginator.page | plus:3 %}
-    {% for p in (min_index..max_index) %}
-        {% if p > 0 and p <= paginator.total_pages %}
-            <li {% if p == paginator.page %} class="active" {% endif %}>
-            {% if p == 1 %}
-                <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: 'page:num/', '' }}">1</a>
-            {% else %}
-                <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', p }}">{{ p }}</a>
-            {% endif %}
+    
+    <!-- Show all the pages -->
+    {% for page in (1..paginator.total_pages) %}
+        {% if page == paginator.page %}
+            <li class='active'>
+                <a href="#!">
+                    {{page}}
+                </a>
+            </li>
+        {% elsif page == 1 %}
+            <li class="waves-effect">
+                <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">
+                    {{page}}
+                </a>
+            </li>
+        {% else %}
+            <li class="waves-effect">
+                <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">
+                    {{page}}
+                </a>
             </li>
         {% endif %}
     {% endfor %}
-    {% if max_index < paginator.total_pages %}
-        {% assign max_indexp = max_index | plus:1 %}
-        {% if max_indexp < paginator.total_pages %}
-        <li class="disabled" ><a href="#" >...</a></li>
-        {% endif %}
-        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', paginator.total_pages }}">{{ paginator.total_pages }}</a></li>
-    {% endif %}
+    
+    
+    <!-- The next page -->
     {% if paginator.next_page %}
-    <li>
-      <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" aria-label="Next">
-        <span aria-hidden="true">&raquo;</span>
-      </a>
-    </li>
+        <li class="waves-effect">
+            <a href="{{ site.baseurl }}{{paginator.next_page_path}}">
+                <i class="material-icons">chevron_right</i>
+            </a>
+        </li>
     {% else %}
-    <li class="disabled" >
-      <a href="#" aria-label="Next">
-        <span aria-hidden="true">&raquo;</span>
-      </a>
-    </li>
+        <li class="disabled">
+            <a href="#!">
+                <i class="material-icons">chevron_right</i>
+            </a>
+        </li>
     {% endif %}
-  </ul>
-</nav>
-
-
-
-
-
+    
+</ul>
\ No newline at end of file

index.md

@@ -14,10 +14,8 @@ This level of markup allows for offering interesting [knowledge management servi
 
 ## Recent News ([see all](/news/posts/))
  
-{% for post in site.posts %}
-    {% if forloop.index < 5 %}
+{% for post in site.posts limit:5 %}
 	{% include post_link.html %}
-    {% endif %}
 {% endfor %}
 
 <p>&copy; {{ site.time | date: '%Y' }}. All rights reserved.</p>

public/css/main.css

@@ -32,7 +32,10 @@ h1, h2, h3, h4, h5, h6 {
 
 
 /* background color */
-.page-footer, nav, .side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+.page-footer, 
+nav, .side-nav .collapsible-body > ul:not(.collapsible) > li.active, 
+.side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active,
+.pagination li.active {
   background-color: #5B78FD;
 }