Add webtui, tailwind and biome
This commit is contained in:
Nikita Pozdniakov
@@ -1,5 +1,9 @@
|
|||||||
// @ts-check
|
// @ts-check
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
|
||||||
// https://astro.build/config
|
export default defineConfig({
|
||||||
export default defineConfig({});
|
vite: {
|
||||||
|
plugins: [tailwindcss()]
|
||||||
|
}
|
||||||
|
});
|
||||||
34
biome.json
Normal file
34
biome.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
|
||||||
|
"vcs": {
|
||||||
|
"enabled": true,
|
||||||
|
"clientKind": "git",
|
||||||
|
"useIgnoreFile": true
|
||||||
|
},
|
||||||
|
"files": {
|
||||||
|
"includes": ["**", "!!**/dist"]
|
||||||
|
},
|
||||||
|
"formatter": {
|
||||||
|
"enabled": true,
|
||||||
|
"indentStyle": "tab"
|
||||||
|
},
|
||||||
|
"linter": {
|
||||||
|
"enabled": true,
|
||||||
|
"rules": {
|
||||||
|
"recommended": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"javascript": {
|
||||||
|
"formatter": {
|
||||||
|
"quoteStyle": "double"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"assist": {
|
||||||
|
"enabled": true,
|
||||||
|
"actions": {
|
||||||
|
"source": {
|
||||||
|
"organizeImports": "on"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -15,6 +15,12 @@
|
|||||||
"preinstall": "node ./scripts/enforce-pnpm.mjs"
|
"preinstall": "node ./scripts/enforce-pnpm.mjs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^5.16.10"
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
|
"@webtui/css": "^0.1.7",
|
||||||
|
"astro": "^6.1.8",
|
||||||
|
"tailwindcss": "^4.2.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@biomejs/biome": "2.4.13"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
16
src/layouts/Layout.astro
Normal file
16
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
import "../styles/global.css";
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="ru" data-webtui-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>NikitaPozd Dev</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
749
src/pages/demo.astro
Normal file
749
src/pages/demo.astro
Normal file
@@ -0,0 +1,749 @@
|
|||||||
|
---
|
||||||
|
// src/pages/index.astro
|
||||||
|
// Для полноценного проекта лучше вынести WebTUI-импорты в src/styles/global.css
|
||||||
|
// и подключить файл в root layout, но этот single-file макет можно сразу вставить
|
||||||
|
// в Astro для быстрого старта.
|
||||||
|
|
||||||
|
const articles = [
|
||||||
|
{
|
||||||
|
title: "Нативный light/dark без лишнего JS",
|
||||||
|
tag: "CSS / UI",
|
||||||
|
meta: "06.04.2026",
|
||||||
|
desc: "Разбор переключения темы, системных предпочтений и аккуратной деградации интерфейса.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Astro + WebTUI: терминальный UI без боли",
|
||||||
|
tag: "ASTRO / WEBTUI",
|
||||||
|
meta: "02.04.2026",
|
||||||
|
desc: "Как подключить стили, разнести слои и не потерять читаемость в гибридном интерфейсе.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "React-архитектура для pet-проектов",
|
||||||
|
tag: "REACT / TS",
|
||||||
|
meta: "27.03.2026",
|
||||||
|
desc: "Минимальный, но живучий сетап: фичи, shared-слой, UI-кит и понятные контракты.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
title: "UI System",
|
||||||
|
type: "DESIGN SYSTEM",
|
||||||
|
status: "ONLINE",
|
||||||
|
desc: "Компоненты и паттерны для React / Solid с единым visual language.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Lab Notes",
|
||||||
|
type: "BLOG",
|
||||||
|
status: "SYNCED",
|
||||||
|
desc: "Статьи, заметки и эксперименты по фронтенду, DX и интерфейсам.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Experiments",
|
||||||
|
type: "PLAYGROUND",
|
||||||
|
status: "WIP",
|
||||||
|
desc: "Графика, WebGPU, 3D и интерактивные эксперименты.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const contacts = ["GitHub", "Telegram", "Email", "LinkedIn"];
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Никита Поздняков — Frontend Engineer</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Персональный сайт в стилистике Watch Dogs + WebTUI на Astro 6."
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="page-shell">
|
||||||
|
<div class="bg-glow"></div>
|
||||||
|
<div class="bg-grid"></div>
|
||||||
|
|
||||||
|
<header class="topbar box">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="brand-mark" aria-hidden="true"></div>
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">ctOS / profile</div>
|
||||||
|
<div class="brand-title">nikitapozd.dev</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-link nav-link--active" href="#home">Главная</a>
|
||||||
|
<a class="nav-link" href="#articles">Статьи</a>
|
||||||
|
<a class="nav-link" href="#projects">Проекты</a>
|
||||||
|
<a class="nav-link" href="#about">Обо мне</a>
|
||||||
|
<a class="nav-link" href="#contact">Контакты</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="layout">
|
||||||
|
<section id="home" class="hero-grid">
|
||||||
|
<section class="panel hero box">
|
||||||
|
<div class="hero-head">
|
||||||
|
<div>
|
||||||
|
<div class="badge-line">
|
||||||
|
<span is-="badge" variant-="cyan">personal node / online</span>
|
||||||
|
</div>
|
||||||
|
<h1>Никита Поздняков</h1>
|
||||||
|
<p class="hero-text">
|
||||||
|
Фронтенд-разработчик. Делаю быстрые, аккуратные интерфейсы на React,
|
||||||
|
TypeScript, Next.js и Astro. Люблю дизайн-системы, терминальную эстетику и
|
||||||
|
чуть-чуть киберпанка.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="status-card box">
|
||||||
|
<div class="status-row status-row--head">
|
||||||
|
<span>status</span>
|
||||||
|
<span>v0.01</span>
|
||||||
|
</div>
|
||||||
|
<div class="status-row"><span>stack</span><span>React / TS</span></div>
|
||||||
|
<div class="status-row"><span>focus</span><span>DX / UI</span></div>
|
||||||
|
<div class="status-row"><span>mode</span><span>building</span></div>
|
||||||
|
<div class="status-row"><span>location</span><span>remote</span></div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-grid">
|
||||||
|
<article class="stat box"><span>Статьи</span><strong>013</strong></article>
|
||||||
|
<article class="stat box"><span>Проекты</span><strong>008</strong></article>
|
||||||
|
<article class="stat box"><span>Опыт с UI</span><strong>06+</strong></article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button is-="button" variant-="foreground0">Смотреть статьи</button>
|
||||||
|
<button is-="button" variant-="cyan">Открыть проекты</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="side-stack">
|
||||||
|
<section class="panel box tone-lime">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow lime">mission feed</span>
|
||||||
|
<span class="muted">active</span>
|
||||||
|
</div>
|
||||||
|
<div class="mission-list">
|
||||||
|
<div class="mission box">Собрать личный сайт с сильной визуальной системой</div>
|
||||||
|
<div class="mission box">Показать статьи, проекты и стек без визуального шума</div>
|
||||||
|
<div class="mission box">Смешать WebTUI и HUD Watch Dogs в современный лендинг</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel box">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">quick links</span>
|
||||||
|
<span class="muted">sync</span>
|
||||||
|
</div>
|
||||||
|
<div class="link-grid">
|
||||||
|
{contacts.map((item) => (
|
||||||
|
<a class="quick-link box" href="#contact">{item}</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="content-grid">
|
||||||
|
<section id="about" class="panel box">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">about.exe</div>
|
||||||
|
<h2>Обо мне</h2>
|
||||||
|
</div>
|
||||||
|
<span is-="badge" variant-="cyan">profile</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="prose-copy">
|
||||||
|
<p>
|
||||||
|
Мне нравится делать интерфейсы, в которых есть структура, ритм и понятная
|
||||||
|
логика. Люблю, когда дизайн не спорит с контентом, а усиливает его.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Этот макет опирается на спокойную структуру персонального сайта, но сверху
|
||||||
|
добавляет HUD-слои, статусы, терминальные компоненты и акцентные панели в
|
||||||
|
духе ctOS.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tag-grid">
|
||||||
|
{['Next.js', 'TypeScript', 'Design Systems', 'Astro', 'Accessibility', 'Motion'].map((item) => (
|
||||||
|
<span is-="badge" variant-="foreground2">{item}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="articles" class="panel box tone-cyan">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow">articles.log</div>
|
||||||
|
<h2>Последние статьи</h2>
|
||||||
|
</div>
|
||||||
|
<button is-="button" variant-="foreground3">Все записи</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-list">
|
||||||
|
{articles.map((article) => (
|
||||||
|
<article class="article-card box">
|
||||||
|
<div class="card-meta">
|
||||||
|
<span>{article.tag}</span>
|
||||||
|
<span class="accent">{article.meta}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{article.title}</h3>
|
||||||
|
<p>{article.desc}</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects" class="panel box tone-lime">
|
||||||
|
<div class="section-head">
|
||||||
|
<div>
|
||||||
|
<div class="eyebrow lime">projects.map</div>
|
||||||
|
<h2>Избранные проекты</h2>
|
||||||
|
</div>
|
||||||
|
<span class="muted">3 active nodes</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-grid">
|
||||||
|
{projects.map((project) => (
|
||||||
|
<article class="project-card box">
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="accent-lime">{project.type}</span>
|
||||||
|
<span>{project.status}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{project.title}</h3>
|
||||||
|
<p>{project.desc}</p>
|
||||||
|
<div class="project-foot">
|
||||||
|
<span>open</span>
|
||||||
|
<span>→</span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="footer-grid">
|
||||||
|
<section class="panel box">
|
||||||
|
<div class="eyebrow">terminal / broadcast</div>
|
||||||
|
<pre is-="pre" class="terminal-block"><code>> status: available for frontend / ui work
|
||||||
|
> stack: react nextjs typescript astro
|
||||||
|
> interests: design systems webtui webgpu motion</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="panel box tone-cyan">
|
||||||
|
<div class="eyebrow">contact</div>
|
||||||
|
<h2>Давай делать что-то красивое и удобное</h2>
|
||||||
|
<p class="contact-copy">
|
||||||
|
Блог, сайт-портфолио, продуктовый лендинг или внутренняя дизайн-система — этот
|
||||||
|
шаблон можно развить в полноценный персональный сайт.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<button is-="button" variant-="foreground0">Написать мне</button>
|
||||||
|
<button is-="button" variant-="cyan">GitHub</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
@layer base, utils, components;
|
||||||
|
|
||||||
|
@import '@webtui/css/base.css';
|
||||||
|
@import '@webtui/css/utils/box.css';
|
||||||
|
@import '@webtui/css/components/button.css';
|
||||||
|
@import '@webtui/css/components/badge.css';
|
||||||
|
@import '@webtui/css/components/pre.css';
|
||||||
|
@import '@webtui/css/components/typography.css';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background0: #05070a;
|
||||||
|
--background1: #0a0f14;
|
||||||
|
--background2: #10161e;
|
||||||
|
--foreground0: #f4f7fb;
|
||||||
|
--foreground1: #d9e2ea;
|
||||||
|
--foreground2: #9aa8b4;
|
||||||
|
--foreground3: #6f7d88;
|
||||||
|
--cyan: #52d9ff;
|
||||||
|
--cyan-dim: rgba(82, 217, 255, 0.18);
|
||||||
|
--lime: #d8f24f;
|
||||||
|
--lime-dim: rgba(216, 242, 79, 0.16);
|
||||||
|
--red: #ff5b66;
|
||||||
|
--border-soft: rgba(255, 255, 255, 0.1);
|
||||||
|
--shadow-cyan: 0 0 36px rgba(82, 217, 255, 0.08);
|
||||||
|
--shadow-lime: 0 0 28px rgba(216, 242, 79, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--foreground1);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top, rgba(82, 217, 255, 0.11), transparent 28%),
|
||||||
|
linear-gradient(180deg, #06080b 0%, #040506 100%);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glow,
|
||||||
|
.bg-grid {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glow {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 15% 15%, rgba(82, 217, 255, 0.11), transparent 25%),
|
||||||
|
radial-gradient(circle at 90% 35%, rgba(216, 242, 79, 0.06), transparent 22%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-grid {
|
||||||
|
opacity: 0.08;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 32px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: rgba(5, 8, 11, 0.82);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid rgba(82, 217, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.55);
|
||||||
|
background: #000;
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0.62rem;
|
||||||
|
border: 1px solid var(--cyan);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow.lime {
|
||||||
|
color: var(--lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.2);
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
color: var(--foreground1);
|
||||||
|
padding: 0.7rem 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
transition: 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover,
|
||||||
|
.nav-link:focus-visible {
|
||||||
|
border-color: rgba(82, 217, 255, 0.65);
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link--active {
|
||||||
|
background: var(--foreground0);
|
||||||
|
color: #000;
|
||||||
|
border-color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid,
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: rgba(0, 0, 0, 0.48);
|
||||||
|
border: 1px solid var(--border-soft);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.tone-cyan {
|
||||||
|
border-color: rgba(82, 217, 255, 0.22);
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.tone-lime {
|
||||||
|
border-color: rgba(216, 242, 79, 0.22);
|
||||||
|
box-shadow: var(--shadow-lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: clip;
|
||||||
|
box-shadow: var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -4rem;
|
||||||
|
top: 3rem;
|
||||||
|
width: 12rem;
|
||||||
|
height: 12rem;
|
||||||
|
border: 1px solid rgba(82, 217, 255, 0.16);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px dashed rgba(82, 217, 255, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p,
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
font-size: clamp(2.4rem, 7vw, 4.8rem);
|
||||||
|
line-height: 0.95;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0.45rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text,
|
||||||
|
.prose-copy p,
|
||||||
|
.article-card p,
|
||||||
|
.project-card p,
|
||||||
|
.contact-copy {
|
||||||
|
line-height: 1.75;
|
||||||
|
color: var(--foreground1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
margin-top: 1rem;
|
||||||
|
max-width: 48rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
min-width: 220px;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(10, 16, 22, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.55rem 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
color: var(--foreground1);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row--head {
|
||||||
|
padding-top: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid,
|
||||||
|
.project-grid,
|
||||||
|
.tag-grid,
|
||||||
|
.link-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat span,
|
||||||
|
.muted,
|
||||||
|
.card-meta,
|
||||||
|
.project-foot {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--foreground2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat strong {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--foreground0);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-list,
|
||||||
|
.card-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission,
|
||||||
|
.quick-link,
|
||||||
|
.article-card,
|
||||||
|
.project-card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link {
|
||||||
|
display: block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
transition: 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-link:hover,
|
||||||
|
.article-card:hover,
|
||||||
|
.project-card:hover {
|
||||||
|
border-color: rgba(82, 217, 255, 0.35);
|
||||||
|
background: rgba(82, 217, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, max-content));
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: rgba(82, 217, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-lime {
|
||||||
|
color: var(--lime);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-card h3,
|
||||||
|
.project-card h3 {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-grid {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-foot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-block {
|
||||||
|
margin-top: 1rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(7, 16, 24, 0.95);
|
||||||
|
color: var(--foreground1);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.hero-grid,
|
||||||
|
.content-grid,
|
||||||
|
.footer-grid,
|
||||||
|
.project-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-head {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.layout,
|
||||||
|
.topbar {
|
||||||
|
padding-inline: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
align-items: start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid,
|
||||||
|
.link-grid,
|
||||||
|
.tag-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,16 +1,7 @@
|
|||||||
---
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
---
|
<Layout>
|
||||||
|
<button class="btn-0">Hello WebTUI</button>
|
||||||
<html lang="en">
|
</Layout>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Nikita Pozd Main Site</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
48
src/pages/ui.astro
Normal file
48
src/pages/ui.astro
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
---
|
||||||
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 py-8 md:px-6">
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
|
<details is-="accordion">
|
||||||
|
<summary>Summary title</summary>
|
||||||
|
<p>Accordion content</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<dialog id="dialog" popover>
|
||||||
|
<div box-="round" id="content">
|
||||||
|
<p>Are you sure you want to delete this?</p>
|
||||||
|
<div id="buttons">
|
||||||
|
<button box-="round">Cancel</button>
|
||||||
|
<button box-="round">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
<button popovertarget="dialog">Open Dialog</button>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1lh;
|
||||||
|
padding: 2lh 2ch 1lh 2ch;
|
||||||
|
background-color: var(--background1);
|
||||||
|
}
|
||||||
|
#buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1ch;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
15
src/styles/global.css
Normal file
15
src/styles/global.css
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
@layer theme, base, components, utilities;
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@import "@webtui/css/base.css" layer(base);
|
||||||
|
|
||||||
|
/* utilities */
|
||||||
|
@import "@webtui/css/utils/box.css" layer(utilities);
|
||||||
|
|
||||||
|
/* components */
|
||||||
|
@import "@webtui/css/components/typography.css" layer(components);
|
||||||
|
|
||||||
|
@import "@webtui/css/components/button.css" layer(components);
|
||||||
|
@import '@webtui/css/components/accordion.css' layer(components);
|
||||||
|
@import '@webtui/css/components/dialog.css' layer(components);
|
||||||
|
|
||||||
Reference in New Issue
Block a user