<div class=“pagination clearfix mb1 mt4”>
<div class="left"> {% if paginator.previous_page %} {% if paginator.page == 2 %} <a href="{{ site.baseurl }}/"> <span class="left-circle-arrow"></span> </a> {% else %} <a href="{{ paginator.previous_page_path }}"> <span class="left-circle-arrow"></span> </a> {% endif %} {% else %} <a href=""> <span class="left-circle-arrow arrow-disabled"></span> </a> {% endif %} </div> <div class="right"> {% if paginator.next_page %} <a href="{{ paginator.next_page_path }}"> <span class="right-circle-arrow"></span> </a> {% else %} <a href=""> <span class="right-circle-arrow arrow-disabled"></span> </a> {% endif %} </div>
</div>
<style> a {
display: inline-block; border-radius: 50%;
}
.left-circle-arrow {
background: #000; display: inline-block; width: 4em; height: 4em; border: 0.5em solid #000; border-radius: 50%; margin-right: 1.5em;
}
.left-circle-arrow:after {
content: ''; display: inline-block; margin-top: .2em; margin-right: -1.5em; width: 3.5em; height: 3.5em; border-bottom: 0.3em solid #fff; border-left: 0.3em solid #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.right-circle-arrow {
background: black; display: inline-block; width: 4em; height: 4em; border: 0.5em solid #000; border-radius: 50%; margin-left: 1.5em;
}
.right-circle-arrow:after {
content: ''; display: inline-block; margin-top: .2em; margin-left: -1.5em; width: 3.5em; height: 3.5em; border-top: 0.3em solid #fff; border-right: 0.3em solid #fff; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.arrow-disabled {
background: WhiteSmoke; border-color: WhiteSmoke;
}
</style>