67 lines
2.0 KiB
HTML
67 lines
2.0 KiB
HTML
---
|
|
layout: default
|
|
title: Blog
|
|
---
|
|
|
|
<div class="max-w-4xl mx-auto">
|
|
<h1 class="text-4xl font-bold text-cyan-400 mb-8">// Blog Posts</h1>
|
|
|
|
<div class="space-y-6">
|
|
{% for post in site.posts %}
|
|
<div class="ncurses-box">
|
|
<div class="ncurses-header">
|
|
<span class="text-cyan-400">[{{ post.date | date: "%Y-%m-%d" }}]</span>
|
|
<span class="text-slate-400">//</span>
|
|
<span class="text-cyan-400">{{ post.title }}</span>
|
|
</div>
|
|
<div class="ncurses-content">
|
|
<div class="flex items-center text-sm text-slate-400 mb-4">
|
|
{% if post.categories %}
|
|
<div class="flex space-x-2">
|
|
{% for category in post.categories %}
|
|
<a href="{{ '/categories/' | append: category | relative_url }}" class="text-cyan-400 hover:text-cyan-300">
|
|
{{ category }}
|
|
</a>
|
|
{% unless forloop.last %}, {% endunless %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if post.description %}
|
|
<p class="text-slate-300 mb-4">{{ post.description }}</p>
|
|
{% endif %}
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ post.url | relative_url }}" class="text-cyan-400 hover:text-cyan-300">
|
|
$ read more →
|
|
</a>
|
|
{% if post.tags %}
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for tag in post.tags %}
|
|
<span class="px-2 py-1 bg-slate-800 text-sm text-slate-400 rounded">#{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.ncurses-box {
|
|
@apply border border-slate-700 bg-slate-800 rounded;
|
|
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
|
|
}
|
|
|
|
.ncurses-header {
|
|
@apply border-b border-slate-700 px-4 py-2 flex items-center space-x-2;
|
|
background: linear-gradient(to right, rgba(56, 189, 248, 0.1), transparent);
|
|
}
|
|
|
|
.ncurses-content {
|
|
@apply p-4;
|
|
}
|
|
</style> |