blog.html

---
layout: page
title: Blog
permalink: blog
---

<div class="not-prose mx-auto grid grid-cols-1 sm:grid-cols-2 gap-10">

  <div class="m-auto w-fit px-4 py-4 bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-lg shadow-lg">
    <h4 class="text-xl text-center font-bold mb-4">Visual Guide</h4>
    <ul class="list-none pl-0 space-y-2">
      <li class="mb-2 flex items-center">
        <i class="fas fa-newspaper text-2xl mr-4"></i>
        <span class="text-l">Informative piece</span>
      </li>
      <li class="mb-2 flex items-center">
        <i class="fas fa-mug-hot text-2xl mr-4"></i>
        <span class="text-l">Short read</span>
      </li>
      <li class="mb-2 flex items-center">
        <i class="fas fa-hammer text-2xl mr-4"></i>
        <span class="text-l">Demo / DIY</span>
      </li>
    </ul>
  </div>

  {% for post in site.posts %}

  <div class="flex flex-row md:max-w-lg rounded-lg bg-white shadow-lg transition ease-in-out hover:scale-[1.1]">

    <div class="w-[100%] h-fit px-4 py-4 flex flex-row justify-start items-start overflow-hidden">
      <div class="flex-grow">
        <a class="w-full flex flex-row justify-between" href={{site.baseurl}}{{ post.url }}>
          <h5 class="text-blue-900 text-md font-mono font-medium mb-2 hover:text-blue-300">{{ post.title }}</h5>
          {% if post.icon %}
          <i class="{{ post.icon }} text-blue-200 text-4xl px-4"></i>
          {% endif %}
        </a>
        <p class="text-gray-600 text-xs "> {{post.date | date: "%B %-d, %Y"}} </p>
        <div class="px-2 py-2 text-sm">
          <p class="text-gray-700">
            {{ post.content | strip_html | truncatewords: 15 }}
          </p>
        </div>
      </div>
    </div>


  </div>
  {% endfor %}
</div>