---
layout: default
title: Blog
---
<div class="flex flex-row flex-wrap items-start">
    {% for post in paginator.posts %}
    <div class="blog-block flex-col break-words transform hover:bg-gray-900 max-w-sm
                justify-start" style="cursor: pointer;" onclick="window.location='{{ post.url }}'">
        <img src="{{ post.thumbnail }}" class="max-h-56" alt="thumbnail">
        <a class="text-xl text-white mt-2 border-b pb-1 hover:underline">{{ post.title }}</a>
        <a class="text-lg text-gray-400 pt-2">{{ post.description }}</a>
        <div>
          {% for category in post.categories %}
            <a class="text-gray-400 pt-1">{{ category }}</a>
          {% endfor %}
        </div>
        <a class="text-datesearch text-sm">{{ post.date | date: "%-d %B %Y" }} 	&#9679; {{ post.readtime }} read</a>
    </div>
  {% endfor %}
</div>

<!-- Pagination links -->
<div class="pagination pb-8">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" class="previous">
      Previous
    </a>
  {% else %}
    <span class="previous">Previous</span>
  {% endif %}
  <span class="page_number ">
    Page: {{ paginator.page }} of {{ paginator.total_pages }}
  </span>
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}" class="next">Next</a>
  {% else %}
    <span class="next ">Next</span>
  {% endif %}
</div>

<style>
.pagination a, .pagination span {
    padding: 7px 18px;
    margin-left: -2px;
    margin-right: -2px;
    background-color: #1f1d29;
    color: #eee;
    display: inline-block;
  }

.pagination {
    text-align: center;
 }
</style>