Custom Jekyll pagination

custom-jekyll-pagination

{% if paginator.total_pages > 1 %}

  {% assign start = paginator.page | minus: 2 %}
  {% assign end = paginator.page | plus: 2 %}

  {% if start < 1 %}
    {% assign start = 1 %}
    {% assign end = start | plus: 4 %}
  {% elsif end > paginator.total_pages %}
    {% assign start = paginator.total_pages | minus: 4 %}
    {% assign end = paginator.total_pages %}
  {% endif %}

  {% if start < 1 %}
    {% assign start = 1 %}
  {% endif %}

  {% if end > paginator.total_pages %}
    {% assign end = paginator.total_pages %}
  {% endif %}

  <div class="pagination-wrapper">
    <div class="pagination">
      {% if paginator.previous_page %}
        <a class="pagination-step" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">
          Newer
        </a>
      {% else %}
        <span class="pagination-step">
          Newer
        </span>
      {% endif %}

      {% if start > 1 %}
        <a class="pagination-first" href="{{ site.baseurl }}/">1</a>
        <span class="pagination-more">&middot;&middot;&middot;</span>
      {% endif %}

      {% for page in (start..end) %}
        {% if page == paginator.page %}
          <span class="active">{{ page }}</span>
        {% elsif page == 1 %}
          <a href="{{ site.baseurl }}/">{{ page }}</a>
        {% else %}
          <a href="{{ site.baseurl }}/page-{{ page }}">{{ page }}</a>
        {% endif %}
      {% endfor %}

      {% if end < paginator.total_pages %}
        <span class="pagination-more">&middot;&middot;&middot;</span>
        <a class="pagination-last" href="{{ site.baseurl }}/page-{{ paginator.total_pages }}">{{ paginator.total_pages }}</a>
      {% endif %}

      {% if paginator.next_page %}
        <a class="pagination-step" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">
          Older
        </a>
      {% else %}
        <span class="pagination-step">
          Older
        </span>
      {% endif %}
    </div>
  </div>
{% endif %}

custom-jekyll-pagination.css

.pagination-wrapper {
  text-align: center;
}

.pagination {
  display: inline-block;
  margin: 0 0 2rem;
}

.pagination a,
.pagination span {
  border-radius: 3px;
  float: left;
  height: 36px;
  line-height: 36px;
  width: 30px;
}

a.pagination-step,
span.pagination-step {
  padding: 0 10px;
  width: auto;
}

.pagination-first,
.pagination-last,
.pagination-more, {
  display: none;
}

.pagination .active {
  background: #ddd;
  color: #fff;
}

@media (min-width: 38em) {
  .pagination-first,
  .pagination-last,
  .pagination-more {
    display: block;
  }

  a.pagination-step,
  span.pagination-step {
    padding: 0 15px;
    width: auto;
  }
}

Thanks for answering my query @Stanko.
By the way yo really have a cool Blog with a funky name.
Really cool of you to respecting visitor's privacy and ditching Google for GoatCounter. And what's way more cool is you are now sponsoring the project. Kudos.

Among other things I made my own electric guitar.

A picture of that guitar somewhere on your Blog would be nice.
There is one thing that your blog doesn't have. Contact option. It most likely is intentional. Think about it. It will be great if you can provide a way for visitors of your Blog to contact you.

Cheers!!!