feat(design): добавлен характер — hero, цветные миры, карточки с акцентами
- Hero на главной: большой заголовок в градиенте, мистический тэглайн, мета-плашка «N миров / N публикаций / N лет онлайн» - Декоративный фон: звёздная россыпь + радиальные градиенты акцента (CSS-only, без картинок) - Карточки постов с цветовой полосой по категории + hover-эффект - Цветные теги категорий с glow-точкой - «Миры и проекты» вместо «Форумы»: 8 карточек с тэгом, названием, описанием каждой вселенной и цветовой кодировкой - Single post: буквица в первом абзаце, центрированный заголовок в градиенте, тег категории сверху - BrandMark SVG (две зеркальные арки) + липкая шапка с blur - Cormorant Garamond вместо Lora — больше серифной выразительности - CATEGORY_COLORS в consts.ts (расширяемая палитра) - Mobile-адаптация (clamp заголовки, перенос меты, уменьшенные паддинги)
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { CATEGORY_COLORS } from '../consts';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('posts');
|
||||
@@ -17,24 +18,26 @@ const { Content } = await render(entry);
|
||||
const fmtDate = (d: Date) =>
|
||||
d.toLocaleDateString('ru-RU', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
---
|
||||
<BaseLayout title={entry.data.title} description={kind === 'post' ? entry.data.description : undefined} ogType={kind === 'post' ? 'article' : 'website'}>
|
||||
<BaseLayout
|
||||
title={entry.data.title}
|
||||
description={kind === 'post' ? entry.data.description : undefined}
|
||||
ogType={kind === 'post' ? 'article' : 'website'}
|
||||
>
|
||||
<article class="post">
|
||||
<header>
|
||||
{kind === 'post' && entry.data.categories.length > 0 && (
|
||||
<a
|
||||
href={`/category/${entry.data.categorySlugs[0]}/`}
|
||||
class="cat-tag"
|
||||
style={`--cat-color: ${CATEGORY_COLORS[entry.data.categorySlugs[0]] ?? 'var(--accent)'}`}
|
||||
>
|
||||
{entry.data.categories[0]}
|
||||
</a>
|
||||
)}
|
||||
<h1>{entry.data.title}</h1>
|
||||
{kind === 'post' && (
|
||||
<div class="post-meta">
|
||||
<time datetime={entry.data.pubDate.toISOString()}>{fmtDate(entry.data.pubDate)}</time>
|
||||
{entry.data.categories.length > 0 && (
|
||||
<>
|
||||
{' · '}
|
||||
{entry.data.categories.map((cat, i) => (
|
||||
<>
|
||||
{i > 0 && ', '}
|
||||
<a href={`/category/${entry.data.categorySlugs[i]}/`}>{cat}</a>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
@@ -45,7 +48,7 @@ const fmtDate = (d: Date) =>
|
||||
|
||||
{kind === 'post' && (
|
||||
<nav class="pagination">
|
||||
<a href="/">← Все новости</a>
|
||||
<a href="/">← Вернуться в хронику</a>
|
||||
</nav>
|
||||
)}
|
||||
</BaseLayout>
|
||||
|
||||
Reference in New Issue
Block a user