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:
2026-05-21 01:22:13 +03:00
parent 0c3e248ccc
commit 9a6f07d302
7 changed files with 631 additions and 179 deletions

View File

@@ -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>