notes.html

---
layout: default
title: Notes
permalink: /
---
<section>
  <div class="container max-w-5xl mx-auto px-4">
    <div class="grid gap-4 mx-4 sm:grid-cols-12">
      <div class="col-span-12 sm:col-span-3">
        <div class="text-center sm:text-left mb-7 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:bg-gradient-to-r from-cyan-500 to-blue-500">
          <h3 class="text-2xl font-semibold">Tags</h3>
        </div>
        <div class="mb-7 col-span-12 sm:col-span-9 flex justify-center">
          <div class="flex flex-wrap">
            {% for tag in site.tags %}
              <span class="mb-2 px-2">
                <a class="-mx-1.5 -my-1 flex items-center gap-3 rounded-lg px-1.5 py-1 text-[0.8125rem] font-semibold leading-6 text-gray-100 transition hover:bg-slate-900/[0.03]" href="{{ item.link }}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 fill-gray-500">
                    <path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v2.879a2.5 2.5 0 0 0 .732 1.767l4.5 4.5a2.5 2.5 0 0 0 3.536 0l2.878-2.878a2.5 2.5 0 0 0 0-3.536l-4.5-4.5A2.5 2.5 0 0 0 7.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                  </svg>
                  {{ tag[0] }}
                </a>
              </span>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
        <div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:bg-stone-400">
          {% for post in site.posts %}
          <div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gradient-to-r from-cyan-500 to-blue-500">
            <a href="{{ post.url }}">
              <h3 class="text-xl leading-8 font-semibold tracking-wide text-gray-100 hover:underline"> {{ post.title }} </h3>
            </a>
            <time class="text-xs tracking-wide uppercase text-gray-600">{{ post.date | date: "%B %d, %Y"}}</time>
            <div class="mt-2 flex items-center">
              {% for tag in post.tags %}
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="size-4 fill-gray-500">
                <path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v2.879a2.5 2.5 0 0 0 .732 1.767l4.5 4.5a2.5 2.5 0 0 0 3.536 0l2.878-2.878a2.5 2.5 0 0 0 0-3.536l-4.5-4.5A2.5 2.5 0 0 0 7.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
              </svg>
              <span class="mx-2 text-sm text-gray-100">
                {{ tag  }}
              </span>
              {% endfor %}
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>