72 lines
No EOL
1.3 KiB
Svelte
72 lines
No EOL
1.3 KiB
Svelte
<script>
|
|
import GlitchText from './GlitchText.svelte';
|
|
import CRTScreen from './CRTScreen.svelte';
|
|
import { formatDate } from '../utils/date.js';
|
|
|
|
export let post = {
|
|
slug: '',
|
|
title: '',
|
|
excerpt: '',
|
|
date: '',
|
|
author: ''
|
|
};
|
|
</script>
|
|
|
|
<CRTScreen class="blog-card">
|
|
<div class="card-content">
|
|
<h3 class="card-title">
|
|
<GlitchText text={post.title} size="1.2rem" />
|
|
</h3>
|
|
|
|
<p class="card-excerpt">{post.excerpt}</p>
|
|
|
|
<div class="card-meta">
|
|
<span class="card-date">{formatDate(post.date)}</span>
|
|
<span class="card-author">by {post.author}</span>
|
|
</div>
|
|
|
|
<div class="card-actions">
|
|
<a href={`/blog/${post.slug}`} class="read-more">Читать →</a>
|
|
</div>
|
|
</div>
|
|
</CRTScreen>
|
|
|
|
<style>
|
|
.blog-card {
|
|
margin-bottom: 20px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.blog-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0 0 10px 0;
|
|
color: #33ff00;
|
|
}
|
|
|
|
.card-excerpt {
|
|
color: #ccc;
|
|
line-height: 1.4;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.9rem;
|
|
color: #888;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.read-more {
|
|
color: #ff00ff;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.read-more:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style> |