neurosite: добавить UnoCSS (unocss 66.10, uno.config.ts, макет на utility-классах)

This commit is contained in:
neo committed 2026-09-07 11:23:23 +05:00
1 parent cafef9b2a6
commit 08863fb819
7 files changed
+325 -42

No files matched your search

+27 -31
View File
@@ -73,7 +73,8 @@ const orgSchema = JSON.stringify({
{articleSchema && <script type="application/ld+json" set:html={articleSchema}></script>}
<script type="application/ld+json" set:html={orgSchema}></script>
<style is:global>
<!-- UnoCSS (virtual:uno.css — генерируется @unocss/astro) -->
<style>
:root{
--bg:#0d0f1a;
--text:#e6e8f0;
@@ -87,14 +88,8 @@ const orgSchema = JSON.stringify({
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
.container{max-width:960px;margin:0 auto;padding:20px}
header{padding:20px 0;border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;transition:color .2s}
nav a:hover{color:var(--accent2)}
nav .brand{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.5px}
nav .brand span{color:var(--accent)}
nav .search-spacer{margin-left:auto}
/* Типографика контента (markdown) — остаётся в CSS, т.к. генерится из .md */
article{margin:32px 0;padding:32px;background:var(--card);border-radius:var(--radius);border:1px solid var(--border)}
article h1{font-size:32px;margin-bottom:16px;line-height:1.2;letter-spacing:-.5px}
article h2{font-size:22px;margin:28px 0 12px;color:var(--text)}
@@ -105,19 +100,18 @@ const orgSchema = JSON.stringify({
article strong{color:var(--text)}
article a{color:var(--accent2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
article a:hover{border-bottom-color:var(--accent2)}
article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
article th,article td{border:1px solid var(--border);padding:8px 12px;text-align:left}
article th{background:var(--card2);color:var(--text)}
article td{color:#cdd2e0}
code{background:var(--card2);padding:2px 6px;border-radius:4px;font-size:.9em;color:#e0b0ff}
pre{background:var(--card2);padding:16px;border-radius:8px;overflow-x:auto;margin:16px 0;border:1px solid var(--border)}
pre code{background:none;padding:0;color:#c9d4ff}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0}
.card{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:18px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card h3{margin-bottom:8px;font-size:16px}
.card p{font-size:14px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:20px;background:var(--accent);color:#fff;margin-right:6px}
.badge.t{background:#6d5efc}.badge.i{background:#f72585}.badge.a{background:#38d9a9}.badge.v{background:#ff9f1c}
.related{margin-top:32px;padding:20px;background:var(--card2);border-radius:var(--radius);border:1px solid var(--border)}
.related a{display:block;padding:6px 0;color:var(--accent2)}
footer{text-align:center;padding:40px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--border);margin-top:40px}
/* Бейджи: модификаторы типов (класс "badge t" — два отдельных класса, UnoCSS не матчит) */
.badge.t{background:var(--accent)}.badge.i{background:#f72585}.badge.a{background:#38d9a9}.badge.v{background:#ff9f1c}
/* Pagefind UI — переопределение на тёмную тему */
.search-bar{position:relative}
.search-bar input{padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card2);color:var(--text);width:220px;font-size:14px}
.search-bar input:focus{outline:none;border-color:var(--accent)}
@@ -130,22 +124,24 @@ const orgSchema = JSON.stringify({
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<a href="/" class="brand">🤖 нейросети<span>.рус</span></a>
<a href="/examples/">Примеры</a>
<a href="/models/">Модели</a>
<a href="/compare/">Сравнения</a>
<a href="/news/">Новости</a>
<a href="/guide/">Гайды</a>
<a href="/ace-studio/">Ace Studio</a>
<span class="search-spacer"></span>
<div class="container max-w-960px mx-auto px-20px">
<header class="py-20px border-b border-border">
<nav class="flex items-center gap-16px flex-wrap">
<a href="/" class="brand text-18px font-800 text-text tracking--0.5px">
🤖 нейросети<span class="text-accent">.рус</span>
</a>
<a href="/examples/" class="text-muted no-underline font-600 text-14px transition-colors hover:text-accent2">Примеры</a>
<a href="/models/" class="text-muted no-underline font-600 text-14px transition-colors hover:text-accent2">Модели</a>
<a href="/compare/" class="text-muted no-underline font-600 text-14px transition-colors hover:text-accent2">Сравнения</a>
<a href="/news/" class="text-muted no-underline font-600 text-14px transition-colors hover:text-accent2">Новости</a>
<a href="/guide/" class="text-muted no-underline font-600 text-14px transition-colors hover:text-accent2">Гайды</a>
<a href="/ace-studio/" class="text-muted no-underline font-600 text-14px transition-colors hover:text-accent2">Ace Studio</a>
<span class="ml-auto"></span>
<div class="search-bar" id="search"></div>
</nav>
</header>
<slot />
<footer>
<footer class="text-center py-40px text-muted text-13px border-t border-border mt-40px">
<p>© 2026 нейросети.рус — витрина реальных результатов локальных open-source моделей</p>
</footer>
</div>