striker/anotherreflections-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): добавлен характер — hero, цветные миры, карточки с акцентами

Browse Source 
- 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:
striker
2026-05-21 01:22:13 +03:00
parent 0c3e248ccc
commit 9a6f07d302
7 changed files with 631 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/layouts/BaseLayout.astro
View File

@@ -1,6 +1,7 @@
---
import '../styles/global.css';
import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL, SITE_LANG, MAIN_NAV } from '../consts';
import BrandMark from '../components/BrandMark.astro';
interface Props {
title?: string;
@@ -21,6 +22,7 @@ const year = new Date().getFullYear();
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{pageTitle}</title>
<meta name="description" content={pageDesc} />
<meta name="theme-color" content="#07090f" />
<link rel="canonical" href={canonical} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -35,14 +37,16 @@ const year = new Date().getFullYear();
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Lora:wght@500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Cormorant+Garamond:wght@500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<header class="site-header">
<div class="site-header-inner">
<div>
<h1 class="site-title"><a href="/">{SITE_TITLE}</a></h1>
<span class="site-tagline">{SITE_DESCRIPTION}</span>
<div class="site-brand">
<a href="/" style="display:inline-flex;align-items:center;gap:.7rem;border-bottom:none;">
<BrandMark size={32} />
<h1 class="site-title"><span>{SITE_TITLE}</span></h1>
</a>
</div>
<nav>
<ul class="site-nav">
@@ -59,7 +63,9 @@ const year = new Date().getFullYear();
</main>
<footer class="site-footer">
<p>© 2006–{year} {SITE_TITLE} · <a href="/feed.xml">RSS</a> · <a href="/sitemap-index.xml">Sitemap</a></p>
<span class="footer-ornament"></span>
<p>© 2006–{year} · {SITE_TITLE}</p>
<p><a href="/feed.xml">RSS</a> · <a href="/sitemap-index.xml">Sitemap</a></p>
</footer>
</body>
</html>